/* BakeSmart PH — public/learner site. "Studio" design system (2026-08-19
   full redesign, matching admin.css): modern minimalist SaaS — white
   surfaces on a soft neutral background, Inter everywhere, a real
   radius/shadow scale instead of flat zero-radius edges, and genuine
   semantic colors (green success / amber warning / red danger) instead of
   a mono palette where "pending" and "brand" shared the same blue. Scoped
   under .bake-landing so it never leaks into the rest of the app.
   2026-09-06: --color-accent (the primary button/link/focus/active-state
   color used everywhere below) was still the old TESDA navy from the
   original redesign, while the admin console, the "Smart" wordmark, and
   --color-gold on this very page had already all moved to the brand
   orange — redefined here rather than edited at each of --color-accent's
   ~90 call sites, since none of them differentiate multiple categories
   side-by-side the way admin.css's gold/sage/warning/purple palette does
   (that file keeps its own --gold as navy for exactly that reason — see
   its header comment). --color-gold already equalled the new orange, so
   this makes the two consistent instead of introducing a third brand hue. */
/* .bl-embedded shares these design tokens/typography with .bake-landing —
   used to render RecipeLearnerView.razor (the recipe-detail content shared by
   the public recipe page and the admin "preview as learner" tool) correctly
   when it isn't nested inside an actual .bake-landing page, e.g. inside the
   admin shell. It intentionally skips the page-level background/sticky-footer
   rules below, which only make sense on a full .bake-landing page. */
.bake-landing, .bl-embedded {
    --color-bg: #F7F8FA;
    --color-surface: #FFFFFF;
    --color-text: #12151A;
    --color-accent: #D97706;
    --color-divider: #E4E7EC;

    --color-accent-100: #FEF3E0;
    --color-accent-800: #B45F04;
    --color-neutral-100: #EEF0F3;
    --color-neutral-800: #5B6472;
    --color-gold: #D97706;
    --color-success: #16A34A;
    --color-success-100: #E7F7ED;
    --ink-faint: #94A0AF;

    /* Home-page-only reference tokens (2026-09-05 landing port) — a cream hero
       band, a lavender Learning Path panel, and a deep-navy band shared by the
       Business Corner banner and the footer. */
    --color-hero-bg: #FBF2E6;
    --color-lavender: #E9ECFA;
    --color-navy-deep: #0A2A5E;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.07);
    --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12);

    /* Aliases for auth.css's token names (--panel, --line, --gold, --ink, …) —
       auth.css's .auth-input/.auth-select/.auth-error/etc. classes get reused
       outside .auth-page (Settings.razor, BusinessMarketing.razor,
       RecipeDetails.razor) but those tokens are only ever defined inside
       .auth-page, so without these aliases the borders/fills silently no-op.
       Same numeric values admin.css's .admin-shell already uses for its own
       copies of these tokens, so this doesn't change how anything looks
       anywhere it was already rendering correctly. */
    --panel: var(--color-surface);
    --line: var(--color-divider);
    --gold: var(--color-accent);
    --gold-dark: var(--color-accent-800);
    --ink: var(--color-text);
    --ink-soft: #5B6472;
    --sage: #16A34A;
    --sage-soft: #E7F7ED;
    --wheat: #EEF0F3;
    --red: #DC2626;
    --red-soft: #FDECEC;

    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 0.95vw, 17px);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.bake-landing {
    background: var(--color-bg);
    /* No overflow-x here on purpose — an ancestor with overflow other than
       visible breaks position:sticky on descendants (the .bl-nav below).
       Horizontal-scroll containment is handled globally on html/body in
       app.css instead, which doesn't sit between .bl-nav and the viewport. */

    /* Sticky-footer layout: on a short page (e.g. Modules/Resources with only
       a card or two seeded), the page used to end early and leave the
       browser's own white background showing below the Business Corner CTA
       band, or below the last section on pages that don't have the CTA.
       min-height:100vh + flex-column here, with .bl-block set to flex:1
       below, makes the main content section absorb any leftover space so
       whatever's last (the CTA band, or the section itself) always reaches
       the bottom of the viewport instead of leaving a gap. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bake-landing *, .bl-embedded * {
    box-sizing: border-box;
}

.bake-landing a, .bl-embedded a {
    color: var(--color-accent);
    text-decoration: none;
}

.bake-landing h1, .bake-landing h2, .bake-landing h3,
.bake-landing h4, .bake-landing h5, .bake-landing h6,
.bl-embedded h1, .bl-embedded h2, .bl-embedded h3,
.bl-embedded h4, .bl-embedded h5, .bl-embedded h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
}

.bake-landing h6, .bl-embedded h6 {
    font-size: clamp(14px, 1vw, 17px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.bake-landing p, .bl-embedded p {
    margin: 0 0 14px;
}

/* full-bleed content band: fluid side padding, no max-width cap */
.bl-container {
    width: 100%;
    padding-inline: clamp(24px, 5vw, 96px);
}

/* — buttons — */
.bake-landing .btn, .bl-embedded .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(15px, 1vw, 17px) !important;
    line-height: 1.2;
    color: var(--color-text) !important;
    background: transparent;
    border: 1px solid transparent;
    padding: clamp(12px, 1vw, 16px) clamp(22px, 2vw, 32px) !important;
    border-radius: var(--radius-md) !important;
    text-transform: none !important;
}

.bake-landing .btn-primary, .bl-embedded .btn-primary {
    background-color: var(--color-accent) !important;
    color: var(--color-bg) !important;
}

.bake-landing .btn-primary:hover, .bl-embedded .btn-primary:hover {
    background-color: var(--color-accent-800) !important;
}

.bake-landing .btn-secondary, .bl-embedded .btn-secondary {
    border: 1px solid var(--color-divider) !important;
}

.bake-landing .btn-secondary:hover, .bl-embedded .btn-secondary:hover {
    background-color: rgba(32, 30, 29, 0.07) !important;
}

/* — nav — */
.bl-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider);
    border-top: 4px solid var(--color-gold);
}

.bl-nav-inner {
    display: flex !important;
    align-items: center;
    gap: clamp(20px, 2.2vw, 40px);
    padding-top: 18px;
    padding-bottom: 18px;
    /* Positioning context for .bl-notif-panel — see .bl-nav-bell-wrap below for why
       it isn't anchored to the bell itself. */
    position: relative;
}

.bl-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

.bl-nav-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--color-gold);
}

.bl-nav-logo-icon svg {
    width: 26px;
    height: 26px;
}

.bl-nav-brand-group {
    display: flex;
    flex-direction: column;
}

.bl-nav-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 1.6vw, 26px);
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.bl-nav-accent {
    color: var(--color-gold);
}

.bl-nav-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    margin-top: 2px;
}

.bl-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.2vw, 40px);
}

.bl-nav a {
    color: var(--color-text);
    font-size: clamp(15px, 1vw, 17px);
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.bl-nav a:hover, .bl-nav a[aria-current='page'], .bl-nav a.active {
    color: var(--color-accent);
}

.bl-nav a[aria-current='page'], .bl-nav a.active {
    border-bottom-color: var(--color-accent);
}

/* Icon + pill-background active state for the main nav links specifically —
   placed after the generic underline rules above so it wins the cascade on
   the tied ".bl-nav a" vs ".bl-nav-links a" specificity (same weight, later
   wins). Doesn't touch .bl-nav-account-link/.bl-nav-login, which keep the
   plain underline look from the rules above. */
.bl-nav-links a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border-bottom: none !important;
    white-space: nowrap;
}

.bl-nav-links a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bl-nav-links a:hover {
    background: var(--color-neutral-100);
}

.bl-nav-links a.active {
    background: var(--color-accent-100);
    color: var(--color-accent);
}

.bl-nav-toggle {
    display: none !important;
    color: var(--color-text) !important;
    flex-shrink: 0;
}

/* — locked nav state while an exam is in progress (PublicNav LockNavigation) — */
.bl-nav-locked-hint {
    font-size: 13px;
    font-weight: 700;
    opacity: .65;
}

/* — nav account menu (logged-in learners/admins) — always visible regardless
   of the .bl-nav-links breakpoint below, so there's never a viewport where a
   signed-in user has no way to reach Settings or Log out. */
.bl-nav-account {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bl-nav-account-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.bl-nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    overflow: hidden;
}

.bl-nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-nav-account-name {
    font-weight: 600;
}

.bl-nav-account-link.active .bl-nav-avatar,
.bl-nav-account-link:hover .bl-nav-avatar {
    background: var(--color-accent-800);
}

/* Avatar + name + chevron dropdown (replaces the old plain settings-link +
   standalone logout icon for a signed-in learner) — same open/backdrop-close
   pattern as .bl-notif-panel above, just anchored to this narrower wrapper
   instead of the whole nav bar since nothing sits to its right. */
.bl-nav-account-menu-wrap {
    position: relative;
}

.bl-nav-account-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.bl-nav-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.bl-nav-account-toggle.open .bl-nav-chevron {
    transform: rotate(180deg);
}

.bl-nav-account-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}

.bl-nav-account-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.bl-nav-account-menu-item:hover {
    background: var(--color-bg);
}

.bl-nav-account-menu-item.danger {
    color: var(--red);
}

.bl-nav-account-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bl-nav-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-text);
    opacity: 0.7;
}

.bl-nav-logout:hover {
    opacity: 1;
}

.bl-nav-logout svg {
    width: 17px;
    height: 17px;
}

.bl-nav-bell-wrap {
    /* Deliberately not position:relative — .bl-notif-panel below anchors to
       .bl-nav-inner (the whole nav bar) instead of this 30px icon, because the
       avatar/logout button sit to the bell's right. Anchoring to this narrow wrap
       pushed the 320px panel partly off-screen on mobile (right:0 measured from a
       point nowhere near the actual right edge of the nav). */
}

.bl-nav-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-text);
    opacity: 0.7;
    position: relative;
}

.bl-nav-bell:hover {
    opacity: 1;
}

.bl-nav-bell svg {
    width: 19px;
    height: 19px;
}

.bl-nav-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.bl-notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
}

/* The whole notification UI lives here now (no separate /notifications page) —
   header + Unread/Read toggle + list stay pinned, only .bl-notif-panel-list
   itself scrolls, and pagination (5 per page) keeps that list from ever
   needing to grow past one screenful in the first place. */
.bl-notif-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    z-index: 60;
}

.bl-notif-panel-head {
    padding: 14px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--color-divider);
}

.bl-notif-panel-tabs {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-divider);
}

.bl-notif-panel-tabs .seg {
    width: 100%;
}

.bl-notif-panel-tabs .seg-opt {
    flex: 1;
    justify-content: center;
    padding: 6px 10px;
    font-size: 12px;
}

.bl-notif-panel-list {
    overflow-y: auto;
}

.bl-notif-empty {
    padding: 20px 16px;
    font-size: 13px;
    opacity: .6;
}

.bl-notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-divider);
    cursor: pointer;
}

.bl-notif-item:hover {
    background: var(--color-surface);
}

.bl-notif-item.unread {
    border-left: 3px solid var(--color-accent);
}

.bl-notif-item-title {
    font-weight: 700;
    font-size: 13px;
}

.bl-notif-item-message {
    font-size: 12px;
    opacity: .75;
    margin-top: 4px;
}

.bl-notif-item-time {
    font-size: 11px;
    opacity: .5;
    margin-top: 6px;
}

/* AdminPagination's classes are otherwise only styled under .admin-shell in
   admin.css — the notification panel is its first use on a public page. */
.bake-landing .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Tighter than the generic rule above — no room in a 320px dropdown for the
   auto-centered, wider default spacing. */
.bake-landing .bl-notif-panel .pagination-bar {
    padding: 8px 16px;
    border-top: 1px solid var(--color-divider);
    gap: 6px;
}

.bake-landing .bl-notif-panel .pagination-info {
    display: none;
}

.bake-landing .pagination-info {
    font-size: 12px;
    opacity: .6;
}

.bake-landing .pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bake-landing .page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bake-landing .page-btn svg {
    width: 15px;
    height: 15px;
}

.bake-landing .page-btn:hover:not(:disabled) {
    background: var(--color-surface);
}

.bake-landing .page-btn.active {
    background: var(--color-accent);
    color: #fff;
}

.bake-landing .page-btn:disabled {
    color: var(--color-divider);
    cursor: default;
}

.bake-landing .page-ellipsis {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .5;
}

.bl-nav-login {
    font-size: clamp(15px, 1vw, 17px);
    font-weight: 600;
    color: var(--color-text);
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.bl-nav-login:hover {
    color: var(--color-accent);
}

@media (max-width: 640px) {
    .bl-nav-account-name {
        display: none;
    }
}

/* Narrow phones: the brand lockup + tagline can wrap freely, but nothing to
   its right (Log In / avatar+bell / hamburger) ever should — that's what
   was squeezing "Log In" down into "Log" / "In" on two lines. Tightening the
   inner gap here (instead of the clamp(20px,...) default) buys back the
   width the brand group needs to wrap its tagline instead of the button. */
@media (max-width: 480px) {
    .bl-nav-inner {
        gap: 12px;
    }

    .bl-nav-brand-group {
        min-width: 0;
    }
}

/* Plain CSS show/hide (not MudHidden) so the nav links exist in the DOM
   immediately on first render — see PublicNav.razor for why. */
@media (max-width: 960px) {
    .bl-nav-links {
        display: none;
    }

    .bl-nav-toggle {
        display: inline-flex !important;
    }
}

/* — hero — */
.bl-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-hero-bg);
    border-bottom: 2px solid var(--color-divider);
}

/* Decorative dot grid tucked behind the hero copy's top-left corner —
   purely cosmetic, matches the reference's dotted-square accent. */
.bl-hero-dots {
    position: absolute;
    top: clamp(20px, 3vw, 40px);
    left: clamp(24px, 5vw, 96px);
    width: 72px;
    height: 72px;
    background-image: radial-gradient(color-mix(in srgb, var(--color-text) 22%, transparent) 1.6px, transparent 1.6px);
    background-size: 12px 12px;
    pointer-events: none;
}

.bl-hero-inner {
    position: relative;
    display: grid !important;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 5vw, 96px);
    align-items: center;
    padding-top: clamp(56px, 7vw, 120px);
    padding-bottom: clamp(56px, 7vw, 120px);
}

.bl-hero-copy h1 {
    font-size: clamp(38px, 4.4vw, 68px);
    max-width: 16ch;
}

.bl-hero-copy p {
    opacity: 0.75;
    font-size: clamp(16px, 1.2vw, 20px);
    max-width: 46ch;
}

.bl-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
}

/* Plain small label, not a banner — a big colored box here read as too heavy next
   to the hero copy, this is meant to sit quietly under the description line. */
.bl-enrollment-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
}

.bl-hero-img {
    height: clamp(280px, 28vw, 440px);
    position: relative;
    border-radius: 28px 160px 28px 28px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.bl-hero-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.02);
}

/* — image placeholder ("image-slot" in the reference) — */
.img-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    font-size: clamp(13px, 0.9vw, 15px);
    text-align: center;
    padding: 8px;
}

/* — content blocks — */
.bl-block {
    padding: clamp(48px, 6vw, 96px) 0;
    flex: 1 0 auto;
}

.bake-landing .bl-block-h6-spaced {
    margin-top: clamp(72px, 8vw, 120px);
}

.bl-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.6vw, 28px);
}

/* Competencies grid — unlike .bl-grid-4's fixed 1fr tracks (which leave
   leftover space on the right when there are fewer than 4 items, e.g. this
   program's 3 competencies), auto-fit collapses any empty tracks and
   justify-content:center centers whatever's left instead of pinning it to
   the left edge. minmax's fixed upper bound (not 1fr) is what makes
   justify-content take effect at all — 1fr tracks always stretch to fill. */
.bl-grid-competencies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center;
    gap: clamp(16px, 1.6vw, 28px);
}

/* Tighter than the base .card (which is also used for Business/Certificate
   cards elsewhere with more room to breathe) — the competency description
   made these noticeably taller than a name+count card needs to be. */
.bake-landing .bl-competency-card {
    gap: 6px;
    padding: 16px 18px;
}

.bl-competency-card .card-title {
    font-size: 16px;
}

.bl-competency-card .card-body {
    font-size: 13px;
    line-height: 1.45;
}

.bl-competency-card .card-count {
    font-size: 12.5px;
    margin-top: 2px;
}

.bl-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    justify-content: center;
    gap: clamp(16px, 1.6vw, 28px);
}

/* — cards — */
.bake-landing .card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(18px, 1.6vw, 28px);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bake-landing .card:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.card-kicker {
    font-size: clamp(11px, 0.75vw, 13px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    width: fit-content;
    font-weight: 700;
}

.card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.3vw, 21px);
    line-height: 1.25;
}

.card-count {
    font-size: clamp(13px, 0.9vw, 15px);
    opacity: 0.6;
}

.card-body {
    font-size: 14px;
    opacity: 0.75;
    flex: 1;
}

/* — business corner — */
.bl-grid-3-fluid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.6vw, 28px);
}

/* My Saved Plans table — .bl-table/.bl-table-wrap already give horizontal
   scroll-if-it-doesn't-fit for free (overflow-x:auto + a min-width floor on the
   table itself); this just sizes/aligns this table's specific cell content
   (a status badge + link per stage) compactly. */
.bl-plans-table {
    min-width: 640px;
}

.bl-plans-recipe-cell {
    font-weight: 700;
    white-space: nowrap;
}

.bl-plans-stage-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bl-plans-stage-cell .bl-status-badge {
    padding: 3px 8px;
    font-size: 10px;
    white-space: nowrap;
}

.bake-landing .bl-plans-stage-cell .bl-card-link {
    padding: 0 !important;
    margin-top: 0;
    font-size: 11.5px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .bl-plans-stage-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.bake-landing .bl-card-link {
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 0 0 !important;
    font-weight: 700;
    font-size: 13px;
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
}

.bake-landing .bl-case-study {
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.bl-case-study .img-slot {
    width: 180px;
    height: 120px;
    flex: none;
}

.bl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.bl-field label {
    font-size: 13px;
    font-weight: 600;
}

.bl-input {
    padding: 10px 14px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    width: 100%;
}

textarea.bl-input {
    resize: vertical;
}

.bl-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* — rich text editor (RichTextEditor.razor), reskinned from admin.css's
   .admin-shell-scoped version to this page's flat/Archivo tokens — the
   component itself is shared, but its styling isn't, since .admin-shell
   isn't an ancestor on public pages. */
.bake-landing .rte {
    border: 1px solid var(--color-divider);
    overflow: hidden;
    background: var(--color-bg);
}

.bake-landing .rte-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-bottom: 1px solid var(--color-divider);
    background: var(--color-surface);
    flex-wrap: wrap;
}

.bake-landing .rte-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bake-landing .rte-btn:hover {
    background: var(--color-accent-100);
    color: var(--color-accent);
}

.bake-landing .rte-sep {
    width: 1px;
    height: 18px;
    background: var(--color-divider);
    margin: 0 4px;
}

.bake-landing .rte-surface {
    min-height: 110px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px 13px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--color-text);
    outline: none;
    line-height: 1.55;
}

.bake-landing .rte-surface:empty::before {
    content: attr(data-placeholder);
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.bake-landing .rte-surface ul {
    list-style: disc;
    padding-left: 20px;
}

.bake-landing .rte-surface ol {
    list-style: decimal;
    padding-left: 20px;
}

.bake-landing .rte-surface li {
    display: list-item;
}

.bake-landing .rte-surface p {
    margin: 0 0 6px;
}

.bake-landing .rte-readonly {
    background: var(--color-surface);
}

.bake-landing .rte-readonly .rte-surface {
    cursor: default;
    opacity: .8;
}

.bl-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 12px;
}

.bl-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 14px;
}

.bl-table th, .bl-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-divider);
}

.bl-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
}

.bl-table td .bl-input {
    padding: 6px 8px;
    font-size: 13px;
}

.bl-summary-stack > .card {
    margin-bottom: 10px;
}

.bake-landing .bl-recipe-card {
    display: block;
    padding: 0;
    gap: 0;
    overflow: hidden;
    color: var(--color-text);
    cursor: pointer;
}

.bl-recipe-img {
    height: clamp(150px, 11vw, 190px);
    position: relative;
    overflow: hidden;
    padding: 0;
}

.bl-recipe-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.bl-recipe-card:hover .bl-recipe-photo {
    transform: scale(1.06);
}

.bl-empty-state {
    padding: 24px;
    background: var(--color-surface);
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    font-size: 14px;
}

.bl-recipe-title {
    font-size: clamp(14px, 0.9vw, 16px);
    padding: 12px 12px 0;
}

.bl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 12px;
}

/* — recipe "product item" card (Featured Recipes on Home + /recipes' full
   grid): image with the competency (and, on /recipes, progress) as small
   badges overlaid on the photo itself — like a product tile's category/sale
   badge — instead of stacking every fact as a pill row under the title.
   Difficulty/duration move into a compact icon+label meta row instead. Only
   used where the markup opts in (.bl-recipe-body wrapper); CompetencyDetails'
   and Marketing's simpler card markup are untouched by these rules. */
.bl-recipe-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}

.bake-landing .bl-recipe-badges .tag {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.bake-landing .bl-recipe-badges .tag-accent {
    background: var(--color-accent);
    color: #fff;
}

.bl-recipe-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bl-recipe-body .bl-recipe-title {
    padding: 0;
    font-weight: 700;
}

.bl-recipe-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--color-text);
    opacity: .65;
}

.bl-recipe-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.bl-recipe-meta-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* — section head (h6 + trailing link, e.g. "Featured Recipes" / "View all recipes →") — */
.bake-landing .bl-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bake-landing .bl-section-head h6 {
    margin: 0;
}

.bl-view-all {
    font-size: clamp(13px, 0.85vw, 15px);
    font-weight: 600;
    white-space: nowrap;
}

/* — resource cards — */
.bake-landing .bl-resource-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: var(--color-text);
}

/* explicit View/Download action button — card itself is a non-clickable
   container now, so this is the only interactive element. margin-top:auto
   pins it to the card's bottom edge so every card in a row lines its button
   up on the same baseline regardless of how much title/tag text sits above
   it. Solid (btn-primary) fill instead of the site's default outline button
   — an outline here read as an empty placeholder box blending into the
   card's own gray surface, not a real call to action. */
.bake-landing .bl-resource-card .bl-card-action,
.bake-landing .bl-resource-card .bl-card-locked {
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding: 12px 16px !important;
    font-size: clamp(13px, 0.8vw, 14px) !important;
}

/* "Log in to access/save" is a real, working link (to /login), not a disabled
   control — give it its own accent-outlined look, distinct from the filled
   primary action, instead of a washed-out gray-on-gray box. Not scoped to
   .bl-resource-card — reused standalone for Save buttons on the Costing/
   Business Plan pages, which aren't inside a card. */
.bake-landing .bl-card-locked {
    border: 1px solid var(--color-accent) !important;
    color: var(--color-accent) !important;
    background: transparent !important;
}

.bake-landing .bl-card-locked:hover {
    background-color: var(--color-accent-100) !important;
}

.bl-resource-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-accent-100);
    color: var(--color-accent-800);
}

.bl-resource-icon svg {
    width: 20px;
    height: 20px;
}

.bl-resource-title {
    font-size: clamp(14px, 0.9vw, 16px);
}

/* — tags — */
.tag {
    display: inline-flex;
    align-items: center;
    font-size: clamp(10px, 0.7vw, 11px);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    border: none;
    font-family: 'Inter', sans-serif;
}

.tag-accent {
    background: var(--color-accent-100);
    color: var(--color-accent-800);
}

.tag-neutral {
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
}

.tag-outline {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

/* clickable tag variant (competency filter chips on /recipes) */
button.tag {
    cursor: pointer;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}

button.tag-outline:hover {
    background: var(--color-accent-100);
}

/* — recipe repository controls (/recipes) — */
.bl-repo-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bl-search-input {
    width: 100%;
    max-width: 340px;
    padding: 10px 14px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.bl-search-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* competency filter shares .bl-search-input's height/border so it sits flush
   with the search box and segmented control in the same .bl-repo-controls
   row on desktop; capped narrower since option text is longer than a query */
.bl-competency-select {
    max-width: 280px;
}

.seg {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.seg-opt {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-divider);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.seg-opt:first-child {
    border-left: none;
}

.seg-opt.active {
    background: var(--color-accent);
    color: var(--color-bg);
}

.seg-opt:not(.active):hover {
    background: var(--color-surface);
}

.bl-level-seg {
    margin-top: 16px;
}

.seg-opt:disabled {
    cursor: not-allowed;
}

.seg-opt.locked {
    opacity: 0.5;
}

.bl-repo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(20px, 2vw, 32px);
}

/* auto-fit + justify-content:center (same fix as .bl-grid-competencies) —
   fewer recipes than a full row now centers instead of hugging the left
   edge with empty space on the right; also naturally responsive down to a
   single column on phones without hardcoded breakpoints. Min raised to 330px
   (was 220-260, which rendered noticeably smaller/narrower than the
   reference's ~400px cards) — at typical desktop widths this settles into
   either 3 wide or 4 slightly-less-wide columns, both landing close to the
   reference's card width, rather than a fixed px target that would only be
   correct at one exact viewport size. Kept a real (non-1fr) upper bound —
   same reason as .bl-grid-competencies above: 1fr tracks always stretch to
   fill, which breaks justify-content:center's job of centering a partial
   last row instead of stretching it edge-to-edge. */
.bl-grid-recipes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 400px));
    justify-content: center;
    gap: clamp(16px, 1.6vw, 24px);
}

/* Reference's photo crop is a wide landscape strip, noticeably wider than
   the clamped height .bl-recipe-img uses elsewhere (tuned for a 3-up
   Home grid that no longer exists) — an aspect-ratio (not a fixed height)
   keeps the same proportions at any card width this auto-fit grid settles
   on, instead of one height being right only at one specific width. */
.bl-grid-recipes .bl-recipe-img {
    height: auto;
    aspect-ratio: 12 / 5;
}

/* The 330px card-width floor above (needed to hit the reference's ~400px
   desktop card width) means auto-fit can no longer fit 2 columns on its own
   in the 600-900px tablet/mobile-landscape range the way the old 220px floor
   did — force 2 columns explicitly through that whole range instead of
   dropping to 1 oversized card per row. The <600px block further down still
   owns the compact phone-tuned sizing (110px image, smaller type, etc.) on
   top of this. */
@media (max-width: 900px) {
    .bl-grid-recipes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* — recipe detail page (/recipes/{id}) — */
.bl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

/* — generic page header (kicker + title + description) — e.g. /competencies/{id} —
   gives the kicker its own line with breathing room above the title, unlike
   .card-kicker's flush-against-the-title default inside a .card */
.bl-page-header {
    margin-bottom: clamp(24px, 3vw, 40px);
}

.bl-page-header .card-kicker {
    display: block;
    margin-bottom: 10px;
}

.bl-detail-title {
    margin-bottom: 10px;
}

.bl-detail-desc {
    opacity: .75;
    max-width: 60ch;
    margin-top: 14px;
}

.bl-detail-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(24px, 3vw, 40px);
}

.bl-lock-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--color-accent-100);
    color: var(--color-accent-800);
    font-size: 14px;
    margin-bottom: 16px;
}

/* Shown in the Steps tab body itself when a guest reaches a locked Level or
   the Procedure overview directly (e.g. via the Overview/Steps toggle) —
   disabling the segment button alone doesn't stop that, since ActiveLevel/
   _showingProcedure can already be pointing at a locked target. */
.bl-locked-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: clamp(32px, 5vw, 56px) 24px;
    text-align: center;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.bl-locked-content-icon {
    font-size: 28px;
}

.bl-locked-content p {
    margin: 0;
    font-size: 15px;
}

/* — recipe detail page v2 (2026-09-05 reference port): 2-column layout
   (content + sidebar), photo/title hero, Overview/Steps tabs, and a
   Recipe Information/Ingredients/Equipment sidebar. — */
.bl-recipe-detail-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(20px, 2.4vw, 32px);
    align-items: start;
}

.bl-detail-hero-v2 {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(20px, 2.4vw, 32px);
    margin-bottom: clamp(20px, 2.4vw, 28px);
}

.bl-detail-hero-photo {
    position: relative;
    height: 240px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
}

.bl-detail-preview-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.bl-detail-hero-body .bl-tags {
    margin: 12px 0;
}

/* Caps the left column's own content (a Level's instructions + a long
   Checklist, in particular) so it scrolls internally past a sane height
   instead of stretching the whole page — the right sidebar's height is
   unrelated (align-items:start sizes each column independently), so nothing
   here needs to match it, just stop growing unbounded. */
.bl-detail-tab-panel {
    max-height: 640px;
    overflow-y: auto;
    padding-right: 6px;
}

/* — Overview/Steps tabs — */
.bl-detail-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    margin-bottom: clamp(16px, 2vw, 24px);
}

.bl-detail-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.bl-detail-tab.active {
    background: var(--color-accent);
    color: #fff;
}

/* — Overview tab content — */
.bl-info-card {
    padding: clamp(18px, 2vw, 24px);
    border-radius: var(--radius-lg);
}

.bl-info-card-tint {
    background: var(--color-accent-100);
}

.bl-info-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bl-info-card-head h3, .bl-info-card-head h4 {
    margin: 0;
}

.bl-info-card-head h4 {
    font-size: 15px;
}

.bl-info-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 15px;
}

.bl-info-card-body {
    margin: 0;
    opacity: 0.8;
}

.bl-info-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.bl-info-subcard {
    padding: 16px 18px;
}

.bl-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
}

.bl-check-list li {
    color: var(--color-success);
}

/* — sidebar cards — */
.bl-info-sidebar-card {
    padding: 18px 20px;
}

.bl-panel-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.bl-info-sidebar-title {
    margin: 0;
    font-size: 17px;
    flex: 1;
}

.bl-count-badge {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-accent-100);
    color: var(--color-accent-800);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bl-recipe-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
}

.bl-recipe-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bl-recipe-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    font-size: 14px;
}

.bl-recipe-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bl-recipe-info-label {
    font-size: 11.5px;
    opacity: 0.6;
}

.bl-recipe-info-value {
    font-weight: 700;
    font-size: 13.5px;
}

.bl-ingredient-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.bl-ingredient-list li {
    display: flex;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-divider);
    font-size: 13.5px;
}

.bl-ingredient-list li:last-child {
    border-bottom: none;
}

.bl-ingredient-qty {
    flex: 0 0 68px;
    opacity: 0.65;
}

.bl-ingredient-name {
    font-weight: 600;
}

.bl-equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.bl-equipment-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    font-size: 12.5px;
    font-weight: 600;
}

@media (max-width: 900px) {
    /* minmax(0, 1fr), not bare 1fr — same root cause documented elsewhere in this
       file: a bare 1fr track's automatic minimum is its content's min-content
       width (here, the Level tabs strip's unwrapped button text), which floors
       the single column wider than the viewport even with overflow-x:auto on
       the strip itself. */
    .bl-detail-hero-v2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-detail-hero-photo {
        height: 200px;
    }

    .bl-info-card-row {
        grid-template-columns: 1fr;
    }

    .bl-recipe-info-grid {
        grid-template-columns: 1fr;
    }

    .bl-equipment-grid {
        grid-template-columns: 1fr;
    }
}

/* a level's rich-text content — its own block below the level tabs, rather
   than squeezed inside a checklist row */
.bl-level-content {
    font-size: 15px;
    line-height: 1.65;
    max-width: 68ch;
}

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

.bl-level-content p:last-child {
    margin-bottom: 0;
}

.bl-level-content ul,
.bl-level-content ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.bl-photo-required {
    margin-top: 16px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--color-gold) 18%, var(--color-bg));
    border-left: 3px solid var(--color-gold);
    font-size: 13px;
    max-width: 68ch;
}

.bake-landing .btn:disabled, .bl-embedded .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* — recipe level actions (Mark as Done / photo submission) — */
.bl-level-action {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-divider);
}

.bl-level-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
}

.bl-level-status-approved {
    background: var(--color-success-100);
    color: var(--color-success);
}

.bl-level-status-pending {
    background: color-mix(in srgb, var(--color-gold) 18%, var(--color-bg));
    color: var(--color-neutral-800);
}

.bl-level-status-returned {
    background: rgba(32, 30, 29, 0.08);
    color: var(--color-text);
}

.bl-level-returned {
    margin-bottom: 14px;
}

.bl-level-note {
    margin: 8px 0 0;
    font-size: 13px;
    font-style: italic;
    opacity: .75;
    max-width: 60ch;
}

.bl-level-photo-submit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bl-photo-input {
    font-size: 14px;
}

.bl-level-hint {
    font-size: 12px;
    opacity: .65;
}

/* — recipe page's Business Requirements section (Costing/Marketing/Business
   Plan, gated after all 3 levels are done) — 2026-09-05 reference reskin,
   recolored to this app's own navy/amber theme (was the reference's green,
   which reads as a different product) — icon+title+subtitle header, a tip
   callout, and a single-row 4-column card grid. Approved/Pending/Returned
   badges keep their existing semantic colors (green/amber/red) — only the
   panel's own decorative background/accent changed. */
.bl-requirements-panel {
    padding: clamp(20px, 2.2vw, 32px);
    border-radius: var(--radius-lg);
    background: var(--color-accent-100);
}

.bl-requirements-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: clamp(20px, 2.2vw, 28px);
}

.bl-requirements-title {
    font-size: clamp(19px, 1.6vw, 24px);
    margin-bottom: 2px;
}

.bl-requirements-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 320px;
    margin-left: auto;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 13px;
    color: var(--color-accent-800);
    font-weight: 600;
    line-height: 1.4;
}

.bl-stage-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 1.4vw, 20px);
}

/* 4 narrow columns reads cramped once each drops under ~220px — step down to 2
   before the existing 900px breakpoint collapses to a single column. */
@media (max-width: 1200px) {
    .bl-stage-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bake-landing .bl-stage-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}

.bl-stage-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    font-size: 24px;
}

.bl-stage-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bl-stage-card-desc {
    font-size: 13px;
    opacity: 0.7;
    margin: 0;
}

.bl-stage-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bl-stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

/* — Business Corner worksheet pages (Costing/Marketing/Plan): the inline
   Save as Draft + Submit action row, and the banner that replaces it once a
   submission is Pending admin review (form goes read-only at the same time). */
.bl-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.bl-form-actions .btn {
    flex: 1;
    width: auto;
}

/* Compact sizing for in-form/in-modal action buttons — the base .btn is a bold
   marketing-CTA size (hero, nav, card links) that reads as oversized next to a
   form's own inputs or a dialog's body text. */
.bl-form-actions .btn,
.bl-modal-actions .btn {
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
}

.bl-pending-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    background: color-mix(in srgb, var(--color-gold) 18%, var(--color-bg));
    border-left: 3px solid var(--color-gold);
}

.bl-pending-banner-icon {
    font-size: 18px;
    line-height: 1;
}

.bl-pending-banner-text {
    font-size: 13px;
    font-weight: 700;
}

.bl-pending-banner-text span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    opacity: .7;
}

@media (max-width: 640px) {
    .bl-form-actions {
        flex-direction: column;
    }
}

/* — Business Corner's Marketing page (/business/marketing) — reference photo +
   the learner's own optional photo upload. A dropzone-style card: the whole
   preview area is the clickable target (not a separate button underneath),
   with filename + remove surfaced once a photo is chosen. Scoped to public
   pages since admin.css's .image-upload-* classes are all under .admin-shell. */
.bl-marketing-photo-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bl-marketing-photo-drop {
    position: relative;
    display: block;
    cursor: pointer;
}

.bl-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.bl-marketing-photo-slot {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1.5px dashed var(--color-divider);
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.bl-marketing-photo-drop:hover .bl-marketing-photo-slot {
    border-color: var(--color-accent);
    background: var(--color-accent-100);
    color: var(--color-accent-800);
}

.bl-marketing-photo-drop.has-photo .bl-marketing-photo-slot {
    border-style: solid;
    padding: 0;
}

.bl-marketing-photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-marketing-photo-icon {
    width: 26px;
    height: 26px;
}

.bl-marketing-photo-cta {
    font-size: 13px;
    font-weight: 700;
}

.bl-marketing-photo-slot-static {
    border-style: solid;
    cursor: default;
}

.bl-marketing-photo-empty {
    font-size: 13px;
    opacity: .55;
}

.bl-marketing-photo-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.bl-marketing-photo-label {
    font-size: 13px;
    font-weight: 700;
}

.bl-marketing-photo-filename {
    font-size: 11px;
    opacity: .6;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl-marketing-photo-remove {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    flex-shrink: 0;
}

.bl-marketing-photo-error {
    margin-top: 2px;
}

/* — learner dashboard (/dashboard) — */
.bl-dashboard-hero {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0.3) 100%), url('/images/hero-banner.png');
    background-size: cover;
    background-position: center 25%;
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--color-divider);
}

.bl-dashboard-hero-inner {
    max-width: 640px;
}

.bl-dashboard-greeting {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    margin: 0 0 6px;
}

.bl-dashboard-wave {
    display: inline-block;
}

.bl-dashboard-greeting-sub {
    font-size: 15px;
    opacity: .75;
    margin: 0 0 14px;
}

.bl-dashboard-quote {
    font-size: 14px;
    font-style: italic;
    color: var(--color-gold);
    margin: 0;
}

.bl-dashboard-quote-underline {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--color-gold);
    margin-top: 10px;
    border-radius: 2px;
}

/* Decorative cursive flourish overlaid on the hero photo, top-right — a
   photo-independent overlay (unlike the reference mockup's own stock photo,
   which happens to have similar text baked into a chalkboard prop) so it
   still works if the underlying photo asset is ever swapped out. */
.bl-dashboard-hero-tagline {
    position: absolute;
    top: clamp(20px, 4vw, 36px);
    right: clamp(20px, 4vw, 64px);
    font-family: 'Caveat', cursive;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.25;
    font-weight: 600;
    color: var(--color-accent-800);
    text-align: right;
}

.bl-dashboard-hero-tagline-heart {
    color: var(--color-gold);
}

.bl-dashboard-overall-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin: 24px 0 clamp(32px, 4vw, 48px);
    overflow: hidden;
}

.bl-dashboard-overall-left {
    display: flex;
    gap: 16px;
    padding: 24px;
}

.bl-dashboard-overall-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-accent-100);
    color: var(--color-accent);
}

.bl-dashboard-overall-icon svg {
    width: 22px;
    height: 22px;
}

.bl-dashboard-overall-pct {
    display: block;
    font-size: 26px;
    font-weight: 800;
    margin: 2px 0 8px;
}

.bl-dashboard-overall-count {
    display: block;
    font-size: 12.5px;
    opacity: .6;
    margin-top: 8px;
}

.bl-dashboard-stats {
    display: flex;
    align-items: center;
    padding: 24px;
    gap: clamp(16px, 2vw, 32px);
    border-left: 1px solid var(--color-divider);
}

.bl-dashboard-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: clamp(16px, 2vw, 32px);
    border-right: 1px solid var(--color-divider);
}

.bl-dashboard-stat:last-child {
    padding-right: 0;
    border-right: none;
}

.bl-dashboard-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-accent-100);
    color: var(--color-accent);
}

.bl-dashboard-stat-icon svg {
    width: 18px;
    height: 18px;
}

.bl-dashboard-stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

.bl-dashboard-stat-label {
    font-size: 12.5px;
    opacity: .6;
}

.bl-dashboard-stat-value {
    font-size: 17px;
    font-weight: 800;
}

.bl-dashboard-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.bl-dashboard-section-head h2 {
    margin: 0 0 4px;
    font-size: clamp(21px, 2vw, 27px);
}

.bl-dashboard-section-head p {
    margin: 0;
    font-size: 14px;
    opacity: .65;
}

.bl-comp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.bl-comp-icon svg {
    width: 20px;
    height: 20px;
}

/* Admin-uploaded competency photo (CompetencyProgressRow.ImageDataUrl) takes
   over the whole box when set — same "photo replaces the icon" pattern as
   Home.razor's competency cards. */
.bl-comp-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.bl-comp-icon-blue { background: #DCE9FB; color: #1D4ED8; }
.bl-comp-icon-orange { background: #FCE7D4; color: #C2570A; }
.bl-comp-icon-green { background: #D8F3E3; color: #15803D; }

.bl-dashboard-row-index {
    font-weight: 700;
    opacity: .5;
}

.bl-dashboard-recipes-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bl-dashboard-recipes-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    opacity: .7;
    flex-shrink: 0;
}

.bl-dashboard-recipes-icon svg {
    width: 15px;
    height: 15px;
}

.bl-dashboard-recipes-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.bl-dashboard-recipes-text strong {
    font-size: 14px;
}

.bl-dashboard-recipes-text span {
    font-size: 11px;
    opacity: .6;
}

.bl-dashboard-status-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.bl-dashboard-status-hint {
    font-size: 11.5px;
    opacity: .6;
}

.bl-dashboard-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bl-dashboard-name-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bl-dashboard-name-desc {
    font-size: 12.5px;
    font-weight: 400;
    opacity: .6;
    white-space: normal;
}

.bl-dashboard-action-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.bl-dashboard-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-accent);
    color: var(--color-accent);
    background: #fff;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.bl-dashboard-action-btn:hover {
    background: var(--color-accent-100);
}

/* Higher-emphasis variant for the exam actions (Take Exam / Retake Exam) —
   an exam is the one action in this table that's a real commitment (timed,
   limited attempts), so it gets the filled/solid treatment; Start/Continue
   Learning stays outline. */
.bl-dashboard-action-btn.solid {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.bl-dashboard-action-btn.solid:hover {
    background: var(--color-accent-800);
}

.bl-dashboard-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.bl-dashboard-action-none {
    opacity: .35;
}

.bl-dashboard-cert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 20px 24px;
    background: var(--color-hero-bg);
    border: 1px solid #F0DDBB;
    border-radius: var(--radius-lg);
}

.bl-dashboard-cert-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bl-dashboard-cert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: #F5DBAF;
    color: #B4650A;
}

.bl-dashboard-cert-icon svg {
    width: 20px;
    height: 20px;
}

.bl-dashboard-cert-title {
    margin: 0 0 2px;
    font-weight: 800;
}

.bl-dashboard-cert-desc {
    margin: 0;
    font-size: 13px;
    opacity: .65;
}

.bl-dashboard-cert-locked {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text);
    opacity: .65;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.bl-dashboard-cert-locked svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.bl-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.bl-progress-track {
    flex: 1;
    height: 8px;
    background: var(--color-divider);
}

.bl-progress-fill {
    height: 100%;
    background: var(--color-gold);
}

.bl-progress-label {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.bl-dashboard-table {
    margin-bottom: clamp(32px, 4vw, 56px);
}

.bl-dashboard-row {
    display: grid;
    grid-template-columns: 0.3fr 1.8fr 0.9fr 1.2fr 1fr 1.2fr;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-divider);
}

.bl-dashboard-name {
    text-decoration: none;
    color: inherit;
}

.bl-dashboard-name:hover {
    text-decoration: underline;
}

.bl-dashboard-score {
    font-size: 11.5px;
    opacity: .65;
    white-space: nowrap;
}

.bl-dashboard-head {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .6;
    border-bottom: 2px solid var(--color-divider);
}

.bl-dashboard-name {
    font-weight: 700;
}

.bl-status-badge {
    display: inline-flex;
    justify-self: start;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid currentColor;
}

.bl-status-not-started {
    color: var(--color-text);
    opacity: .55;
}

.bl-status-ongoing {
    color: color-mix(in srgb, var(--color-gold) 60%, var(--color-text));
    opacity: .85;
}

.bl-status-in-progress {
    color: color-mix(in srgb, var(--color-gold) 60%, var(--color-text));
}

.bl-status-completed {
    color: var(--color-success);
}

.bl-status-failed {
    color: var(--red);
}

/* Pill variant of the badges above — same StatusClass values, just a filled
   tinted-background pill with a small dot icon instead of an outlined
   text-only badge. Learner /dashboard only; the admin Learners "View Progress"
   modal keeps the plain .bl-status-badge look above. */
.bl-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.bl-status-pill svg {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.bl-status-pill-not-started {
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
}

.bl-status-pill-ongoing, .bl-status-pill-in-progress {
    background: #FDECD2;
    color: #92400E;
}

.bl-status-pill-completed {
    background: var(--color-success-100);
    color: var(--color-success);
}

.bl-status-pill-failed {
    background: #FEE2E2;
    color: var(--red);
}

/* — exam-taking page (/competencies/{id}/exam) — */
.bl-exam-question {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-divider);
}

.bl-exam-question:first-of-type {
    border-top: 1px solid var(--color-divider);
}

.bl-exam-question-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bl-exam-question-number {
    font-weight: 700;
    font-size: 13px;
    opacity: .6;
}

.bl-exam-question-text {
    font-weight: 700;
    margin: 0 0 14px;
}

.bl-exam-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bl-exam-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 14px;
}

.bl-exam-choice input[type="radio"] {
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bl-exam-result {
    padding: clamp(24px, 3vw, 40px);
    text-align: center;
    background: var(--color-surface);
}

.bl-exam-result-score {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
}

.bl-exam-result-label {
    margin-top: 6px;
    font-weight: 700;
}

.bl-exam-result.pass .bl-exam-result-label {
    color: var(--color-success);
}

.bl-exam-result.fail .bl-exam-result-label {
    color: var(--red);
}

.bl-exam-result-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

/* — generic public-site modal (exam pre-start rules, exam submit confirm) — */
.bl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 20, 27, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.bl-modal {
    background: #FFFFFF;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: clamp(22px, 3vw, 32px);
}

.bl-modal h3 {
    margin: 0 0 6px;
}

.bl-modal-lede {
    font-size: 14px;
    opacity: .7;
    margin: 0 0 18px;
}

.bl-modal-rules {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.bl-modal-rule {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
}

.bl-modal-rule-icon {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.bl-modal-actions {
    display: flex;
    gap: 10px;
}

.bl-modal-actions .btn {
    flex: 1;
    width: auto;
}

/* This modal renders as a sibling of .bake-landing, not a descendant (see the
   comment on .bl-modal-overlay above), so the .bake-landing-scoped btn-primary/
   btn-secondary rules near the top of this file never reach it — its buttons
   were falling through to Bootstrap's default blue/gray. Same brand colors as
   those rules, but with a fallback baked into each var() — the --color-* custom
   properties themselves are ALSO scoped to .bake-landing/.bl-embedded, so
   outside that scope they're undefined and a bare var(--color-accent) here
   would just as silently fail. */
.bl-modal-actions .btn-primary {
    background-color: var(--color-accent, #D97706) !important;
    border-color: var(--color-accent, #D97706) !important;
    color: var(--color-bg, #F7F8FA) !important;
}

.bl-modal-actions .btn-primary:hover {
    background-color: var(--color-accent-800, #B45F04) !important;
    border-color: var(--color-accent-800, #B45F04) !important;
}

.bl-modal-actions .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--color-divider, #E4E7EC) !important;
    color: var(--color-text, #12151A) !important;
}

.bl-modal-actions .btn-secondary:hover {
    background-color: rgba(32, 30, 29, 0.07) !important;
}

.bl-cert-confirm-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.bl-cert-confirm-name {
    font-weight: 700;
    font-size: 16px;
}

.bl-cert-confirm-sig-label {
    font-size: 12px;
    opacity: .6;
    margin: 0 0 4px;
}

.bl-cert-confirm-warning {
    background: #FBEAE8;
    color: #C0392B;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.bl-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

.bl-panel-head span {
    font-size: 13px;
    opacity: .6;
}

.bl-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bl-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--color-surface);
    cursor: pointer;
    transition: opacity .15s ease;
}

.bl-checklist-item input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.bl-checklist-item.checked {
    opacity: .55;
}

.bl-checklist-item.checked .bl-checklist-text {
    text-decoration: line-through;
}

.bl-checklist-item.locked {
    opacity: .4;
    cursor: not-allowed;
}

.bl-checklist-item.locked input[type="checkbox"] {
    cursor: not-allowed;
}

.bl-checklist-index {
    font-weight: 700;
    margin-right: 6px;
}

.bl-checklist-timer {
    display: block;
    font-size: 12px;
    opacity: .7;
    margin-top: 4px;
}

.bl-checklist-locked-hint {
    display: block;
    font-size: 12px;
    opacity: .6;
    margin-top: 4px;
}

.bl-checklist-item.readonly {
    cursor: default;
}

/* — mobile drawer — */
/* MudBlazor's own CSS has `.mud-drawer:not(.mud-drawer-fixed) { position: absolute }`,
   overriding its base `.mud-drawer { position: fixed }` — that class is meant to be
   added when the drawer lives inside a <MudLayout>/<MudDrawerContainer>, which we
   don't use on these plain pages. Without it, the drawer positions absolute relative
   to the normal document flow instead of the viewport, so it scrolls WITH the page —
   a closed drawer that's off-screen at scrollY:0 can end up visibly overlapping
   content once the user scrolls down. Force it back to fixed directly. */
.bl-drawer.mud-drawer {
    position: fixed !important;
}

.bl-drawer .mud-drawer-content {
    background: var(--color-bg);
}

.bl-drawer .mud-nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: var(--radius-md);
}

/* — responsive — */
@media (max-width: 960px) {
    .bl-hero-inner {
        grid-template-columns: 1fr;
    }

    .bl-hero-copy h1 {
        max-width: none;
    }

    .bl-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bl-grid-3 {
        grid-template-columns: 1fr;
    }

    .bl-grid-3-fluid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* minmax(0, 1fr), not bare 1fr — a bare 1fr track's automatic minimum size is
       its content's min-content width (e.g. the unwrapped Level tabs strip), so it
       floors wider than the viewport and drags the whole grid into horizontal
       overflow. minmax(0, ...) removes that floor. Same root cause as the
       .admin-shell main min-width:0 fix elsewhere in this repo. */
    .bl-detail-grid, .bl-recipe-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-lock-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .bl-level-seg {
        max-width: 100%;
        overflow-x: auto;
    }

    .bl-level-seg .seg-opt {
        white-space: nowrap;
    }

    .bake-landing .bl-case-study {
        flex-direction: column;
        align-items: flex-start;
    }

    .bl-case-study .img-slot {
        width: 100%;
        height: 160px;
    }

    .bl-dashboard-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 0;
    }

    .bl-dashboard-head {
        display: none;
    }

    .bl-dashboard-overall-card {
        grid-template-columns: 1fr;
    }

    .bl-dashboard-stats {
        flex-wrap: wrap;
        border-left: none;
        border-top: 1px solid var(--color-divider);
    }

    .bl-dashboard-hero-tagline {
        display: none;
    }

    .bl-stage-list {
        grid-template-columns: 1fr;
    }

    .bl-requirements-tip {
        margin-left: 0;
        max-width: none;
        width: 100%;
    }

    .bl-exam-result-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 600px) {
    .bl-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Baker photo takes up the whole first screen on a phone before you even
       reach the actual content below — drop it on mobile only. */
    .bl-hero-img {
        display: none;
    }

    .bl-grid-3-fluid {
        grid-template-columns: 1fr;
    }

    .bl-grid-4 {
        grid-template-columns: 1fr;
    }

    /* competency select drops its 280px cap once it wraps below the search
       box/segmented control, matching the search input's full-width row */
    .bl-competency-select {
        max-width: none;
    }

    /* /recipes: shopee-style compact 2-up grid instead of one oversized card
       per row — auto-fit's minmax(220px, 260px) floor collapses to a single
       column below ~460px, which reads far too large on a phone. Scoped to
       .bl-grid-recipes (not .bl-recipe-* generally) so Home's 3-up Featured
       Recipes cards are untouched. */
    .bl-grid-recipes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .bl-grid-recipes .bl-recipe-img {
        height: 110px;
    }

    .bl-grid-recipes .bl-recipe-badges {
        top: 6px;
        left: 6px;
        right: 6px;
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .bl-grid-recipes .bl-recipe-badges .tag {
        font-size: 9px;
        padding: 2px 7px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bl-grid-recipes .bl-recipe-body {
        padding: 8px 10px 10px;
        gap: 4px;
    }

    .bl-grid-recipes .bl-recipe-title {
        font-size: 12.5px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bl-grid-recipes .bl-recipe-meta {
        gap: 8px;
        font-size: 10px;
    }

    .bl-grid-recipes .bl-recipe-meta-item svg {
        width: 11px;
        height: 11px;
    }

    .bake-landing .bl-stage-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* SETTINGS / PROFILE — page shell, cards, header, edit grid */
/* .bl-block's own padding is tuned for hero-like landing sections (48-96px
   top) — way too much dead air directly under the navbar for a settings
   page that should feel like it starts right where the nav ends. */
.bl-block-tight {
    padding-top: clamp(20px, 2.4vw, 32px) !important;
}

.bl-profile-container {
    max-width: 1280px;
    margin-inline: auto;
    padding-block: 0 64px;
}

/* Compact, pill-shaped action buttons inside profile cards — the base .btn is
   a bold marketing-CTA size (hero/nav/card links) that reads oversized next
   to a settings form, and its square-ish var(--radius-md) corners clash with
   the fully-rounded .profile-edit-btn sitting right above it on the same
   card head. */
.bl-settings-card .btn {
    font-size: 13.5px !important;
    padding: 9px 20px !important;
    border-radius: var(--radius-full) !important;
}

.bl-profile-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 6px;
}

.bl-profile-title {
    margin-bottom: 6px;
}

.bl-profile-sub {
    font-size: 14px;
    opacity: 0.65;
    margin-bottom: 20px;
}

/* — profile hero card (avatar + name + quote), same photo-band + cursive-
   tagline-overlay convention as Dashboard.razor's .bl-dashboard-hero, just
   warm/cream-toned instead of navy or white to fit this page's card context
   rather than a full-bleed section. */
.bl-profile-hero {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 28px 32px !important;
    background-image: linear-gradient(90deg, rgba(251, 242, 230, 0.94) 0%, rgba(251, 242, 230, 0.82) 50%, rgba(251, 242, 230, 0.08) 100%), url('/images/hero-banner.png');
    background-size: cover;
    background-position: center 30%;
    border: none;
}

.bl-profile-hero-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.bl-profile-hero-identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bl-profile-hero-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.bl-profile-hero-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #FCEFD9;
    border: 4px solid #FCEFD9;
    box-shadow: 0 0 0 2px var(--color-gold), var(--shadow-sm);
    color: var(--color-gold);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    overflow: hidden;
}

.bl-profile-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-profile-hero-camera-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
}

.bl-profile-hero-camera-btn svg {
    width: 15px;
    height: 15px;
}

.bl-profile-hero-name {
    font-size: 21px;
    font-weight: 800;
}

.bl-profile-hero-role {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 2px;
}

.bl-profile-hero-batch {
    font-size: 13px;
    opacity: 0.55;
    margin-top: 2px;
}

.bl-profile-hero-quote-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 28px;
    border-left: 1px solid rgba(18, 21, 26, 0.14);
    max-width: 320px;
}

.bl-profile-hero-quote {
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.bl-profile-hero-quote-underline {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--color-gold);
    border-radius: 2px;
}

.bl-profile-hero-tagline {
    position: absolute;
    top: clamp(16px, 3vw, 28px);
    right: clamp(16px, 3vw, 32px);
    font-family: 'Caveat', cursive;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-accent-800);
    text-align: right;
}

.bl-profile-hero-tagline-heart {
    color: var(--color-gold);
}

@media (max-width: 640px) {
    .bl-profile-hero-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .bl-profile-hero-quote-col {
        padding-left: 0;
        border-left: none;
        max-width: none;
    }

    .bl-profile-hero-tagline {
        display: none;
    }
}

.bl-settings-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 20px 22px;
    margin-bottom: 16px;
}

/* Security + Signature sit side by side as two equal-width cards, not
   stacked — the two cards inside lose their own bottom margin since the
   grid's own gap replaces it. */
.bl-settings-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.bl-settings-two-col .bl-settings-card {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .bl-settings-two-col {
        grid-template-columns: 1fr;
    }
}

.bl-settings-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.bl-settings-card-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bl-settings-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-accent-100);
    color: var(--color-accent);
}

.bl-settings-card-icon svg {
    width: 18px;
    height: 18px;
}

.bl-settings-card-sub {
    font-size: 12.5px;
    opacity: 0.6;
    margin: 2px 0 0;
}

.bl-settings-card-desc {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 16px;
}

/* Boxed, decorative-only masked password shown in the Security card's
   non-editing view — there is no real plaintext password on the client to
   unmask, so the eye-slash icon is purely visual, matching the reference
   design rather than a functional toggle. */
.profile-password-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--wheat);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink-soft);
}

.profile-password-display svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.profile-password-dots {
    flex: 1;
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--ink);
}

.bl-settings-form {
    margin-top: 16px;
}

.bl-settings-submit {
    margin-top: 8px;
}

/* Reusable pill "Edit" button on every profile card head, plus the
   header card's own photo edit toggle. */
.profile-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-edit-btn:hover {
    background: var(--wheat);
    border-color: var(--ink-faint);
}

.profile-edit-btn svg {
    width: 13px;
    height: 13px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
}

.profile-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-header-info {
    flex: 1;
    min-width: 0;
}

.profile-header-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}

.profile-header-role {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 600;
}

.profile-header-sub {
    font-size: 12.5px;
    color: var(--ink-faint);
}

.profile-header-edit {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* Personal Information — read-only label/value grid shown when not editing */
.profile-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

.profile-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-info-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* Styled like a disabled input rather than plain text — reads as "this is
   the field's current value" even in the read-only view, consistent with
   the boxed look every editable field on this page already has once opened. */
.profile-info-value {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    overflow-wrap: break-word;
    padding: 10px 14px;
    background: var(--wheat);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.bl-photo-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.bl-photo-preview {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-full);
    background: var(--wheat);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--ink-soft);
}

.bl-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-photo-upload-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bl-photo-upload-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bl-photo-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.bl-photo-upload-hint {
    font-size: 11px;
    color: var(--ink-faint);
    display: block;
    margin-top: 8px;
}

/* width:100% (not inline-block shrink-to-fit) so the box deterministically
   fills its card's full width — shrink-to-fit sizing against a percentage-
   width canvas child is one of the genuinely ambiguous corners of CSS, and
   resolved to two different widths between the learner and admin cards
   despite otherwise-identical rules. */
.bl-signature-pad-wrap {
    width: 100%;
    margin-top: 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

.bl-signature-pad {
    display: block;
    width: 100%;
    height: 200px;
    touch-action: none;
    cursor: crosshair;
    border-radius: var(--radius-md);
}

.bl-signature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* Same dashed border/box as .bl-signature-pad-wrap (the live drawing state)
   so saving a signature doesn't change the shape of the box it sits in. */
.bl-signature-preview {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

.bl-signature-preview img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
}

/* Sits where Level 1's content normally goes — an explicit "Start Procedure"
   opt-in instead of auto-launching the carousel the instant the recipe page
   loads, so the learner sees the recipe overview (hero/ingredients/equipment)
   before being asked to commit to the slideshow. */
/* PROCEDURE STEP-BY-STEP UI (2026-09-05 reference reskin) — rendered inside
   RecipeLearnerView's Steps tab (as a normal segment alongside Level 1-3,
   not a full-page takeover): a header (icon+title+subtitle, step badge +
   prev/next), then a 2-column body (image w/ overlay nav | step content),
   then dots + Previous/Next Step actions. */
.bl-procedure-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 24px);
}

.bl-procedure-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.bl-procedure-heading {
    font-size: clamp(18px, 1.6vw, 22px);
    margin-bottom: 2px;
}

.bl-procedure-header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.bl-procedure-step-badge {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: var(--color-accent-100);
    color: var(--color-accent-800);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bl-procedure-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-divider);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.bl-procedure-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bl-procedure-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
}

.bl-procedure-image-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-neutral-100);
    border: 1px solid var(--color-divider);
}

.bl-procedure-image-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fills over the slide's minimum read time — a visual cue for why Next is
   disabled, not just a bare countdown number on the button. */
.bl-procedure-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-accent);
    transition: width 1s linear;
    z-index: 1;
}

.bl-procedure-image-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
    font-size: 18px;
    cursor: pointer;
}

.bl-procedure-image-arrow.left {
    left: 12px;
}

.bl-procedure-image-arrow.right {
    right: 12px;
}

.bl-procedure-image-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bl-procedure-image-counter, .bl-procedure-image-zoom {
    position: absolute;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 700;
}

.bl-procedure-image-counter {
    left: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.bl-procedure-image-zoom {
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    pointer-events: none;
}

.bl-procedure-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bl-procedure-step-pill {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-accent-100);
    color: var(--color-accent-800);
    font-size: 11.5px;
    font-weight: 700;
}

.bl-procedure-title {
    margin: 0;
    font-size: clamp(18px, 1.6vw, 22px);
}

.bl-procedure-desc {
    font-size: 14.5px;
    line-height: 1.6;
    opacity: 0.85;
}

.bl-procedure-desc p {
    margin: 0 0 8px;
}

.bl-procedure-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--color-accent-100);
}

.bl-procedure-tip-icon {
    flex-shrink: 0;
}

.bl-procedure-tip strong {
    display: block;
    font-size: 13px;
    color: var(--color-accent-800);
}

.bl-procedure-tip p {
    margin: 2px 0 0;
    font-size: 13px;
    opacity: 0.85;
}

.bl-procedure-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bl-procedure-section-title {
    font-weight: 700;
    font-size: 13.5px;
}

.bl-procedure-section-hint {
    font-weight: 400;
    opacity: 0.6;
    font-size: 12px;
}

/* Interactive required checklist — the learner must tick every item before
   Next/Finish enables on this step (see RecipeProcedureCarousel's CanAdvance).
   Boxed list, not plain chips, so it reads as something to act on. */
.bl-procedure-checklist {
    list-style: none;
    margin: 0;
    padding: 4px;
    border-radius: var(--radius-md);
    background: var(--color-hero-bg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bl-procedure-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.bl-procedure-checklist-item:hover {
    background: rgba(255, 255, 255, 0.5);
}

.bl-procedure-checklist-item input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--color-gold);
}

.bl-procedure-checklist-item.checked {
    opacity: 0.6;
    text-decoration: line-through;
}

.bl-procedure-checklist-qty {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 4px;
}

.bl-procedure-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
}

/* IMAGE LIGHTBOX — click-to-zoom on the recipe hero photo and procedure
   slide images (ZoomableImage.razor). A fixed full-viewport overlay, so it's
   deliberately not nested inside anything that could clip or scroll it. */
.image-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    z-index: 200;
    cursor: zoom-out;
    animation: bl-lightbox-fade-in 0.15s ease;
}

@keyframes bl-lightbox-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.image-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    cursor: default;
}

.image-lightbox-close {
    position: fixed;
    top: clamp(12px, 3vw, 28px);
    right: clamp(12px, 3vw, 28px);
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 201;
}

.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.image-lightbox-close svg {
    width: 18px;
    height: 18px;
}

.bl-procedure-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--line);
    cursor: pointer;
    transition: background 0.15s ease, width 0.15s ease;
}

.bl-procedure-dot:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bl-procedure-dot.active {
    width: 24px;
    background: var(--color-accent);
}

.bl-procedure-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 700px) {
    .bl-procedure-body {
        grid-template-columns: 1fr;
    }

    .bl-procedure-header-nav {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {
    .bl-procedure-actions .btn {
        flex: 1;
        padding-inline: clamp(10px, 4vw, 22px) !important;
        font-size: 13.5px !important;
    }

    .bl-photo-upload {
        flex-direction: column;
        align-items: flex-start;
    }

    .bl-signature-pad,
    .bl-signature-preview img {
        height: 140px;
    }

    .profile-header {
        flex-wrap: wrap;
    }

    .profile-header-info {
        min-width: 140px;
    }

    .profile-edit-btn span {
        display: none;
    }

    .profile-edit-btn {
        padding: 8px;
    }

    .profile-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ===== HOME PAGE — TESDA reference port (2026-09-05) =====
   Home.razor's own sections below (competency cards, Learning Path,
   Modules/Resources cards, Business Corner banner, Success Stories, final
   CTA, footer) — everything else in this file is unchanged and still shared
   by the rest of the public site. */

.bl-block-no-top-pad {
    padding-top: 0;
}

/* small-caps mono-style eyebrow label (Learning Path / Business Corner) —
   reuses Inter since JetBrains Mono isn't loaded anywhere in this app. */
.bl-mono-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 10px;
}

/* — centered section title ("Master Core Baking Competencies") — */
.bl-section-title-wrap {
    text-align: center;
    margin-bottom: clamp(28px, 3vw, 44px);
}

.bl-section-title {
    font-size: clamp(24px, 2.2vw, 34px);
    margin-bottom: 12px;
}

.bl-section-underline {
    display: inline-block;
    width: 56px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-gold);
}

/* — competency cards: horizontal icon + text layout — */
.bake-landing .bl-competency-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
}

.bl-competency-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-accent-100);
    font-size: 26px;
    overflow: hidden;
}

.bl-competency-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-competency-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bl-competency-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    margin-top: 2px;
}

/* — Learning Path panel — */
.bl-learning-path {
    margin-top: clamp(56px, 6vw, 88px);
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
    gap: clamp(24px, 3vw, 56px);
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--radius-lg);
    background: var(--color-lavender);
}

.bl-lp-heading {
    font-size: clamp(20px, 1.8vw, 28px);
    margin-bottom: 10px;
}

.bl-lp-desc {
    opacity: 0.75;
    font-size: 14.5px;
    max-width: 40ch;
}

.bl-lp-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.bl-lp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    width: 92px;
    flex-shrink: 0;
}

.bl-lp-step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    font-size: 22px;
}

.bl-lp-step-circle.is-final {
    background: var(--color-gold);
}

.bl-lp-step-num {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.55;
    margin-top: 4px;
}

.bl-lp-step-title {
    font-size: 13px;
    font-weight: 700;
}

.bl-lp-step-sub {
    font-size: 11px;
    opacity: 0.65;
    line-height: 1.3;
}

.bl-lp-connector {
    flex: 1;
    min-width: 16px;
    height: 0;
    align-self: flex-start;
    margin-top: 26px;
    border-top: 2px dashed color-mix(in srgb, var(--color-text) 25%, transparent);
}

/* — module cards (Modules preview on Home): icon hero instead of a stock
   photo, since ModuleResponseModel carries no per-module image. — */
.bake-landing .bl-module-card {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.bl-module-hero {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-100);
}

.bl-module-hero-icon {
    color: var(--color-accent-800);
}

.bl-module-hero-icon svg {
    width: 44px;
    height: 44px;
    display: block;
}

.bl-module-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bl-module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    opacity: 0.6;
}

.bl-module-desc {
    font-size: 13px;
    opacity: 0.7;
    margin: 0;
    line-height: 1.4;
}

/* Cosmetic ordinal badge on the module hero image ("Module 1/2/3") */
.bl-module-hero {
    position: relative;
}

.bl-module-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 700;
}

/* Shared color tones — the module ordinal badge and the resource file-type
   icon square both cycle through these. */
.bl-tone-amber { background: #FDECC8; color: #92620C; }
.bl-tone-pink { background: #FBD7DE; color: #9F1239; }
.bl-tone-mint { background: #C9F2E0; color: #0F766E; }
.bl-tone-red { background: #FCE1E1; color: #B91C1C; }
.bl-tone-purple { background: #E6DFFB; color: #6D28D9; }
.bl-tone-blue { background: #DCE9FB; color: #1D4ED8; }

/* — Modules/Resources outer panels + shared section head — */
.bl-panel {
    padding: clamp(20px, 2.2vw, 32px);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
}

.bl-resources-panel {
    background: var(--color-accent-100);
}

.bl-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
    margin-bottom: clamp(20px, 2.2vw, 28px);
}

.bl-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    font-size: 24px;
}

.bl-panel-icon-amber {
    background: var(--color-gold);
}

.bl-panel-icon-blue {
    background: var(--color-accent);
}

.bl-panel-head-text {
    flex: 1 1 200px;
}

.bl-panel-title {
    font-size: clamp(20px, 1.8vw, 26px);
    margin-bottom: 2px;
}

.bl-panel-sub {
    font-size: 13.5px;
    opacity: 0.65;
    margin: 0;
}

.bake-landing a.bl-view-all-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-accent);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}

/* — Resources: horizontal row card (icon | title+meta | chevron) — */
.bake-landing .bl-resource-row {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    color: var(--color-text);
}

.bl-resource-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
}

.bl-resource-row-icon svg {
    width: 22px;
    height: 22px;
}

.bl-resource-row-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.bl-resource-row-title {
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
}

.bl-resource-row-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    opacity: 0.6;
}

.bl-resource-row-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    color: var(--color-text);
    font-weight: 700;
}

/* — Business Corner banner — */
.bl-corner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: clamp(28px, 3vw, 56px);
    padding: clamp(32px, 3.5vw, 56px);
    border-radius: var(--radius-lg);
    background: var(--color-navy-deep);
    color: #fff;
}

.bl-corner-eyebrow {
    color: var(--color-gold);
}

.bl-corner-title {
    color: #fff;
    font-size: clamp(22px, 2vw, 32px);
}

.bl-corner-desc {
    opacity: 0.8;
    max-width: 44ch;
}

.bake-landing .bl-corner-btn {
    background-color: var(--color-gold) !important;
    color: #fff !important;
}

.bake-landing .bl-corner-btn:hover {
    background-color: #B8650A !important;
}

.bl-corner-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.bl-corner-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.bl-corner-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    font-size: 19px;
}

.bl-corner-feature-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #fff;
}

.bl-corner-feature-sub {
    font-size: 11.5px;
    opacity: 0.7;
    line-height: 1.35;
}

/* — final CTA band — */
.bl-final-cta {
    background: var(--color-hero-bg);
    border-top: 2px solid var(--color-divider);
}

.bl-final-cta-inner {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: clamp(32px, 4vw, 56px);
    padding-bottom: clamp(32px, 4vw, 56px);
}

.bl-final-cta-copy {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bl-final-cta-icon {
    font-size: 34px;
    flex-shrink: 0;
}

.bl-final-cta-title {
    font-size: clamp(19px, 1.6vw, 24px);
    margin-bottom: 4px;
}

.bl-final-cta-sub {
    opacity: 0.7;
    font-size: 14px;
    margin: 0;
}

.bl-final-cta-btn {
    flex-shrink: 0;
}

/* — footer — */
.bl-footer {
    background: var(--color-navy-deep);
    color: rgba(255, 255, 255, 0.85);
    margin-top: auto;
}

.bl-footer-inner {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    padding-top: clamp(40px, 4.5vw, 64px);
    padding-bottom: clamp(32px, 3.5vw, 48px);
}

.bl-footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bl-footer-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.bl-footer-tagline {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
}

.bl-footer-desc {
    font-size: 13px;
    opacity: 0.65;
    max-width: 34ch;
    margin: 10px 0 0;
}

.bl-footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bl-footer-col-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #fff;
    margin-bottom: 4px;
}

/* Higher specificity than the generic ".bake-landing a" rule (navy link
   color), which otherwise wins and renders these links nearly invisible on
   the footer's dark background. */
.bl-footer-link,
.bake-landing a.bl-footer-link {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
}

.bake-landing a.bl-footer-link:hover {
    color: #fff;
}

.bl-footer-link-static {
    cursor: default;
}

.bl-footer-social {
    display: flex;
    gap: 10px;
}

.bl-footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.bl-footer-bottom {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 18px;
    padding-bottom: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    opacity: 0.6;
}

/* — /modules and /resources library pages (2026-09-05 reference port) — */
.bl-repo-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: clamp(20px, 2.2vw, 28px);
}

/* Purely decorative flourish text from the reference mockup — a generic
   cursive stack since no script webfont is loaded anywhere in this app. */
.bl-repo-tagline {
    margin-left: auto;
    align-self: center;
    font-family: 'Brush Script MT', cursive;
    font-size: 20px;
    color: var(--color-accent);
    opacity: 0.7;
    white-space: nowrap;
}

.bl-repo-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.bl-repo-search-wrap {
    position: relative;
    flex: 1 1 240px;
}

.bl-repo-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: 0.5;
    pointer-events: none;
}

.bl-repo-search-input.bl-search-input {
    max-width: none;
    width: 100%;
    padding-left: 36px;
}

.bl-repo-select {
    flex: 0 1 180px;
    padding: 10px 14px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

/* — file table (shared shape for Modules/Resources) — */
.bl-file-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
}

.bl-file-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
}

.bl-file-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
    border-bottom: 1px solid var(--color-divider);
}

.bl-file-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-divider);
    vertical-align: middle;
}

.bl-file-table tr:last-child td {
    border-bottom: none;
}

.bl-file-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bl-file-name-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
}

.bl-file-name-icon svg {
    width: 17px;
    height: 17px;
}

.bl-file-name-title {
    font-weight: 700;
}

.bl-file-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--color-accent-100);
    color: var(--color-accent-800);
}

.bl-file-action-btn:hover {
    background: var(--color-accent);
    color: #fff;
}

.bake-landing a.bl-file-action-locked {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .bl-repo-tagline {
        display: none;
    }

    .bl-repo-select {
        flex: 1 1 140px;
    }
}

/* — /recipes page (2026-09-05 reference port) — */
.bl-recipe-hero {
    background: var(--color-hero-bg);
    border-bottom: 2px solid var(--color-divider);
}

.bl-recipe-hero-inner {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 24px;
    padding-block: clamp(24px, 3vw, 36px);
}

.bl-recipe-hero-header {
    margin-bottom: 0;
}

.bl-recipe-hero-photo {
    position: relative;
    height: clamp(100px, 12vw, 150px);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bl-recipe-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-recipe-hero-tagline {
    position: absolute;
    top: 14px;
    left: 18px;
    margin-left: 0;
    line-height: 1.15;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}

.bl-recipe-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bl-recipe-toolbar .bl-repo-search-wrap {
    flex: 1 1 220px;
}

/* Separate rounded pill buttons instead of the joined-segment look .seg uses
   elsewhere (level tabs, notification tabs) — scoped so it doesn't change
   those other usages. */
.bl-recipe-toolbar .seg {
    border: none;
    background: none;
    gap: 8px;
}

.bl-recipe-toolbar .seg-opt {
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.bl-recipe-toolbar .seg-opt:first-child {
    border-left: 1px solid var(--color-divider);
}

.bl-recipe-toolbar .seg-opt.active {
    border-color: var(--color-accent);
}

.bl-view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.bl-view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 15px;
    border: none;
    border-left: 1px solid var(--color-divider);
}

.bl-view-toggle-btn:first-child {
    border-left: none;
}

.bl-view-toggle-btn.active {
    background: var(--color-accent);
    color: #fff;
}

/* Difficulty color-coding, shared by the grid and list views */
.bl-diff-beginner { color: var(--color-success); }
.bl-diff-intermediate { color: var(--color-gold); }
.bl-diff-expert { color: var(--red); }

.bl-file-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.bl-file-thumb-empty {
    background: var(--color-neutral-100);
}

@media (max-width: 700px) {
    .bl-recipe-hero-inner {
        grid-template-columns: 1fr;
    }

    .bl-recipe-hero-photo {
        display: none;
    }
}

/* — /business page (2026-09-06 illustrated-card reference port) — */
.bl-biz2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.bl-biz2-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 16px;
    padding: clamp(20px, 2vw, 28px);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bl-biz2-pricing { background: #FBEEDC; }
.bl-biz2-marketing { background: #FCEAEF; }
.bl-biz2-plan { background: #E4F6EC; }
.bl-biz2-case-study { background: #EFE9FB; }

.bl-biz2-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.bl-biz2-badge {
    display: inline-flex;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
}

.bl-biz2-pricing .bl-biz2-badge { background: #F5DBAF; color: #B4650A; }
.bl-biz2-marketing .bl-biz2-badge { background: #F8CBD8; color: #C22A57; }
.bl-biz2-plan .bl-biz2-badge { background: #BFEBD2; color: #17824F; }
.bl-biz2-case-study .bl-biz2-badge { background: #D9CDF6; color: #6B32D6; }

.bl-biz2-title {
    font-size: clamp(19px, 1.6vw, 23px);
    margin: 0;
}

.bl-biz2-desc {
    font-size: 14px;
    opacity: 0.7;
    margin: 0;
}

.bl-biz2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 8px;
}

.bl-biz2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 8px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #fff 70%, transparent);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bl-biz2-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: #fff;
}

.bl-biz2-chip-icon svg {
    width: 13px;
    height: 13px;
}

.bl-biz2-pricing .bl-biz2-chip-icon { color: #B4650A; }
.bl-biz2-marketing .bl-biz2-chip-icon { color: #C22A57; }
.bl-biz2-plan .bl-biz2-chip-icon { color: #17824F; }
.bl-biz2-case-study .bl-biz2-chip-icon { color: #6B32D6; }

/* Higher specificity than the generic ".bake-landing a { color: var(--color-accent) }"
   rule (same navy as this button's own background, which made the label
   invisible) — see the identical fix already applied to .bl-footer-link. */
.bake-landing a.bl-biz2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.bake-landing a.bl-biz2-btn:hover {
    background: color-mix(in srgb, var(--color-accent) 85%, black);
    color: #fff;
}

.bl-biz2-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(140px, 14vw, 180px);
}

.bl-biz2-art-img {
    position: relative;
    z-index: 1;
    width: clamp(120px, 11vw, 156px);
    height: clamp(120px, 11vw, 156px);
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.12));
}

.bl-biz2-spark {
    position: absolute;
    top: 4px;
    left: 8px;
    z-index: 2;
    font-size: 22px;
    opacity: 0.8;
}

.bl-biz2-pricing .bl-biz2-spark { color: #D97706; }
.bl-biz2-marketing .bl-biz2-spark { color: #E11D48; }
.bl-biz2-plan .bl-biz2-spark { color: #16A34A; }
.bl-biz2-case-study .bl-biz2-spark { color: #7C3AED; }

.bl-biz2-chip-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}

.bl-biz2-chip-badge svg {
    width: 14px;
    height: 14px;
}

.bl-biz2-chip-badge-ig { top: 10%; right: 8%; background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.bl-biz2-chip-badge-fb { top: 44%; right: 2%; background: #1877F2; }
.bl-biz2-chip-badge-tt { bottom: 10%; right: 10%; background: #010101; }

@media (max-width: 900px) {
    .bl-biz2-card {
        grid-template-columns: 1fr;
    }

    .bl-biz2-art {
        order: -1;
        height: 130px;
    }
}

@media (max-width: 600px) {
    .bl-biz2-grid {
        grid-template-columns: 1fr;
    }
}

/* — responsive: Home page sections — */
@media (max-width: 900px) {
    .bl-learning-path {
        grid-template-columns: 1fr;
    }

    .bl-lp-steps {
        justify-content: flex-start;
    }

    .bl-corner {
        grid-template-columns: 1fr;
    }

    .bl-corner-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .bl-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .bl-resource-row {
        align-items: flex-start;
    }
    .bake-landing .bl-competency-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .bl-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-final-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .bl-final-cta-btn {
        width: 100%;
    }

    .bl-footer-inner {
        grid-template-columns: 1fr;
    }

    .bl-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}