@import '_content/Ampleo.Shared/Ampleo.Shared.0qkr06jwlh.bundle.scp.css';

/* /Components/Layout/LandingContent.razor.rz.scp.css */
/* Front page styling. Colours and measures come from the --pub-* tokens in
   wwwroot/css/public-theme.css - they have to live in a non-scoped file,
   because CSS isolation would rewrite :root here to :root[b-xxxxx] and match
   nothing. Declaring them there and consuming them here is what keeps this
   page, PublicNav and PublicLayout on one palette.

   Layout follows the 2026 marketing direction: paper ground, navy ink, brown
   as the single accent, and exactly one dark band (.lp-navy).

   NOTE: a .razor.css file is plain CSS, not Razor, so @media is written once
   and @@media is invalid and silently dropped. */

.lp-root[b-m2kn39m3zs] {
    font-family: var(--pub-font);
    font-weight: 400;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--pub-navy);
    background: var(--pub-white);
    -webkit-font-smoothing: antialiased;
}
.lp-root *[b-m2kn39m3zs], .lp-root *[b-m2kn39m3zs]::before, .lp-root *[b-m2kn39m3zs]::after { box-sizing: border-box; margin: 0; padding: 0; }
/* font-family and color are restated here, not inherited: wwwroot/app.css
   carries a bare `h1, h2, h3 { font-family: 'Aptos'; color: var(--ampleo-primary) }`
   for the in-app UI, and a rule on the element beats anything this component
   inherits down from .lp-root. Drop either line and the headings silently fall
   back to the app's font and blue. */
.lp-root h1[b-m2kn39m3zs], .lp-root h2[b-m2kn39m3zs], .lp-root h3[b-m2kn39m3zs] {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-weight: var(--pub-h-weight);
    letter-spacing: var(--pub-h-track);
    line-height: 1.08;
    text-wrap: pretty;
}
.lp-root h1[b-m2kn39m3zs] { font-size: clamp(2.35rem, 4.6vw, 3.55rem); }
.lp-root h2[b-m2kn39m3zs] { font-size: clamp(1.8rem, 3.2vw, 2.35rem); }
.lp-root h3[b-m2kn39m3zs] { font-size: clamp(1.15rem, 1.8vw, 1.32rem); letter-spacing: -0.02em; }
.lp-root p[b-m2kn39m3zs]  { text-wrap: pretty; }
.lp-root a[b-m2kn39m3zs]  { text-decoration: none; }
.lp-root ul[b-m2kn39m3zs] { list-style: none; }
.lp-root img[b-m2kn39m3zs] { display: block; max-width: 100%; }

.lp-container[b-m2kn39m3zs] { max-width: var(--pub-measure); margin: 0 auto; padding: 0 var(--pub-gutter); }
.lp-section[b-m2kn39m3zs] { padding: 92px 0; }
.lp-section-paper[b-m2kn39m3zs] {
    background: var(--pub-paper);
    border-top: 1px solid var(--pub-line-soft);
    border-bottom: 1px solid var(--pub-line-soft);
}

/* ===== shared bits ===== */
.lp-overline[b-m2kn39m3zs] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pub-accent-soft);
}
.lp-overline-brown[b-m2kn39m3zs] { color: var(--pub-accent); }

.lp-hd[b-m2kn39m3zs] { max-width: 640px; margin-bottom: 40px; }
.lp-hd h2[b-m2kn39m3zs] { margin-bottom: 12px; }
.lp-hd p[b-m2kn39m3zs] { font-size: 1.12rem; color: var(--pub-muted); line-height: 1.55; }
.lp-hd-cta[b-m2kn39m3zs] { margin-top: 32px; }

.lp-textlink[b-m2kn39m3zs] {
    display: inline-block;
    font-weight: 600;
    color: var(--pub-accent);
    border-bottom: 1.5px solid rgba(139, 115, 85, 0.4);
    padding-bottom: 2px;
}
.lp-textlink:hover[b-m2kn39m3zs] { color: var(--pub-accent-dark); border-bottom-color: var(--pub-accent-dark); }

/* ===== buttons ===== */
.lp-btn[b-m2kn39m3zs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 28px;
    border-radius: var(--pub-radius-sm);
    font-size: 1.02rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.lp-btn-primary[b-m2kn39m3zs] { background: var(--pub-accent); color: #fff; box-shadow: 0 6px 18px rgba(31, 59, 87, 0.14); }
.lp-btn-primary:hover[b-m2kn39m3zs] { background: var(--pub-accent-dark); color: #fff; }
.lp-btn-outline[b-m2kn39m3zs] { background: var(--pub-white); color: var(--pub-navy); border-color: var(--pub-navy); }
.lp-btn-outline:hover[b-m2kn39m3zs] { background: var(--pub-navy); color: #fff; }
.lp-btn-navy[b-m2kn39m3zs] { background: var(--pub-navy); color: #fff; }
.lp-btn-navy:hover[b-m2kn39m3zs] { background: var(--pub-navy-deep); color: #fff; }

.lp-actions[b-m2kn39m3zs] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-actions-center[b-m2kn39m3zs] { justify-content: center; }

/* ===== hero ===== */
.lp-hero[b-m2kn39m3zs] {
    background: var(--pub-paper);
    border-bottom: 1px solid var(--pub-line-soft);
    padding: 72px 0 80px;
}
.lp-hero-grid[b-m2kn39m3zs] {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: start;
}

.lp-badge[b-m2kn39m3zs] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--pub-navy);
}
.lp-badge-dot[b-m2kn39m3zs] { width: 7px; height: 7px; border-radius: 99px; background: var(--pub-accent); }

.lp-hero-copy h1[b-m2kn39m3zs] { margin-top: 26px; }
.lp-hero-sub[b-m2kn39m3zs] {
    margin-top: 22px;
    max-width: 540px;
    font-size: 1.16rem;
    line-height: 1.55;
    color: var(--pub-muted);
}

.lp-facts[b-m2kn39m3zs] { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; }
.lp-facts li[b-m2kn39m3zs] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 1.02rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--pub-ink);
}
/* The tick used to sit in a filled 20px disc. Four ticks-in-circles in the first
   thing a visitor sees is the same kit look as the circled SVG ticks further
   down the site, so the disc went and the character stayed, hanging in the
   margin the way a printed list would set it. */
.lp-tick[b-m2kn39m3zs] {
    flex-shrink: 0;
    width: 14px;
    margin-top: 1px;
    color: var(--pub-accent);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
}

.lp-hero-copy .lp-actions[b-m2kn39m3zs] { margin-top: 32px; }
.lp-fineprint[b-m2kn39m3zs] { margin-top: 14px; font-size: 0.88rem; color: var(--pub-quiet); }
.lp-hero-links[b-m2kn39m3zs] { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.lp-hero-links a[b-m2kn39m3zs] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pub-accent);
    border-bottom: 1.5px solid rgba(139, 115, 85, 0.4);
    padding-bottom: 2px;
}
.lp-hero-links a:hover[b-m2kn39m3zs] { color: var(--pub-accent-dark); }

/* hero visual - a real screenshot, framed like a window */
.lp-hero-visual[b-m2kn39m3zs] { display: flex; flex-direction: column; gap: 16px; }
.lp-shot[b-m2kn39m3zs] {
    background: linear-gradient(150deg, var(--pub-paper-lift) 0%, var(--pub-paper-warm) 55%, var(--pub-paper-deep) 100%);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    padding: 14px;
    box-shadow: var(--pub-shadow);
}
.lp-shot-bar[b-m2kn39m3zs] { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.lp-shot-dot[b-m2kn39m3zs] { width: 9px; height: 9px; border-radius: 99px; background: var(--pub-accent); }
.lp-shot-title[b-m2kn39m3zs] { font-size: 0.8rem; font-weight: 700; color: var(--pub-navy); }
/* The source captures are ~1800px wide. Fitted whole into a 480px column they
   shrink to about a quarter size and read as grey mush, so the frame crops
   instead: the image is laid out wider than its window and anchored top-left,
   which keeps the sidebar and the pipeline chart at a size you can actually
   read. Widen the img to zoom further in, not the frame. */
.lp-shot-frame[b-m2kn39m3zs] {
    display: block;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--pub-line-warm);
    background: var(--pub-white);
}
.lp-shot-frame img[b-m2kn39m3zs] { width: 150%; max-width: none; height: auto; }
.lp-shot figcaption[b-m2kn39m3zs] { padding: 12px 6px 2px; font-size: 0.78rem; color: var(--pub-quiet); }

.lp-shot-more[b-m2kn39m3zs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 22px;
    border: 1px solid var(--pub-line);
    border-radius: 14px;
    background: var(--pub-white);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.lp-shot-more:hover[b-m2kn39m3zs] { border-color: var(--pub-accent-soft); box-shadow: var(--pub-shadow); }
.lp-shot-more-hd[b-m2kn39m3zs] { font-size: 1rem; font-weight: 700; color: var(--pub-navy); }
.lp-shot-more-sub[b-m2kn39m3zs] { font-size: 0.9rem; color: var(--pub-muted); line-height: 1.45; }

/* ===== screenshot tiles ===== */
.lp-shot-grid[b-m2kn39m3zs] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-shot-tile[b-m2kn39m3zs] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    overflow: hidden;
    background: var(--pub-white);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.lp-shot-tile:hover[b-m2kn39m3zs] { border-color: var(--pub-accent-soft); box-shadow: var(--pub-shadow); }
.lp-shot-tile img[b-m2kn39m3zs] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top left;
    background: var(--pub-paper);
    border-bottom: 1px solid var(--pub-line);
}
.lp-shot-tile span[b-m2kn39m3zs] {
    padding: 16px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pub-navy);
    line-height: 1.45;
}

/* ===== features ===== */
.lp-hd-left[b-m2kn39m3zs] { margin-left: 0; }
.lp-feat-grid[b-m2kn39m3zs] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-feat[b-m2kn39m3zs] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    padding: 32px 30px 30px;
    background: var(--pub-white);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.lp-feat:hover[b-m2kn39m3zs] { border-color: var(--pub-accent-soft); box-shadow: var(--pub-shadow); }
/* Bare glyph, no frame - see the note on .fp-card-icon in feature-pages.css for
   why the bordered box went. Keep the two consistent. */
.lp-feat-ico[b-m2kn39m3zs] {
    display: flex;
    color: var(--pub-accent);
}
/* Same 26px and round caps as .fp-card-icon, so the front page and the product
   pages read as one hand rather than two. */
.lp-feat-ico svg[b-m2kn39m3zs] {
    width: 26px;
    height: 26px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-feat h3[b-m2kn39m3zs] { margin-top: 22px; }
.lp-feat p[b-m2kn39m3zs] { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--pub-muted); flex: 1; }
.lp-feat-link[b-m2kn39m3zs] { margin-top: 22px; font-size: 0.95rem; font-weight: 600; color: var(--pub-accent); }
.lp-feat:hover .lp-feat-link[b-m2kn39m3zs] { color: var(--pub-accent-dark); }

.lp-more[b-m2kn39m3zs] {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--pub-line);
}
.lp-more-hd[b-m2kn39m3zs] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pub-accent);
    margin-bottom: 16px;
}
.lp-more-list[b-m2kn39m3zs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 28px;
}
.lp-more-list a[b-m2kn39m3zs] {
    display: block;
    padding: 8px 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--pub-navy);
}
.lp-more-list a:hover[b-m2kn39m3zs] { color: var(--pub-accent); }

/* ===== self-check band ===== */
.lp-band[b-m2kn39m3zs] { padding: 0 0 92px; background: var(--pub-paper); }
.lp-band-inner[b-m2kn39m3zs] {
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: var(--pub-white);
    padding: 30px 34px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.lp-band-inner > div[b-m2kn39m3zs] { flex: 1; min-width: 340px; }
.lp-band-inner p[b-m2kn39m3zs] { margin-top: 10px; font-size: 1.02rem; line-height: 1.55; color: var(--pub-muted); }

/* ===== the one dark band ===== */
.lp-navy[b-m2kn39m3zs] { background: var(--pub-navy); color: #fff; padding: 84px 0; }
.lp-navy-grid[b-m2kn39m3zs] { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lp-navy h2[b-m2kn39m3zs] { margin-top: 16px; color: #fff; }
.lp-navy > .lp-container > div > p[b-m2kn39m3zs] {
    margin-top: 20px;
    max-width: 520px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--pub-on-navy);
}
.lp-navy .lp-btn-primary[b-m2kn39m3zs] { margin-top: 28px; }
.lp-navy .lp-btn-primary:hover[b-m2kn39m3zs] { background: var(--pub-accent-lift); }

.lp-erps[b-m2kn39m3zs] { display: flex; flex-direction: column; gap: 12px; }
.lp-erp[b-m2kn39m3zs] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 20px 24px;
}
.lp-erp-name[b-m2kn39m3zs] { font-size: 1.05rem; font-weight: 700; color: #fff; flex: 0 0 180px; }
.lp-erp-note[b-m2kn39m3zs] { font-size: 0.95rem; line-height: 1.5; color: var(--pub-on-navy-soft); }

/* ===== danish / european split ===== */
.lp-split[b-m2kn39m3zs] { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.lp-split-body p[b-m2kn39m3zs] { font-size: 1.14rem; line-height: 1.6; color: var(--pub-navy-soft); }
.lp-split-body p + p[b-m2kn39m3zs] { margin-top: 16px; }
.lp-split-body .lp-textlink[b-m2kn39m3zs] { margin-top: 20px; }

/* ===== answer-first pricing ===== */
.lp-answer[b-m2kn39m3zs] {
    border: 1px solid var(--pub-line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--pub-white);
}
.lp-answer-hd[b-m2kn39m3zs] { background: var(--pub-paper); padding: 34px 40px; border-bottom: 1px solid var(--pub-line); }
.lp-answer-hd h2[b-m2kn39m3zs] {
    margin-top: 12px;
    max-width: 780px;
    font-size: clamp(1.4rem, 2.3vw, 1.8rem);
    letter-spacing: -0.025em;
    line-height: 1.25;
}
.lp-answer-grid[b-m2kn39m3zs] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--pub-line);
}
.lp-answer-cell[b-m2kn39m3zs] { background: var(--pub-white); padding: 30px 32px; }
.lp-answer-label[b-m2kn39m3zs] { font-size: 0.92rem; font-weight: 600; color: var(--pub-label); }
.lp-answer-price[b-m2kn39m3zs] {
    margin-top: 8px;
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--pub-navy);
}
.lp-answer-price span[b-m2kn39m3zs] { font-size: 1rem; font-weight: 600; color: var(--pub-quiet); }
.lp-answer-price-sm[b-m2kn39m3zs] { font-size: 1.35rem; letter-spacing: -0.02em; }
.lp-answer-note[b-m2kn39m3zs] { margin-top: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--pub-muted); }
.lp-answer-cell-links[b-m2kn39m3zs] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    background: var(--pub-paper);
}
.lp-answer-cell-links a[b-m2kn39m3zs] { font-size: 1rem; font-weight: 700; color: var(--pub-accent); }
.lp-answer-cell-links a:hover[b-m2kn39m3zs] { color: var(--pub-accent-dark); }

/* ===== faq ===== */
.lp-faq[b-m2kn39m3zs] { max-width: 900px; border-top: 1px solid var(--pub-line); }
.lp-faq-item[b-m2kn39m3zs] { border-bottom: 1px solid var(--pub-line); padding: 26px 0; }
.lp-faq-item p[b-m2kn39m3zs] { margin-top: 12px; max-width: 780px; font-size: 1.05rem; line-height: 1.65; color: var(--pub-navy-soft); }

/* ===== final cta ===== */
.lp-cta-section[b-m2kn39m3zs] { padding: 0 0 96px; }
.lp-cta[b-m2kn39m3zs] {
    background: var(--pub-paper);
    border: 1px solid var(--pub-line);
    border-radius: 18px;
    padding: 60px 48px;
    text-align: center;
}
.lp-cta h2[b-m2kn39m3zs] { max-width: 640px; margin: 0 auto; }
.lp-cta p[b-m2kn39m3zs] {
    margin: 16px auto 0;
    max-width: 560px;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--pub-muted);
}
.lp-cta .lp-actions[b-m2kn39m3zs] { margin-top: 30px; }

/* ===== footer ===== */
.lp-footer[b-m2kn39m3zs] { background: var(--pub-white); border-top: 1px solid var(--pub-line); padding: 44px 0 36px; }
.lp-footer-inner[b-m2kn39m3zs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.lp-footer-brand[b-m2kn39m3zs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pub-navy);
}
.lp-footer-word > span[b-m2kn39m3zs] { color: var(--pub-accent); }
.lp-footer-org[b-m2kn39m3zs] { font-size: 0.86rem; font-weight: 400; letter-spacing: 0; color: var(--pub-quiet); }
.lp-footer-contact[b-m2kn39m3zs] { margin: 0; font-size: 0.86rem; font-style: normal; line-height: 1.6; color: var(--pub-quiet); }
.lp-footer-contact a[b-m2kn39m3zs] { color: inherit; }
.lp-footer-contact a:hover[b-m2kn39m3zs] { color: var(--pub-accent); }
.lp-footer-links[b-m2kn39m3zs] { display: flex; gap: 14px 26px; flex-wrap: wrap; padding-top: 4px; }
.lp-footer-links a[b-m2kn39m3zs] { font-size: 0.93rem; font-weight: 600; color: var(--pub-muted); }
.lp-footer-links a:hover[b-m2kn39m3zs] { color: var(--pub-accent); }
.lp-footer-note[b-m2kn39m3zs] { margin-top: 28px; font-size: 0.86rem; color: var(--pub-faint); }

/* ===== responsive =====
   980px: the two-column hero and content splits stack.
   768px: three-up grids drop to two.
   600px: everything single column, tighter padding. */
@media (max-width: 980px) {
    .lp-hero-grid[b-m2kn39m3zs],
    .lp-navy-grid[b-m2kn39m3zs],
    .lp-split[b-m2kn39m3zs] { grid-template-columns: 1fr; gap: 44px; }
    .lp-hero-sub[b-m2kn39m3zs], .lp-navy > .lp-container > div > p[b-m2kn39m3zs] { max-width: none; }
    .lp-answer-grid[b-m2kn39m3zs] { grid-template-columns: repeat(2, 1fr); }
    .lp-shot-frame[b-m2kn39m3zs] { height: 260px; }
}

@media (max-width: 768px) {
    .lp-section[b-m2kn39m3zs] { padding: 68px 0; }
    .lp-band[b-m2kn39m3zs] { padding-bottom: 68px; }
    .lp-cta-section[b-m2kn39m3zs] { padding-bottom: 72px; }
    .lp-navy[b-m2kn39m3zs] { padding: 64px 0; }
    .lp-feat-grid[b-m2kn39m3zs], .lp-shot-grid[b-m2kn39m3zs] { grid-template-columns: repeat(2, 1fr); }
    .lp-answer-hd[b-m2kn39m3zs] { padding: 26px 24px; }
    .lp-answer-cell[b-m2kn39m3zs] { padding: 24px; }
    .lp-cta[b-m2kn39m3zs] { padding: 44px 26px; }
}

@media (max-width: 600px) {
    .lp-hero[b-m2kn39m3zs] { padding: 48px 0 56px; }
    .lp-feat-grid[b-m2kn39m3zs], .lp-shot-grid[b-m2kn39m3zs], .lp-answer-grid[b-m2kn39m3zs] { grid-template-columns: 1fr; }
    .lp-band-inner[b-m2kn39m3zs] { padding: 24px; }
    .lp-band-inner > div[b-m2kn39m3zs] { min-width: 0; }
    .lp-erp[b-m2kn39m3zs] { flex-direction: column; align-items: flex-start; gap: 8px; }
    .lp-erp-name[b-m2kn39m3zs] { flex: 0 0 auto; }
    .lp-actions .lp-btn[b-m2kn39m3zs] { width: 100%; justify-content: center; }
    .lp-shot-frame[b-m2kn39m3zs] { height: 200px; }
    .lp-shot-tile img[b-m2kn39m3zs] { height: 170px; }
}

/* Legal row: quieter than the marketing links above it, but still a real link
   colour rather than grey-on-grey - these are the ones a visitor goes looking
   for on purpose. */
.lp-footer-legal[b-m2kn39m3zs] { display: flex; gap: 12px 24px; flex-wrap: wrap; margin-top: 20px; }
.lp-footer-legal a[b-m2kn39m3zs] { font-size: 0.86rem; font-weight: 500; color: var(--pub-quiet); }
.lp-footer-legal a:hover[b-m2kn39m3zs] { color: var(--pub-accent); }
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Page frame and footer for the public marketing pages. The navigation lives
   in Shared/PublicNav.razor so the landing page and these pages cannot drift
   apart again, and this footer mirrors the one at the bottom of
   LandingContent.razor for the same reason.

   NOTE: single @media below - a .razor.css file is plain CSS, not Razor, so
   @@media is invalid and silently dropped. */

.pl-root[b-evgy00mn81] {
    font-family: var(--pub-font);
    background: var(--pub-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.pl-body[b-evgy00mn81] { flex: 1; }

/* footer - light, per the 2026 direction. Navy is reserved for content bands. */
.pl-footer[b-evgy00mn81] {
    background: var(--pub-white);
    border-top: 1px solid var(--pub-line);
    padding: 44px 0 36px;
}
.pl-footer-inner[b-evgy00mn81],
.pl-footer-note[b-evgy00mn81] {
    max-width: var(--pub-measure);
    margin: 0 auto;
    padding: 0 var(--pub-gutter);
}
.pl-footer-inner[b-evgy00mn81] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
}
.pl-footer-brand[b-evgy00mn81] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pub-navy);
}
.pl-footer-word > span[b-evgy00mn81] { color: var(--pub-accent); }
.pl-footer-org[b-evgy00mn81] { font-size: 0.86rem; font-weight: 400; letter-spacing: 0; color: var(--pub-quiet); }
.pl-footer-contact[b-evgy00mn81] { margin: 0; font-size: 0.86rem; font-style: normal; line-height: 1.6; color: var(--pub-quiet); }
.pl-footer-contact a[b-evgy00mn81] { color: inherit; }
.pl-footer-contact a:hover[b-evgy00mn81] { color: var(--pub-accent); }

.pl-footer-links[b-evgy00mn81] { display: flex; gap: 14px 26px; flex-wrap: wrap; padding-top: 4px; }
.pl-footer-links a[b-evgy00mn81] { font-size: 0.93rem; font-weight: 600; color: var(--pub-muted); text-decoration: none; }
.pl-footer-links a:hover[b-evgy00mn81] { color: var(--pub-accent); }

.pl-footer-note[b-evgy00mn81] { margin-top: 28px; font-size: 0.86rem; color: var(--pub-faint); }

@media (max-width: 600px) {
    .pl-footer-inner[b-evgy00mn81] { flex-direction: column; align-items: flex-start; gap: 20px; }
    .pl-footer-links[b-evgy00mn81] { gap: 12px 20px; }
}

/* Matches .lp-footer-legal on the front page. */
.pl-footer-legal[b-evgy00mn81] {
    max-width: var(--pub-measure);
    margin: 20px auto 0;
    padding: 0 var(--pub-gutter);
    display: flex;
    gap: 12px 24px;
    flex-wrap: wrap;
}
.pl-footer-legal a[b-evgy00mn81] { font-size: 0.86rem; font-weight: 500; color: var(--pub-quiet); text-decoration: none; }
.pl-footer-legal a:hover[b-evgy00mn81] { color: var(--pub-accent); }
/* /Components/Pages/About.razor.rz.scp.css */
/* About page. Everything but the company details comes from the shared .fp-* vocabulary in
   wwwroot/css/feature-pages.css. The details are taken from the published privacy policy
   (section 1, "Dataansvarlig"): keep the two in step if the address or CVR ever changes. */

.ab-facts[b-v7z3sn5bjt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    margin: 0;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    overflow: hidden;
}
.ab-facts > div[b-v7z3sn5bjt] {
    padding: 24px 26px;
    border-right: 1px solid var(--pub-line-soft);
}
.ab-facts > div:last-child[b-v7z3sn5bjt] { border-right: none; }
.ab-facts dt[b-v7z3sn5bjt] {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--pub-label);
}
.ab-facts dd[b-v7z3sn5bjt] {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--pub-navy);
}
.ab-facts a[b-v7z3sn5bjt] { color: var(--pub-accent); font-weight: 600; text-decoration: none; }
.ab-facts a:hover[b-v7z3sn5bjt] { text-decoration: underline; }

@media (max-width: 900px) {
    .ab-facts > div[b-v7z3sn5bjt] { border-right: none; border-bottom: 1px solid var(--pub-line-soft); }
    .ab-facts > div:last-child[b-v7z3sn5bjt] { border-bottom: none; }
}
/* /Components/Pages/ApiDocumentation.razor.rz.scp.css */
/* API documentation. The page is a generated reference built from Bootstrap
   primitives (cards, tables, badges, dark code blocks); rather than rewrite that
   markup, the rules below restyle those primitives inside .api-doc onto the
   public palette. Scoped CSS reaches them because the markup is this component's
   own. Only what appears on this page is covered. */

.api-doc[b-myymamjjyl] {
    padding-top: 48px;
    padding-bottom: 72px;
    font-family: var(--pub-font);
    color: var(--pub-navy);
}

/* Headings: restate font and colour, because app.css sets both on the bare elements. */
.api-doc h1[b-myymamjjyl], .api-doc h2[b-myymamjjyl], .api-doc h3[b-myymamjjyl], .api-doc h4[b-myymamjjyl], .api-doc h5[b-myymamjjyl], .api-doc h6[b-myymamjjyl] {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    letter-spacing: -0.01em;
}
.api-doc h4[b-myymamjjyl] { font-size: 1.35rem; font-weight: 800; }
.api-doc h5[b-myymamjjyl] { font-size: 1.1rem; font-weight: 800; }
.api-doc h6[b-myymamjjyl] { font-size: 0.98rem; font-weight: 700; }

.api-doc p[b-myymamjjyl], .api-doc li[b-myymamjjyl] { color: var(--pub-muted); line-height: 1.6; }

.api-doc a[b-myymamjjyl] { color: var(--pub-accent); }
.api-doc a:hover[b-myymamjjyl] { color: var(--pub-accent-dark); }

/* Cards become the same flat, bordered panels the rest of the site uses. */
.api-doc .card[b-myymamjjyl] {
    border: 1px solid var(--pub-line) !important;
    border-radius: var(--pub-radius);
    box-shadow: none !important;
    background: var(--pub-white);
}
.api-doc .card-header[b-myymamjjyl] {
    background: var(--pub-white) !important;
    border-bottom: 1px solid var(--pub-line-soft) !important;
    padding: 20px 24px !important;
    border-radius: var(--pub-radius) var(--pub-radius) 0 0;
}
.api-doc .card-body[b-myymamjjyl] { padding: 22px 24px; }

/* Tables */
.api-doc .table[b-myymamjjyl] { font-size: 0.92rem; color: var(--pub-ink); }
.api-doc .table > :not(caption) > * > *[b-myymamjjyl] { border-color: var(--pub-line-soft); padding: 9px 12px; }
.api-doc .table-light[b-myymamjjyl],
.api-doc .table-light > tr > th[b-myymamjjyl] {
    background: var(--pub-paper) !important;
    color: var(--pub-label);
    font-weight: 700;
}

/* Code blocks: navy-deep instead of Bootstrap's black, and the syntax tints moved onto
   colours that belong to the palette. */
.api-doc .bg-dark[b-myymamjjyl] {
    background: var(--pub-navy-deep) !important;
    border-radius: var(--pub-radius-sm) !important;
    padding: 16px 18px !important;
}
.api-doc .bg-dark .text-info[b-myymamjjyl] { color: var(--pub-on-navy) !important; }
.api-doc .bg-dark .text-warning[b-myymamjjyl] { color: var(--pub-accent-soft) !important; }
.api-doc .bg-light[b-myymamjjyl] {
    background: var(--pub-paper) !important;
    border: 1px solid var(--pub-line-soft);
    border-radius: var(--pub-radius-sm) !important;
}
.api-doc .font-monospace[b-myymamjjyl] { font-size: 0.86rem; line-height: 1.6; }

/* Badges: HTTP methods and roles. Muted, square-ish and in palette colours rather than
   Bootstrap's saturated pills. */
.api-doc .badge[b-myymamjjyl] {
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.api-doc .badge.bg-success[b-myymamjjyl] { background: rgba(61, 138, 94, 0.14) !important; color: var(--pub-ok) !important; }
.api-doc .badge.bg-primary[b-myymamjjyl] { background: rgba(31, 59, 87, 0.1) !important; color: var(--pub-navy) !important; }
.api-doc .badge.bg-info[b-myymamjjyl] { background: rgba(31, 59, 87, 0.08) !important; color: var(--pub-navy-soft) !important; }
.api-doc .badge.bg-warning[b-myymamjjyl] { background: rgba(139, 115, 85, 0.16) !important; color: var(--pub-accent-dark) !important; }
.api-doc .badge.bg-danger[b-myymamjjyl] { background: rgba(180, 60, 60, 0.12) !important; color: var(--pub-warn) !important; }
.api-doc .badge.bg-secondary[b-myymamjjyl] { background: var(--pub-paper-warm) !important; color: var(--pub-muted) !important; }

.api-doc .text-muted[b-myymamjjyl] { color: var(--pub-quiet) !important; }
.api-doc .border-top[b-myymamjjyl] { border-color: var(--pub-line) !important; }

/* Phone widths. 128 of the generated field tables are written without the
   .table-responsive wrapper the hand-written ones have, and the entity headers are
   rows of badges that never wrap, so on a phone the whole page scrolled sideways.
   Letting each card scroll its own content keeps the page itself still. */
.api-doc .card-body[b-myymamjjyl] { overflow-x: auto; }
.api-doc .d-flex[b-myymamjjyl] { flex-wrap: wrap; }
/* Entity and option-set names are long single words (AgreementTemplateComponentGranularity)
   and, as flex children of the card headers, would not shrink below them. */
.api-doc .card-header > *[b-myymamjjyl] { min-width: 0; }
.api-doc h4[b-myymamjjyl], .api-doc h5[b-myymamjjyl], .api-doc h6[b-myymamjjyl] { overflow-wrap: anywhere; }
/* /Components/Pages/BookDemo.razor.rz.scp.css */
/* Book-demo page. Colours and measures come from --pub-* in
   wwwroot/css/public-theme.css.

   The form controls are rendered by InputText/InputSelect/InputTextArea, so the
   markup is authored by those components and never carries this file's scope
   attribute. Every rule that targets an input, select, textarea or a
   .validation-message therefore has to go through ::deep. */

.bd-root[b-rydsvlvkca] {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    background: var(--pub-white);
    -webkit-font-smoothing: antialiased;
}
.bd-root *[b-rydsvlvkca] { box-sizing: border-box; }

.bd-container[b-rydsvlvkca] { max-width: var(--pub-measure); margin: 0 auto; padding: 0 var(--pub-gutter); }

/* font-family and color are restated on every heading, not inherited: app.css
   carries a bare `h1, h2, h3 { font-family: 'Aptos'; color: var(--ampleo-primary) }`
   for the in-app UI, and a rule on the element beats what .bd-root passes down. */
.bd-root h1[b-rydsvlvkca],
.bd-root h2[b-rydsvlvkca],
.bd-root h3[b-rydsvlvkca] {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-weight: var(--pub-h-weight);
    letter-spacing: var(--pub-h-track);
    text-wrap: pretty;
}

.bd-hero[b-rydsvlvkca] {
    background: var(--pub-paper);
    border-bottom: 1px solid var(--pub-line-soft);
    padding: 76px 0 68px;
}
.bd-overline[b-rydsvlvkca] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pub-accent);
    margin-bottom: 16px;
}
.bd-hero h1[b-rydsvlvkca] {
    margin: 0;
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    line-height: 1.08;
    max-width: 18ch;
}
.bd-lead[b-rydsvlvkca] {
    margin: 22px 0 0;
    max-width: 62ch;
    font-size: 1.14rem;
    line-height: 1.55;
    color: var(--pub-muted);
    text-wrap: pretty;
}

.bd-body[b-rydsvlvkca] { padding: 64px 0 88px; }
.bd-grid[b-rydsvlvkca] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* ── Form ───────────────────────────────────────────────────────────── */

.bd-panel[b-rydsvlvkca] {
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
    padding: 36px 38px 34px;
}
.bd-panel h2[b-rydsvlvkca] {
    margin: 0 0 26px;
    font-size: 1.5rem;
    line-height: 1.2;
}

.bd-row[b-rydsvlvkca] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bd-field[b-rydsvlvkca] { display: flex; flex-direction: column; margin-bottom: 18px; min-width: 0; }
.bd-field label[b-rydsvlvkca] {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--pub-label);
    margin-bottom: 7px;
}

.bd-field[b-rydsvlvkca]  input,
.bd-field[b-rydsvlvkca]  select,
.bd-field[b-rydsvlvkca]  textarea {
    width: 100%;
    font-family: var(--pub-font);
    font-size: 1rem;
    color: var(--pub-navy);
    background: var(--pub-paper-lift);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-sm);
    padding: 12px 14px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.bd-field[b-rydsvlvkca]  textarea { resize: vertical; line-height: 1.5; }
.bd-field[b-rydsvlvkca]  input:focus,
.bd-field[b-rydsvlvkca]  select:focus,
.bd-field[b-rydsvlvkca]  textarea:focus {
    outline: none;
    background: var(--pub-white);
    border-color: var(--pub-accent);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.16);
}
.bd-field[b-rydsvlvkca]  input::placeholder,
.bd-field[b-rydsvlvkca]  textarea::placeholder { color: var(--pub-faint); }

/* The element type is repeated so this outranks the `.bd-field input` base rule
   above: without it the two selectors are close enough in specificity that the
   red border is a coin toss. */
.bd-field[b-rydsvlvkca]  input.invalid,
.bd-field[b-rydsvlvkca]  select.invalid,
.bd-field[b-rydsvlvkca]  textarea.invalid { border-color: var(--pub-warn); }
.bd-field[b-rydsvlvkca]  .validation-message {
    margin-top: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--pub-warn);
}

.bd-hint[b-rydsvlvkca] { margin-top: 7px; font-size: 0.86rem; line-height: 1.45; color: var(--pub-quiet); }

/* Off-screen rather than display:none, so a bot that only skips hidden fields
   still fills it in. */
.bd-trap[b-rydsvlvkca] { position: absolute; left: -9999px; }

.bd-altcha[b-rydsvlvkca] { margin: 4px 0 22px; }

.bd-error[b-rydsvlvkca] {
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid var(--pub-warn);
    border-left-width: 3px;
    border-radius: var(--pub-radius-sm);
    background: rgba(180, 60, 60, 0.06);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--pub-warn);
}

.bd-btn[b-rydsvlvkca] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border: 1.5px solid transparent;
    border-radius: var(--pub-radius-sm);
    font-family: var(--pub-font);
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.bd-btn-block[b-rydsvlvkca] { width: 100%; }
.bd-btn-primary[b-rydsvlvkca] { background: var(--pub-accent); color: #fff; box-shadow: 0 6px 18px rgba(31, 59, 87, 0.14); }
.bd-btn-primary:hover[b-rydsvlvkca] { background: var(--pub-accent-dark); color: #fff; }
.bd-btn-primary:disabled[b-rydsvlvkca] { background: var(--pub-accent-soft); box-shadow: none; cursor: default; }
.bd-btn-outline[b-rydsvlvkca] { background: var(--pub-white); color: var(--pub-navy); border-color: var(--pub-navy); }
.bd-btn-outline:hover[b-rydsvlvkca] { background: var(--pub-navy); color: #fff; }

.bd-fineprint[b-rydsvlvkca] {
    margin: 16px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--pub-quiet);
    text-align: center;
}

/* ── Confirmation ───────────────────────────────────────────────────── */

.bd-done[b-rydsvlvkca] { text-align: center; padding: 52px 38px 46px; }
.bd-done-icon[b-rydsvlvkca] { width: 52px; height: 52px; color: var(--pub-ok); margin-bottom: 18px; }
.bd-done h2[b-rydsvlvkca] { margin: 0 0 12px; font-size: 1.6rem; }
.bd-done p[b-rydsvlvkca] { margin: 0 auto; max-width: 44ch; font-size: 1.02rem; line-height: 1.55; color: var(--pub-muted); }
.bd-actions[b-rydsvlvkca] { display: flex; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* ── Side column ────────────────────────────────────────────────────── */

.bd-side[b-rydsvlvkca] { display: flex; flex-direction: column; gap: 22px; }
.bd-side-block[b-rydsvlvkca] {
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    padding: 26px 28px;
}
.bd-side-alt[b-rydsvlvkca] { background: var(--pub-paper-warm); border-color: var(--pub-line-warm); }
.bd-side-block h3[b-rydsvlvkca] { margin: 0 0 14px; font-size: 1.06rem; line-height: 1.3; }
.bd-side-block p[b-rydsvlvkca] { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--pub-muted); }
.bd-side-block a[b-rydsvlvkca] { color: var(--pub-accent); font-weight: 600; text-decoration: none; }
.bd-side-block a:hover[b-rydsvlvkca] { color: var(--pub-accent-dark); text-decoration: underline; }
.bd-side-link[b-rydsvlvkca] { display: inline-block; margin-top: 4px; font-size: 0.95rem; }
.bd-side-sep[b-rydsvlvkca] { margin-top: 18px !important; }
.bd-side-note[b-rydsvlvkca] { margin-top: 12px !important; font-size: 0.88rem !important; color: var(--pub-quiet) !important; }

.bd-steps[b-rydsvlvkca] { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 18px; }
.bd-steps li[b-rydsvlvkca] { font-size: 0.95rem; line-height: 1.55; color: var(--pub-muted); }
.bd-steps li[b-rydsvlvkca]::marker { color: var(--pub-accent); font-weight: 700; }
.bd-step-hd[b-rydsvlvkca] { display: block; font-weight: 700; color: var(--pub-navy); margin-bottom: 3px; }

@media (max-width: 960px) {
    .bd-grid[b-rydsvlvkca] { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 620px) {
    .bd-hero[b-rydsvlvkca] { padding: 52px 0 48px; }
    .bd-body[b-rydsvlvkca] { padding: 40px 0 64px; }
    .bd-panel[b-rydsvlvkca] { padding: 26px 22px 24px; }
    .bd-done[b-rydsvlvkca] { padding: 40px 22px 36px; }
    .bd-row[b-rydsvlvkca] { grid-template-columns: 1fr; gap: 0; }
    .bd-actions .bd-btn[b-rydsvlvkca] { width: 100%; }
}
/* /Components/Pages/CalendarPage.razor.rz.scp.css */
/* Full-height page: the calendar fills what is left below the header instead of stopping at a fixed
   fraction of the viewport. Same shape as ResourceScheduler.razor.css - flex column, viewport height
   minus the navbar, and min-height:0 so the children may shrink and scroll. */
.cal-page[b-yq3djvpkcl] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px); /* navbar height */
    min-height: 0;
}
.cal-swatch[b-yq3djvpkcl] {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    margin-right: .35rem;
    vertical-align: baseline;
}

.cal-people-list[b-yq3djvpkcl] {
    max-height: 200px;
    overflow-y: auto;
}
/* /Components/Pages/EntityList.razor.rz.scp.css */
/* Resizable, fixed-layout list table: columns keep their set width and over-long content is hidden
   (ellipsis) instead of wrapping. Editable cells opt out of truncation so their inline editors and
   dropdowns are never clipped. */

.entity-list-table[b-nbnzdxonf2] {
    /* table-layout/width are set inline on the element; nothing needed here. */
}

/* Read-only data cells: one line, clip the overflow with an ellipsis. */
.entity-list-table td.el-truncate[b-nbnzdxonf2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header labels stay on one line and ellipsis within the column (the column menu is a separate
   absolutely-positioned child, so the header itself must NOT be overflow:hidden or it would clip it). */
.entity-list-table th .el-th-label[b-nbnzdxonf2] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.entity-list-table th.el-th-static[b-nbnzdxonf2] {
    white-space: nowrap;
}

/* Drag handle on a column's right edge. */
.entity-list-table th .el-col-resize[b-nbnzdxonf2] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 3;
    touch-action: none;
}

.entity-list-table th .el-col-resize:hover[b-nbnzdxonf2] {
    background: var(--bs-primary, #0d6efd);
    opacity: 0.35;
}
/* /Components/Pages/GanttChart.razor.rz.scp.css */
/* ===== Gantt wrapper ===== */
.gantt-wrapper[b-qzlbx2f8r0] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    gap: 0;
}

/* ===== Fullscreen ===== */
.gantt-fullscreen[b-qzlbx2f8r0] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh !important;
}

.gantt-fullscreen .gantt-wrapper[b-qzlbx2f8r0] {
    height: 0;
    flex: 1 1 0;
}

.gantt-embed .gantt-wrapper[b-qzlbx2f8r0] {
    height: auto;
    flex: 1;
    min-height: 300px;
    gap: 0;
}

.gantt-container[b-qzlbx2f8r0] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ===== Timeline header ===== */
.gantt-timeline[b-qzlbx2f8r0] {
    display: flex;
    flex-shrink: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.gantt-timeline-clip[b-qzlbx2f8r0] {
    flex: 1;
    overflow: hidden;
}

.gantt-timeline-cells[b-qzlbx2f8r0] {
    display: flex;
}

.gantt-timeline-cell[b-qzlbx2f8r0] {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.4rem 0;
    border-right: 1px solid #e9ecef;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
}

.gantt-timeline-cell-today[b-qzlbx2f8r0] {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}

.gantt-timeline-cell-group[b-qzlbx2f8r0] {
    box-shadow: inset 2px 0 0 #ced4da;
    overflow: visible;
    position: relative;
    z-index: 1;
    text-align: left;
    padding-left: 4px;
}

/* ===== Task label (sticky left column) ===== */
.gantt-task-label[b-qzlbx2f8r0] {
    flex-shrink: 0;
    width: 12.5rem;
    min-width: 12.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    background: #f8f9fa;
    border-right: 2px solid #dee2e6;
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.gantt-task-label-text[b-qzlbx2f8r0] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.gantt-task-assignee[b-qzlbx2f8r0] {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-corner[b-qzlbx2f8r0] {
    border-bottom: none;
}

/* ===== Scroll area ===== */
.gantt-scroll-area[b-qzlbx2f8r0] {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.gantt-body[b-qzlbx2f8r0] {
    position: relative;
}

/* ===== Task rows ===== */
.gantt-row[b-qzlbx2f8r0] {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    width: fit-content;
    min-width: 100%;
}

.gantt-row:hover .gantt-task-label[b-qzlbx2f8r0] {
    background: #e9ecef;
}

.gantt-row-cells[b-qzlbx2f8r0] {
    position: relative;
    flex-shrink: 0;
}

/* ===== Grid cells ===== */
.gantt-cell[b-qzlbx2f8r0] {
    position: absolute;
    top: 0;
    height: 100%;
    border-right: 1px solid #f0f0f0;
    box-sizing: border-box;
}

.gantt-cell-today[b-qzlbx2f8r0] {
    background: rgba(13, 110, 253, 0.04);
}

.gantt-cell-weekend[b-qzlbx2f8r0] {
    background: rgba(0, 0, 0, 0.02);
}

.gantt-cell-group[b-qzlbx2f8r0] {
    border-left: 1px solid #dee2e6;
}

/* ===== Task bar ===== */
.gantt-bar[b-qzlbx2f8r0] {
    position: absolute;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 0.7rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
    transition: opacity 0.15s;
}

.gantt-bar:hover[b-qzlbx2f8r0] {
    opacity: 0.85;
}

.gantt-bar-resize-handle[b-qzlbx2f8r0] {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    border-radius: 0 4px 4px 0;
    background: rgba(255,255,255,0.25);
    opacity: 0;
    transition: opacity 0.15s;
}

.gantt-bar:hover .gantt-bar-resize-handle[b-qzlbx2f8r0] {
    opacity: 1;
}

.gantt-bar-text[b-qzlbx2f8r0] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Priority-based colors */
.gantt-bar-normal[b-qzlbx2f8r0] {
    background: #0d6efd;
}

.gantt-bar-high[b-qzlbx2f8r0] {
    background: #fd7e14;
}

.gantt-bar-critical[b-qzlbx2f8r0] {
    background: #dc3545;
}

.gantt-bar-low[b-qzlbx2f8r0] {
    background: #6c757d;
}

/* ===== Link handle (dependency connector) ===== */
.gantt-bar-link-handle[b-qzlbx2f8r0] {
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6c757d;
    border: 2px solid #fff;
    cursor: crosshair;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 3;
}

.gantt-bar:hover .gantt-bar-link-handle[b-qzlbx2f8r0] {
    opacity: 1;
}

.gantt-bar-link-handle:hover[b-qzlbx2f8r0] {
    background: #0d6efd;
    transform: translateY(-50%) scale(1.3);
}

/* ===== Dependency arrows (SVG overlay) ===== */
.gantt-arrow[b-qzlbx2f8r0] {
    z-index: 0;
}

/* ===== Settings panel ===== */
.gantt-settings-backdrop[b-qzlbx2f8r0] {
    position: fixed;
    inset: 0;
    z-index: 5;
}

.gantt-settings-panel[b-qzlbx2f8r0] {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 6;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    min-width: 260px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ===== Embed tweaks ===== */
.gantt-embed .gantt-task-label[b-qzlbx2f8r0] {
    width: 160px;
    min-width: 160px;
}

/* ===== Work Area group header ===== */
.gantt-area-header[b-qzlbx2f8r0] {
    background: #e9ecef;
}

.gantt-area-header .gantt-row-cells[b-qzlbx2f8r0] {
    background: #e9ecef;
}

.gantt-area-label[b-qzlbx2f8r0] {
    background: #e9ecef;
    font-weight: 600;
    font-size: 0.8rem;
    color: #212529;
}

.gantt-row-drop-target[b-qzlbx2f8r0] {
    background: rgba(13, 110, 253, 0.08);
    box-shadow: inset 0 -2px 0 #0d6efd;
}

.gantt-row-drop-target .gantt-task-label[b-qzlbx2f8r0] {
    background: rgba(13, 110, 253, 0.08);
}

/* ===== Create-drag selection ===== */
.gantt-create-selection[b-qzlbx2f8r0] {
    position: absolute;
    background: rgba(13, 110, 253, 0.15);
    border: 2px dashed #0d6efd;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
}

/* ===== Ghost bar during drag ===== */
.gantt-bar-ghost[b-qzlbx2f8r0] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
/* /Components/Pages/KanbanBoard.razor.rz.scp.css */
/* ===== Fullscreen overlay ===== */
.kanban-fullscreen[b-70ijgxcc6n] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    margin: 0 !important;
    padding: 1rem;
    background: #fff;
    overflow: auto;
}

.kanban-fullscreen .kanban-board[b-70ijgxcc6n] {
    min-height: 0;
    height: calc(100vh - 7rem);
}

.kanban-fullscreen .kanban-column[b-70ijgxcc6n] {
    max-height: calc(100vh - 10rem);
}

.kanban-board[b-70ijgxcc6n] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    min-height: 60vh;
    align-items: flex-start;
}

.kanban-embed .kanban-board[b-70ijgxcc6n] {
    min-height: 0;
    flex: 1;
}

.kanban-column[b-70ijgxcc6n] {
    flex: 0 0 17.5rem;
    min-width: 17.5rem;
    background: #f8f9fa;
    border-radius: var(--radius-md, 0.5rem);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 12.5rem);
}

.kanban-embed .kanban-column[b-70ijgxcc6n] {
    max-height: none;
}

.kanban-column-header[b-70ijgxcc6n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    background: #f8f9fa;
    border-radius: 0.5rem 0.5rem 0 0;
    z-index: 1;
}

.kanban-column-title[b-70ijgxcc6n] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-column-body[b-70ijgxcc6n] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 80px;
}

.kanban-card[b-70ijgxcc6n] {
    background: #fff;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
    /* The drag is pointer-event driven, so the browser must not claim the gesture for
       panning or text selection. */
    touch-action: none;
    user-select: none;
}

    .kanban-card:hover[b-70ijgxcc6n] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .kanban-card:active[b-70ijgxcc6n] {
        cursor: grabbing;
    }

.kanban-card-color-bar[b-70ijgxcc6n] {
    width: 4px;
    flex-shrink: 0;
}

.kanban-color-primary[b-70ijgxcc6n] {
    background-color: #0d6efd;
}

.kanban-color-success[b-70ijgxcc6n] {
    background-color: #198754;
}

.kanban-color-warning[b-70ijgxcc6n] {
    background-color: #ffc107;
}

.kanban-color-danger[b-70ijgxcc6n] {
    background-color: #dc3545;
}

.kanban-card-content[b-70ijgxcc6n] {
    flex: 1;
    padding: 0.625rem 0.75rem;
    min-width: 0;
}

.kanban-card-title[b-70ijgxcc6n] {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212529;
}

.kanban-card-owner[b-70ijgxcc6n] {
    font-size: 0.775rem;
    color: #6c757d;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-card-badge[b-70ijgxcc6n]  .badge {
    font-size: 0.7rem;
    font-weight: 500;
}
/* /Components/Pages/LegalDocumentView.razor.rz.scp.css */
/* Legal documents (privacy policy, terms, DPA) on the public surface. Colours and
   type come from --pub-* in wwwroot/css/public-theme.css.

   The body is publisher-authored HTML stored in the database, so the rules below
   deliberately style plain tags (h2, p, ul, table) rather than classes - there are
   no classes in that markup to hook onto. ::deep is required for the same reason:
   CSS isolation would otherwise not reach content this component did not author. */

.ld-root[b-nspy4ikl6i] {
    background: var(--pub-paper);
    padding: 64px 0 88px;
    min-height: 70vh;
}

.ld-card[b-nspy4ikl6i] {
    display: block;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
    padding: 48px 52px 56px;
    font-family: var(--pub-font);
    color: var(--pub-navy-soft);
}

/* font-family and color restated: app.css carries a bare `h1, h2, h3` rule for the
   in-app UI that beats anything inherited from .ld-card. Same trap as the rest of
   the public pages - see Docs/public-site.md. */
.ld-card h1[b-nspy4ikl6i] {
    margin: 0 0 10px;
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: var(--pub-h-weight);
    letter-spacing: var(--pub-h-track);
    line-height: 1.1;
}

.ld-meta[b-nspy4ikl6i] {
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--pub-line);
    font-size: 0.88rem;
    color: var(--pub-quiet);
}

/* ---- publisher-authored body ---- */
.legal-document-body[b-nspy4ikl6i] { font-size: 1.02rem; line-height: 1.7; }

.legal-document-body[b-nspy4ikl6i]  h2 {
    margin: 40px 0 12px;
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.legal-document-body[b-nspy4ikl6i]  h3 {
    margin: 28px 0 10px;
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.legal-document-body[b-nspy4ikl6i]  h2:first-child,
.legal-document-body[b-nspy4ikl6i]  h3:first-child { margin-top: 0; }

.legal-document-body[b-nspy4ikl6i]  p { margin: 0 0 16px; }
.legal-document-body[b-nspy4ikl6i]  ul,
.legal-document-body[b-nspy4ikl6i]  ol { margin: 0 0 16px; padding-left: 22px; }
.legal-document-body[b-nspy4ikl6i]  li { margin-bottom: 8px; }
.legal-document-body[b-nspy4ikl6i]  a { color: var(--pub-accent); }
.legal-document-body[b-nspy4ikl6i]  a:hover { color: var(--pub-accent-dark); }
.legal-document-body[b-nspy4ikl6i]  strong { color: var(--pub-navy); font-weight: 700; }
.legal-document-body[b-nspy4ikl6i]  hr { margin: 32px 0; border: 0; border-top: 1px solid var(--pub-line); }

/* A sub-processor list is usually a table, and it must not push the card sideways. */
.legal-document-body[b-nspy4ikl6i]  table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}
.legal-document-body[b-nspy4ikl6i]  th,
.legal-document-body[b-nspy4ikl6i]  td {
    padding: 10px 12px;
    border: 1px solid var(--pub-line);
    text-align: left;
    vertical-align: top;
}
.legal-document-body[b-nspy4ikl6i]  th { background: var(--pub-paper); color: var(--pub-navy); font-weight: 700; }

@media (max-width: 768px) {
    .ld-root[b-nspy4ikl6i] { padding: 40px 0 56px; }
    .ld-card[b-nspy4ikl6i] { padding: 32px 24px 40px; border-radius: 14px; }
}
/* /Components/Pages/MapView.razor.rz.scp.css */
/* ===== Normal mode: map fills viewport minus the app chrome ===== */
.map-page-normal[b-0cxwn1ksyf] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px); /* subtract top navbar */
    gap: 0;
}

/* ===== Fullscreen overlay: cover entire viewport ===== */
.map-page-fullscreen[b-0cxwn1ksyf] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    gap: 0;
}

/* ===== Toolbar: always visible, never scrolls away ===== */
.map-toolbar[b-0cxwn1ksyf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-bottom: 0.75rem;
}

/* /Components/Pages/OnboardingRequest.razor.rz.scp.css */
/* Onboarding request. The form comes from the shared .fp-* form vocabulary in
   wwwroot/css/feature-pages.css; this only styles the chosen-package note. */

.ob-package[b-eo9q8yf4r1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 26px;
    padding: 16px 18px;
    background: var(--pub-paper);
    border: 1px solid var(--pub-line-soft);
    border-left: 3px solid var(--pub-accent);
    border-radius: 12px;
}
.ob-package-label[b-eo9q8yf4r1] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--pub-label);
}
.ob-package-name[b-eo9q8yf4r1] { font-size: 1.05rem; font-weight: 700; color: var(--pub-navy); }
/* /Components/Pages/PriceComparison.razor.rz.scp.css */
/* Price comparison. Hero, section, buttons and the closing panel come from the shared
   .fp-* vocabulary in wwwroot/css/feature-pages.css; this file carries the form and the
   running total beside it. */

.pc-grid[b-8621wo6cjw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* ── Form ───────────────────────────────────────────────────────────── */

.pc-form h2[b-8621wo6cjw] { margin-bottom: 28px; font-size: 1.4rem; }

.pc-field[b-8621wo6cjw] { display: flex; flex-direction: column; margin-bottom: 24px; }
.pc-field label[b-8621wo6cjw] {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--pub-label);
    margin-bottom: 8px;
}
.pc-field input[b-8621wo6cjw] {
    width: 100%;
    font-family: var(--pub-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pub-navy);
    background: var(--pub-paper-lift);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-sm);
    padding: 13px 15px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.pc-field input:focus[b-8621wo6cjw] {
    outline: none;
    background: var(--pub-white);
    border-color: var(--pub-accent);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.16);
}

/* The suffix sits beside the field rather than inside it: an absolutely positioned unit
   overlaps the browser's own number spinners, which differ in width per browser. */
.pc-amount[b-8621wo6cjw] { display: flex; align-items: center; gap: 10px; }
.pc-suffix[b-8621wo6cjw] { font-size: 1rem; font-weight: 600; color: var(--pub-quiet); }

.pc-hint[b-8621wo6cjw] { margin-top: 8px; font-size: 0.86rem; line-height: 1.45; color: var(--pub-quiet); }

/* ── Running total ──────────────────────────────────────────────────── */

.pc-result[b-8621wo6cjw] {
    background: var(--pub-paper-warm);
    border: 1px solid var(--pub-line-warm);
    border-radius: var(--pub-radius);
    padding: 32px 34px 30px;
    box-shadow: var(--pub-shadow);
}
.pc-empty[b-8621wo6cjw] { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--pub-muted); }

.pc-row[b-8621wo6cjw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--pub-line-warm);
}
.pc-row-label[b-8621wo6cjw] { font-size: 0.98rem; line-height: 1.45; color: var(--pub-muted); }
.pc-row-value[b-8621wo6cjw] {
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: var(--pub-h-track);
    color: var(--pub-navy);
    white-space: nowrap;
}
.pc-row-value small[b-8621wo6cjw] { font-size: 0.85rem; font-weight: 600; color: var(--pub-quiet); }

.pc-verdict[b-8621wo6cjw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
    padding: 20px 22px;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-left: 3px solid var(--pub-quiet);
    border-radius: 12px;
}
/* Only the saving case gets the green edge. A page that dresses up "we cost you more"
   in the same colour as a saving is not telling the visitor anything. */
.pc-verdict-save[b-8621wo6cjw] { border-left-color: var(--pub-ok); }
.pc-verdict strong[b-8621wo6cjw] { font-size: 1.1rem; color: var(--pub-navy); }
.pc-verdict span[b-8621wo6cjw] { font-size: 0.96rem; line-height: 1.55; color: var(--pub-muted); }

.pc-fine[b-8621wo6cjw] { margin: 20px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--pub-quiet); }
.pc-actions[b-8621wo6cjw] { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

@media (max-width: 900px) {
    .pc-grid[b-8621wo6cjw] { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 620px) {
    .pc-result[b-8621wo6cjw] { padding: 24px 22px 22px; }
    .pc-row[b-8621wo6cjw] { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pc-actions .fp-btn[b-8621wo6cjw] { width: 100%; justify-content: center; }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* Pricing page. The skeleton - hero, sections, cards, buttons, closing panel - comes
   from the shared .fp-* vocabulary in wwwroot/css/feature-pages.css, so this file
   only carries what is specific to prices: the seat cards, the package extras and
   the Tailormade rate rows.

   Headings do not need font-family/color restated here: .fp-root already does it for
   h1-h4, which is the whole reason this page opts into that root class. */

.pr-head[b-eg440jxclu] { max-width: 720px; margin-bottom: 44px; }
.pr-head h2[b-eg440jxclu] { margin-bottom: 14px; }
.pr-head p[b-eg440jxclu] { color: var(--pub-muted); font-size: 1.08rem; line-height: 1.6; }

/* ── Seats ──────────────────────────────────────────────────────────── */

.pr-seats[b-eg440jxclu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 44px;
}
.pr-seat[b-eg440jxclu] {
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    padding: 34px 32px 30px;
}
/* The full seat is the price people came to read, so it gets the accent edge and the
   shadow. The field agent sits beside it as a qualifier, not as a competing plan. */
.pr-seat-lead[b-eg440jxclu] {
    border-top: 3px solid var(--pub-accent);
    box-shadow: var(--pub-shadow);
}
.pr-seat-label[b-eg440jxclu] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--pub-label);
    margin-bottom: 14px;
}
.pr-seat-price[b-eg440jxclu] {
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--pub-h-track);
    color: var(--pub-navy);
}
.pr-seat-price span[b-eg440jxclu] {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--pub-quiet);
}
.pr-seat-unit[b-eg440jxclu] { margin-top: 8px; font-size: 0.95rem; color: var(--pub-muted); }
.pr-seat-note[b-eg440jxclu] {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--pub-line-soft);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--pub-muted);
}

.pr-included[b-eg440jxclu] { max-width: 760px; }
.pr-fineprint[b-eg440jxclu] {
    margin: 28px 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--pub-quiet);
}

/* ── Onboarding packages ────────────────────────────────────────────── */

/* Three named tiers read as a comparison, so they must line up. auto-fit would let
   one card stretch on a wide screen and break the comparison. */
.pr-packages[b-eg440jxclu] { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.pr-pkg[b-eg440jxclu] { display: flex; flex-direction: column; position: relative; }
.pr-pkg-featured[b-eg440jxclu] { border-color: var(--pub-accent-soft); box-shadow: var(--pub-shadow); }
.pr-pkg-price[b-eg440jxclu] {
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: var(--pub-h-track);
    color: var(--pub-navy);
}
.pr-pkg-unit[b-eg440jxclu] { margin-top: 4px; font-size: 0.88rem; color: var(--pub-quiet); }
.pr-pkg > p[b-eg440jxclu] { margin-top: 16px; }
.pr-pkg-list[b-eg440jxclu] {
    list-style: none;
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--pub-line-soft);
    flex: 1;
}
.pr-pkg-list li[b-eg440jxclu] {
    position: relative;
    padding-left: 18px;
    margin-bottom: 11px;
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--pub-muted);
}
.pr-pkg-list li[b-eg440jxclu]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pub-accent-soft);
}
/* The buttons must sit on one line across all three cards regardless of how many
   bullets each has, which is what the flex:1 on the list above is for. */
.pr-pkg-btn[b-eg440jxclu] { margin-top: 26px; justify-content: center; width: 100%; }

/* ── Tailormade ─────────────────────────────────────────────────────── */

.pr-tailor[b-eg440jxclu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.pr-rates[b-eg440jxclu] {
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    padding: 10px 30px;
    box-shadow: var(--pub-shadow);
}
.pr-rate[b-eg440jxclu] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--pub-line-soft);
}
.pr-rate:last-child[b-eg440jxclu] { border-bottom: none; }
.pr-rate-what[b-eg440jxclu] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-rate-name[b-eg440jxclu] { font-size: 1.02rem; font-weight: 700; color: var(--pub-navy); }
.pr-rate-unit[b-eg440jxclu] { font-size: 0.88rem; color: var(--pub-quiet); }
.pr-rate-amount[b-eg440jxclu] { flex: 0 0 auto; text-align: right; }
.pr-rate-amount span[b-eg440jxclu] {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: var(--pub-h-track);
    color: var(--pub-navy);
    white-space: nowrap;
}
.pr-rate-amount small[b-eg440jxclu] { font-size: 0.85rem; color: var(--pub-quiet); white-space: nowrap; }

.pr-tailor-text h3[b-eg440jxclu] { margin-bottom: 20px; }
.pr-callout[b-eg440jxclu] {
    margin: 26px 0;
    padding: 18px 22px;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-left: 3px solid var(--pub-accent);
    border-radius: 12px;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--pub-muted);
}

@media (max-width: 900px) {
    .pr-packages[b-eg440jxclu] { grid-template-columns: 1fr; }
    .pr-tailor[b-eg440jxclu] { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 620px) {
    .pr-head[b-eg440jxclu] { margin-bottom: 32px; }
    .pr-seat[b-eg440jxclu] { padding: 26px 22px 24px; }
    .pr-seat-price[b-eg440jxclu] { font-size: 2.3rem; }
    .pr-rates[b-eg440jxclu] { padding: 6px 22px; }
    .pr-rate[b-eg440jxclu] { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 0; }
    .pr-rate-amount[b-eg440jxclu] { text-align: left; }
}
/* /Components/Pages/ResourceOrderEditor.razor.rz.scp.css */
[b-9ew9r7opvh] .resource-order-dragging {
    opacity: 0.4;
    background: var(--bs-primary-bg-subtle, #e7f1ff);
    border-left: 3px solid var(--bs-primary, #0d6efd) !important;
}

[b-9ew9r7opvh] .resource-order-item {
    transition: all 0.15s ease;
}
/* /Components/Pages/ResourceScheduler.razor.rz.scp.css */
/* ===== Gantt container ===== */

.scheduler-page[b-0ilph2umdh] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px); /* navbar height */
    min-height: 0;
}

.scheduler-page.scheduler-embed[b-0ilph2umdh] {
    height: auto;
    flex: 1 1 auto;
    min-height: 400px;
}

.scheduler-container[b-0ilph2umdh] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ===== Fullscreen ===== */
.scheduler-fullscreen[b-0ilph2umdh] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh !important;
}

.scheduler-fullscreen .scheduler-wrapper[b-0ilph2umdh] {
    height: 0;
    flex: 1 1 0;
}

.scheduler-fullscreen .scheduler-month-wrapper[b-0ilph2umdh] {
    height: 0;
    flex: 1 1 0;
}

/* ===== Task selection ===== */
.scheduler-task-selected[b-0ilph2umdh] {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.scheduler-wrapper[b-0ilph2umdh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 0.5rem;
}

.scheduler-embed .scheduler-wrapper[b-0ilph2umdh] {
    height: auto;
    flex: 1;
    min-height: 400px;
}

.scheduler-scroll-area[b-0ilph2umdh] {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ===== Timeline header ===== */
.scheduler-timeline[b-0ilph2umdh] {
    display: flex;
    flex-shrink: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    /* Lives outside .scheduler-scroll-area - no sticky needed, synced by JS */
}

.scheduler-timeline-clip[b-0ilph2umdh] {
    flex: 1;
    overflow: hidden;
}

.scheduler-timeline-cells[b-0ilph2umdh] {
    display: flex;
    flex-direction: column;
}

.scheduler-week-number-row[b-0ilph2umdh] {
    border-bottom: 1px solid #adb5bd;
}

/* Also carries the month band. A month cell spans its own columns, so a partial month at the edge of the
   window can be narrow - it truncates rather than spilling over its neighbour. */
.scheduler-week-number-cell[b-0ilph2umdh] {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0;
    border-right: 1px solid #adb5bd;
    color: #212529;
    background: #ced4da;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Reorder grip in the frozen label. Dim until the row is hovered, so the column stays calm to read, but
   always present in the layout - appearing on hover would shift the name sideways. */
.scheduler-row-grip[b-0ilph2umdh] {
    flex-shrink: 0;
    margin-right: 0.35rem;
    color: #adb5bd;
    opacity: 0;
    cursor: grab;
    transition: opacity 0.1s;
}

.scheduler-resource-label:hover .scheduler-row-grip[b-0ilph2umdh] {
    opacity: 1;
}

.scheduler-row-grip:active[b-0ilph2umdh] {
    cursor: grabbing;
}

/* The row being dragged. The insertion line that goes with it is appended to document.body by the interop
   module and therefore carries no scope attribute, so it cannot be styled from here - it is styled inline
   in JS, like the lasso and the drag ghost. */
.scheduler-row-dragging[b-0ilph2umdh] {
    opacity: 0.5;
}

/* Search highlight. The search walks rows instead of filtering them, so the hits have to be visible
   against the rows that stay around them: every match gets a tint, the one currently walked to gets a
   border it cannot be confused with. */
.scheduler-row-search-match[b-0ilph2umdh] {
    background-color: rgba(255, 193, 7, 0.16) !important;
}

.scheduler-row-search-current[b-0ilph2umdh] {
    background-color: rgba(255, 193, 7, 0.32) !important;
    box-shadow: inset 0 0 0 2px #ffc107;
}

/* Weekday initial row (setting: Scheduler.ShowWeekdays). One letter per date column, so it aligns with
   the columns rather than spanning them like the week-number / month bands above it. */
.scheduler-weekday-row[b-0ilph2umdh] {
    border-bottom: 1px solid #ced4da;
}

.scheduler-weekday-cell[b-0ilph2umdh] {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #495057;
    background: #eef0f2;
    padding: 1px 0;
    border-right: 1px solid #ced4da;
}

.scheduler-timeline-cell[b-0ilph2umdh] {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.5rem 0;
    border-right: 1px solid #ced4da;
    color: #212529;
}

.scheduler-timeline-cell-now[b-0ilph2umdh] {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}

.scheduler-timeline-cell-day-start[b-0ilph2umdh] {
    box-shadow: inset 2px 0 0 #ced4da;
    font-weight: 700;
}

/* ===== Resource label (sticky left column) ===== */
.scheduler-resource-label[b-0ilph2umdh] {
    flex-shrink: 0;
    width: 10rem;
    min-width: 10rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #f8f9fa;
    border-right: 2px solid #dee2e6;
    position: sticky;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
}

/* Body row labels on white for stronger text contrast on large screens (the header corner stays grey). */
.scheduler-row .scheduler-resource-label[b-0ilph2umdh] {
    background: #fff;
    font-weight: 600;
    color: #212529;
}

.scheduler-corner[b-0ilph2umdh] {
    border-bottom: none;
}

/* ===== Grid body ===== */
.scheduler-grid-body[b-0ilph2umdh] {
    position: relative;
    /* Size to the full timeline width so each row's border-bottom (the horizontal grid line) spans the
       whole scrollable area, not just the viewport width at first paint. Without this the lines disappear
       past the initial viewport when scrolling right. */
    width: max-content;
    min-width: 100%;
}

/* ===== Group header row ===== */
.scheduler-group-header[b-0ilph2umdh] {
    display: flex;
    background: #f1f3f5;
    border-bottom: 1px solid #dee2e6;
    border-top: 2px solid #dee2e6;
    position: sticky;
    left: 0;
    z-index: 1;
}

.scheduler-group-label[b-0ilph2umdh] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f1f3f5;
}

.scheduler-group-header-fill[b-0ilph2umdh] {
    flex-shrink: 0;
    background: #f1f3f5;
}

/* ===== Resource row ===== */
.scheduler-row[b-0ilph2umdh] {
    display: flex;
    border-bottom: var(--grid-line-w, 1px) solid var(--grid-line-color, #ced4da);
}

.scheduler-row:last-child[b-0ilph2umdh] {
    border-bottom: none;
}

.scheduler-row-highlight[b-0ilph2umdh] {
    background: rgba(13, 110, 253, 0.06) !important;
}

/* ===== Row cells container ===== */
.scheduler-row-cells[b-0ilph2umdh] {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #fff;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--col-w) - 1px),
        var(--grid-line-color, #ced4da) calc(var(--col-w) - 1px),
        var(--grid-line-color, #ced4da) var(--col-w)
    );
}

.scheduler-day-start-marker[b-0ilph2umdh] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--grid-line-color, #adb5bd);
    pointer-events: none;
    z-index: 0;
}

/* "Today / now" marker: a full-height red line spanning all resource rows. Sits in the scrolling
   grid body so it tracks the columns, and below the sticky resource-label (z-index 10) so it tucks
   behind the frozen left column when scrolled. */
.scheduler-today-line[b-0ilph2umdh] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #dc3545;
    pointer-events: none;
    z-index: 6;
}

/* Weekend (Sat/Sun) columns in day view — darker, header-like tint + a clear band behind the bars. */
.scheduler-timeline-cell-weekend[b-0ilph2umdh] {
    background: #d5d9de;
}

.scheduler-weekend-col[b-0ilph2umdh] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 0;
}

/* Public holidays in day view — marked like weekends (a touch darker so a blocked weekday stands out). */
.scheduler-timeline-cell-holiday[b-0ilph2umdh] {
    background: #cfd3d9;
}

.scheduler-holiday-col[b-0ilph2umdh] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.11);
    pointer-events: none;
    z-index: 0;
}

/* ===== Task bar ===== */
.scheduler-task[b-0ilph2umdh] {
    position: absolute;
    /* A thin dark edge: bars of the same colour sitting next to each other otherwise read as one long
       block, and a short booking has too little colour of its own to stand out at all. */
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    font-size: calc(0.75rem + var(--task-fs-boost, 0px));
    font-weight: var(--task-fw, 400);
    padding: 0 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.1s ease;
    user-select: none;
    z-index: 1;
}

    .scheduler-task:hover[b-0ilph2umdh] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        z-index: 5;
    }

.scheduler-task-dragging[b-0ilph2umdh] {
    opacity: 0.7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    z-index: 10 !important;
    cursor: grabbing;
}

/* Resize cursors on edges */
.scheduler-task[b-0ilph2umdh]::before,
.scheduler-task[b-0ilph2umdh]::after {
    content: '';
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
}

.scheduler-task[b-0ilph2umdh]::before {
    left: 0;
}

.scheduler-task[b-0ilph2umdh]::after {
    right: 0;
}

.scheduler-task-title[b-0ilph2umdh] {
    pointer-events: none;
}

/* A bar too narrow for its own label (a one-day booking in a month-wide view is a few pixels) keeps the
   label beside it instead of clipping it to nothing. The label leaves the coloured bar, so it carries its
   own colour and a white halo to stay readable over grid lines and whatever sits behind it. */
.scheduler-task-narrow[b-0ilph2umdh] {
    overflow: visible;
}

.scheduler-task-narrow .scheduler-task-title[b-0ilph2umdh] {
    position: absolute;
    left: calc(100% + 4px);
    top: 0;
    color: #2a3a4a;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    z-index: 2;
}

/* Priority color variants */
.scheduler-task-normal[b-0ilph2umdh] {
    background: #0d6efd;
    color: #fff;
}

.scheduler-task-high[b-0ilph2umdh] {
    background: #dc3545;
    color: #fff;
}

.scheduler-task-low[b-0ilph2umdh] {
    background: #198754;
    color: #fff;
}

/* Attention / Locked flag colors (trump priority and booking type) */
.scheduler-task-attention[b-0ilph2umdh] {
    background: #fd7e14;
    color: #fff;
}

.scheduler-task-locked[b-0ilph2umdh] {
    background: #dc3545;
    color: #fff;
}

/* Booking type color variants */
.scheduler-task-vacation[b-0ilph2umdh] {
    background: #ffc107;
    color: #000;
}

/* Overbooking indicator */
.scheduler-row-overbooked[b-0ilph2umdh] {
    background: rgba(220, 53, 69, 0.05);
}

.scheduler-row-overbooked .scheduler-resource-label[b-0ilph2umdh] {
    border-left: 3px solid #dc3545;
}

/* ===== Heatmap cells (Month/Quarter) ===== */
.scheduler-heatmap-cell[b-0ilph2umdh] {
    position: absolute;
    top: 0;
    border-right: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    transition: opacity 0.15s;
}

.scheduler-heatmap-cell:hover[b-0ilph2umdh] {
    opacity: 0.8;
    outline: 1px solid rgba(0,0,0,0.2);
    z-index: 1;
}

.heatmap-empty[b-0ilph2umdh] { background: transparent; }
.heatmap-light[b-0ilph2umdh] { background: rgba(13, 110, 253, 0.12); }
.heatmap-medium[b-0ilph2umdh] { background: rgba(13, 110, 253, 0.28); }
.heatmap-busy[b-0ilph2umdh] { background: rgba(13, 110, 253, 0.48); }
.heatmap-full[b-0ilph2umdh] { background: rgba(13, 110, 253, 0.70); }
.heatmap-over[b-0ilph2umdh] { background: rgba(220, 53, 69, 0.65); }

/* Long event blocks in heatmap mode - full-height overlay */
.scheduler-task-overlay[b-0ilph2umdh] {
    border-radius: 2px;
    z-index: 2;
    opacity: 0.92;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}

.scheduler-list-task[b-0ilph2umdh] {
    border-radius: 2px;
    z-index: 2;
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 3px;
}

/* Search hit: a bar whose case number/title matches the query lights up so it can be spotted at a glance,
   over any bar colour. Kept distinct from selection (a solid ring) and from the amber row tint. Placed
   after the overlay/list rules so it wins source order for bars that also carry those classes. */
.scheduler-task-search-hit[b-0ilph2umdh] {
    outline: 2px solid #ffc107;
    outline-offset: 1px;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.55), 0 0 10px 2px rgba(255, 193, 7, 0.85) !important;
    z-index: 6;
}

/* "Text lines per booking" > 1: the bar is taller (height set inline) and its label wraps, clamped to the
   configured number of lines, instead of clipping to a single line. Wins source order over the overlay/list
   nowrap above. */
.scheduler-task-multiline[b-0ilph2umdh] {
    white-space: normal;
    display: flex;
    align-items: center;
}

    .scheduler-task-multiline .scheduler-task-title[b-0ilph2umdh] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--task-text-lines, 2);
        line-clamp: var(--task-text-lines, 2);
        overflow: hidden;
        white-space: normal;
        width: 100%;
    }

.scheduler-task-sick[b-0ilph2umdh] {
    background: #e85d04;
    color: #fff;
}

.scheduler-task-school[b-0ilph2umdh] {
    background: #6f42c1;
    color: #fff;
}

.scheduler-task-parental[b-0ilph2umdh] {
    background: #d63384;
    color: #fff;
}

.scheduler-task-compensation[b-0ilph2umdh] {
    background: #20c997;
    color: #fff;
}

.scheduler-task-other[b-0ilph2umdh] {
    background: #6c757d;
    color: #fff;
}

/* ===== Month calendar ===== */
.scheduler-month-wrapper[b-0ilph2umdh] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-embed .scheduler-month-wrapper[b-0ilph2umdh] {
    height: auto;
    flex: 1;
    min-height: 400px;
}

.scheduler-month[b-0ilph2umdh] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-month-header[b-0ilph2umdh] {
    display: grid;
    grid-template-columns: 2rem repeat(7, 1fr);
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.scheduler-month-dow[b-0ilph2umdh] {
    text-align: center;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.5rem 0;
    color: #495057;
}

.scheduler-month-week-num-header[b-0ilph2umdh] {
    border-right: 1px solid #dee2e6;
}

.scheduler-month-week-num[b-0ilph2umdh] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #343a40;
    background: #e9ecef;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    cursor: pointer;
    user-select: none;
    transition: color 0.1s, background 0.1s;
}

    .scheduler-month-week-num:hover[b-0ilph2umdh] {
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.06);
    }

.scheduler-month-row:last-child .scheduler-month-week-num[b-0ilph2umdh] {
    border-bottom: none;
}

.scheduler-month-body[b-0ilph2umdh] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-month-row[b-0ilph2umdh] {
    display: grid;
    grid-template-columns: 2rem repeat(7, 1fr);
    flex: 1;
    min-height: 0;
}

.scheduler-month-cell[b-0ilph2umdh] {
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    padding: 0.25rem 0.4rem;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .scheduler-month-cell:last-child[b-0ilph2umdh] {
        border-right: none;
    }

.scheduler-month-row:last-child .scheduler-month-cell[b-0ilph2umdh] {
    border-bottom: none;
}

.scheduler-month-cell-other[b-0ilph2umdh] {
    background: #fafafa;
    color: #adb5bd;
}

.scheduler-month-cell-today[b-0ilph2umdh] {
    background: rgba(13, 110, 253, 0.05);
}

.scheduler-month-day-num[b-0ilph2umdh] {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: inherit;
    display: inline-block;
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0 2px;
    transition: color 0.1s, background 0.1s;
}

    .scheduler-month-day-num:hover[b-0ilph2umdh] {
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.08);
    }

.scheduler-month-cell-today .scheduler-month-day-num[b-0ilph2umdh] {
    color: #0d6efd;
}

.scheduler-month-task-list[b-0ilph2umdh] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

    .scheduler-month-task-list[b-0ilph2umdh]::-webkit-scrollbar {
        width: 3px;
    }

    .scheduler-month-task-list[b-0ilph2umdh]::-webkit-scrollbar-thumb {
        background: #ced4da;
        border-radius: 2px;
    }

    .scheduler-month-task-list[b-0ilph2umdh]::-webkit-scrollbar-track {
        background: transparent;
    }

.scheduler-month-task[b-0ilph2umdh] {
    height: var(--month-task-h, 18px);
    line-height: var(--month-task-h, 18px);
    font-size: calc(var(--month-task-h, 18px) * 0.55);
    padding: 0 4px;
    margin-bottom: 2px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

    .scheduler-month-task:hover[b-0ilph2umdh] {
        opacity: 0.85;
    }

.scheduler-month-more[b-0ilph2umdh] {
    font-size: 0.7rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0 2px;
    border-radius: 0.2rem;
    transition: color 0.1s, background 0.1s;
}

    .scheduler-month-more:hover[b-0ilph2umdh] {
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.08);
}

/* ===== Unallocated section ===== *//* ===== Month day-detail popup ===== */
.scheduler-month-popup-backdrop[b-0ilph2umdh] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.scheduler-month-popup[b-0ilph2umdh] {
    position: fixed;
    z-index: 1041;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 220px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scheduler-month-popup-header[b-0ilph2umdh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.75rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.scheduler-month-popup-body[b-0ilph2umdh] {
    overflow-y: auto;
    max-height: 260px;
    padding: 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scheduler-month-popup-task[b-0ilph2umdh] {
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    flex-shrink: 0;
}

    .scheduler-month-popup-task:hover[b-0ilph2umdh] {
        opacity: 0.85;
    }

/* ===== Month day-detail popup ===== */
.scheduler-month-popup-backdrop[b-0ilph2umdh] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.scheduler-month-popup[b-0ilph2umdh] {
    position: fixed;
    z-index: 1041;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 220px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scheduler-month-popup-header[b-0ilph2umdh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.75rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.scheduler-month-popup-body[b-0ilph2umdh] {
    overflow-y: auto;
    max-height: 260px;
    padding: 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scheduler-month-popup-task[b-0ilph2umdh] {
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    flex-shrink: 0;
}

    .scheduler-month-popup-task:hover[b-0ilph2umdh] {
        opacity: 0.85;
    }

/* ===== Unallocated section ===== */
.scheduler-unallocated[b-0ilph2umdh] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.scheduler-unallocated-header[b-0ilph2umdh] {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    cursor: pointer;
    user-select: none;
}

    .scheduler-unallocated-header:hover[b-0ilph2umdh] {
        background: #ced4da;
    }

.scheduler-unallocated-drop-target[b-0ilph2umdh] {
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
    background: rgba(13, 110, 253, 0.05) !important;
}

.scheduler-unallocated-body[b-0ilph2umdh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    max-height: 200px;
    overflow-y: auto;
}

.scheduler-unallocated-card[b-0ilph2umdh] {
    display: flex;
    align-items: center;
    min-width: 80px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.1s ease;
    user-select: none;
}

    .scheduler-unallocated-card:hover[b-0ilph2umdh] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

.scheduler-unallocated-card-title[b-0ilph2umdh] {
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scheduler-unallocated-card-meta[b-0ilph2umdh] {
    font-size: 0.72rem;
    opacity: 0.85;
    margin-top: 2px;
}

/* ===== Settings panel ===== */
.scheduler-settings-backdrop[b-0ilph2umdh] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

/* ===== Context menu ===== */
.scheduler-context-backdrop[b-0ilph2umdh] {
    position: fixed;
    inset: 0;
    z-index: 1049;
}

.scheduler-context-menu[b-0ilph2umdh] {
    position: fixed;
    z-index: 1050;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.25rem 0;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.scheduler-context-menu-header[b-0ilph2umdh] {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #ced4da;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.scheduler-context-menu-item[b-0ilph2umdh] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    color: #212529;
}

.scheduler-context-menu-item:hover[b-0ilph2umdh] {
    background: #f0f0f0;
}

.scheduler-context-menu-item.active[b-0ilph2umdh] {
    background: #e8f0fe;
    font-weight: 600;
}

.scheduler-settings-panel[b-0ilph2umdh] {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 1041;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    min-width: 260px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* /Components/Pages/SelfCheck.razor.rz.scp.css */
/* Self-check page. Colours and measures come from --pub-* in
   wwwroot/css/public-theme.css.

   The Ja/Nej pair is a real radio group styled as a segmented control: the input
   is hidden and its label is the visible target. Keeping a genuine radio rather
   than two buttons is what gives arrow-key navigation and the screen-reader
   "1 of 2" announcement for free. */

.sc-root[b-x86bgdky20] {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    background: var(--pub-white);
    -webkit-font-smoothing: antialiased;
}
.sc-root *[b-x86bgdky20] { box-sizing: border-box; }

.sc-container[b-x86bgdky20] { max-width: var(--pub-measure); margin: 0 auto; padding: 0 var(--pub-gutter); }
.sc-narrow[b-x86bgdky20] { max-width: 780px; }

.sc-root h1[b-x86bgdky20],
.sc-root h2[b-x86bgdky20],
.sc-root h3[b-x86bgdky20] {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-weight: var(--pub-h-weight);
    letter-spacing: var(--pub-h-track);
    text-wrap: pretty;
}

.sc-hero[b-x86bgdky20] {
    background: var(--pub-paper);
    border-bottom: 1px solid var(--pub-line-soft);
    padding: 76px 0 68px;
}
.sc-overline[b-x86bgdky20] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pub-accent);
    margin-bottom: 16px;
}
.sc-hero h1[b-x86bgdky20] {
    margin: 0;
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    line-height: 1.08;
    max-width: 20ch;
}
.sc-lead[b-x86bgdky20] {
    margin: 22px 0 0;
    max-width: 62ch;
    font-size: 1.14rem;
    line-height: 1.55;
    color: var(--pub-muted);
    text-wrap: pretty;
}

.sc-body[b-x86bgdky20] { padding: 52px 0 88px; }

.sc-progress[b-x86bgdky20] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pub-quiet);
    margin-bottom: 20px;
}

/* ── Questions ──────────────────────────────────────────────────────── */

.sc-q[b-x86bgdky20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin: 0 0 14px;
    padding: 22px 26px;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-left: 3px solid var(--pub-line);
    border-radius: var(--pub-radius);
    position: relative;   /* the visually-hidden radios are absolute; keep them in this box */
    transition: border-color 0.18s, background 0.18s;
}
.sc-q-done[b-x86bgdky20] { border-left-color: var(--pub-accent); background: var(--pub-paper-lift); }

.sc-q-label[b-x86bgdky20] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}
.sc-q-num[b-x86bgdky20] {
    flex: 0 0 auto;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--pub-accent);
    min-width: 1.2em;
}
.sc-q-text[b-x86bgdky20] {
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--pub-navy);
    text-wrap: pretty;
}

.sc-choices[b-x86bgdky20] { display: flex; flex: 0 0 auto; gap: 8px; }
/* Clipped rather than opacity:0 or display:none. Both of those drop the radio out
   of the accessibility tree in Chrome, which would leave the question unanswerable
   by keyboard or screen reader while looking perfectly fine on screen. */
.sc-choices input[b-x86bgdky20] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.sc-choices label[b-x86bgdky20] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 11px 18px;
    background: var(--pub-white);
    border: 1.5px solid var(--pub-line);
    border-radius: var(--pub-radius-sm);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--pub-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sc-choices label:hover[b-x86bgdky20] { border-color: var(--pub-navy-soft); color: var(--pub-navy); }
.sc-choices input:checked + label[b-x86bgdky20] {
    background: var(--pub-navy);
    border-color: var(--pub-navy);
    color: #fff;
}
.sc-choices input:focus-visible + label[b-x86bgdky20] {
    outline: 2px solid var(--pub-accent);
    outline-offset: 2px;
}

.sc-waiting[b-x86bgdky20] {
    margin: 26px 0 0;
    font-size: 0.98rem;
    color: var(--pub-quiet);
    text-align: center;
}

/* ── Result ─────────────────────────────────────────────────────────── */

.sc-result[b-x86bgdky20] {
    margin-top: 34px;
    padding: 38px 38px 34px;
    background: var(--pub-paper-warm);
    border: 1px solid var(--pub-line-warm);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
}
.sc-score[b-x86bgdky20] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.sc-score-num[b-x86bgdky20] {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--pub-h-track);
    color: var(--pub-accent);
}
.sc-score-of[b-x86bgdky20] { font-size: 0.95rem; font-weight: 600; color: var(--pub-quiet); }

.sc-result h2[b-x86bgdky20] { margin: 0 0 14px; font-size: 1.6rem; line-height: 1.2; }
.sc-verdict[b-x86bgdky20] {
    margin: 0;
    max-width: 62ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--pub-ink);
    text-wrap: pretty;
}

.sc-gaps[b-x86bgdky20] {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--pub-line-warm);
}
.sc-gaps h3[b-x86bgdky20] {
    margin: 0 0 16px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pub-label);
}
.sc-gaps ul[b-x86bgdky20] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
/* The link sits under its own line of text, never beside it. Pushed apart with
   space-between the links landed in three different places: the long text wrapped
   its link onto the next line while the shorter ones stayed hard right, each with a
   different gap in front of it. The consequence and where to read about it now read
   as one small block, and nothing depends on how long the sentence happens to be. */
.sc-gaps li[b-x86bgdky20] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding-left: 16px;
    border-left: 2px solid var(--pub-accent-soft);
}
.sc-gap-text[b-x86bgdky20] { font-size: 0.98rem; line-height: 1.5; color: var(--pub-muted); }
.sc-gaps a[b-x86bgdky20] { flex: 0 0 auto; font-size: 0.94rem; font-weight: 700; color: var(--pub-accent); text-decoration: none; white-space: nowrap; }
.sc-gaps a:hover[b-x86bgdky20] { color: var(--pub-accent-dark); text-decoration: underline; }

.sc-actions[b-x86bgdky20] { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.sc-btn[b-x86bgdky20] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border: 1.5px solid transparent;
    border-radius: var(--pub-radius-sm);
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.sc-btn-primary[b-x86bgdky20] { background: var(--pub-accent); color: #fff; box-shadow: 0 6px 18px rgba(31, 59, 87, 0.14); }
.sc-btn-primary:hover[b-x86bgdky20] { background: var(--pub-accent-dark); color: #fff; }
.sc-btn-outline[b-x86bgdky20] { background: var(--pub-white); color: var(--pub-navy); border-color: var(--pub-navy); }
.sc-btn-outline:hover[b-x86bgdky20] { background: var(--pub-navy); color: #fff; }

.sc-restart[b-x86bgdky20] {
    margin-top: 20px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--pub-font);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--pub-quiet);
    text-decoration: underline;
    cursor: pointer;
}
.sc-restart:hover[b-x86bgdky20] { color: var(--pub-navy); }

@media (max-width: 700px) {
    .sc-hero[b-x86bgdky20] { padding: 52px 0 48px; }
    .sc-body[b-x86bgdky20] { padding: 36px 0 64px; }
    .sc-q[b-x86bgdky20] { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 20px 18px; }
    .sc-choices label[b-x86bgdky20] { flex: 1; min-width: 0; }
    .sc-result[b-x86bgdky20] { padding: 28px 22px 26px; }
    .sc-actions .sc-btn[b-x86bgdky20] { width: 100%; }
}
/* /Components/Pages/SignUp.razor.rz.scp.css */
/* Signup page. The hero, buttons and container come from the shared .fp-* vocabulary
   in wwwroot/css/feature-pages.css; this file carries the step indicator, the panel
   and the form controls.

   The controls are rendered by InputText, so their markup is authored by that
   component and never carries this file's scope attribute. Every rule targeting an
   input, or a .validation-message, therefore goes through ::deep. The plain
   <input> elements written directly in the markup (the code box, the honeypot and
   the legal checkboxes) do not need it. */

.su-root[b-rfbgezqfoq] { background: var(--pub-white); }

/* A shorter hero than the content pages: the form is the point, and pushing it
   below the fold on a laptop costs signups. */
.su-hero[b-rfbgezqfoq] { padding: 60px 0 56px; }

.su-body[b-rfbgezqfoq] { padding: 48px 0 88px; }
.su-narrow[b-rfbgezqfoq] { max-width: 720px; }

/* ── Step indicator ─────────────────────────────────────────────────── */

.su-steps[b-rfbgezqfoq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    counter-reset: none;
}
.su-step[b-rfbgezqfoq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
}
/* The connector is drawn from each step towards the previous one, so the first
   step has none and the line always ends at a dot rather than in mid-air. */
.su-step + .su-step[b-rfbgezqfoq]::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--pub-line);
    z-index: 0;
}
.su-step-done[b-rfbgezqfoq]::before,
.su-step-now[b-rfbgezqfoq]::before { background: var(--pub-accent-soft); }

.su-step-dot[b-rfbgezqfoq] {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pub-white);
    border: 2px solid var(--pub-line);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--pub-faint);
}
.su-step-dot svg[b-rfbgezqfoq] { width: 15px; height: 15px; }
.su-step-now .su-step-dot[b-rfbgezqfoq] { border-color: var(--pub-accent); color: var(--pub-accent); }
.su-step-done .su-step-dot[b-rfbgezqfoq] { background: var(--pub-accent); border-color: var(--pub-accent); color: #fff; }

.su-step-name[b-rfbgezqfoq] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pub-faint);
}
.su-step-now .su-step-name[b-rfbgezqfoq] { color: var(--pub-navy); }
.su-step-done .su-step-name[b-rfbgezqfoq] { color: var(--pub-muted); }

/* ── Panel ──────────────────────────────────────────────────────────── */

.su-panel[b-rfbgezqfoq] {
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
    padding: 38px 40px 34px;
}
.su-panel-center[b-rfbgezqfoq] { text-align: center; }
.su-panel h2[b-rfbgezqfoq] { margin: 0 0 26px; font-size: 1.5rem; }
.su-panel-center h2[b-rfbgezqfoq] { margin-bottom: 12px; }

.su-icon[b-rfbgezqfoq] { width: 46px; height: 46px; color: var(--pub-accent); margin-bottom: 18px; }
.su-icon-ok[b-rfbgezqfoq] { color: var(--pub-ok); }

.su-lead[b-rfbgezqfoq] {
    margin: 0 auto;
    max-width: 46ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--pub-muted);
}
.su-lead strong[b-rfbgezqfoq] { color: var(--pub-navy); }

/* ── Form controls ──────────────────────────────────────────────────── */

.su-row[b-rfbgezqfoq] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.su-field[b-rfbgezqfoq] { display: flex; flex-direction: column; margin-bottom: 18px; min-width: 0; }
.su-field label[b-rfbgezqfoq] {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--pub-label);
    margin-bottom: 7px;
}

.su-field[b-rfbgezqfoq]  input {
    width: 100%;
    font-family: var(--pub-font);
    font-size: 1rem;
    color: var(--pub-navy);
    background: var(--pub-paper-lift);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-sm);
    padding: 12px 14px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.su-field[b-rfbgezqfoq]  input:focus {
    outline: none;
    background: var(--pub-white);
    border-color: var(--pub-accent);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.16);
}
/* The element type is repeated so this outranks the .su-field input rule above. */
.su-field[b-rfbgezqfoq]  input.invalid { border-color: var(--pub-warn); }
.su-field[b-rfbgezqfoq]  .validation-message {
    margin-top: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--pub-warn);
}

.su-hint[b-rfbgezqfoq] { margin: 0 0 22px; font-size: 0.88rem; line-height: 1.5; color: var(--pub-quiet); }
.su-trap[b-rfbgezqfoq] { position: absolute; left: -9999px; }
.su-altcha[b-rfbgezqfoq] { margin: 0 0 22px; }

.su-btn-block[b-rfbgezqfoq] { width: 100%; justify-content: center; }

.su-alt[b-rfbgezqfoq] {
    margin: 20px 0 0;
    font-size: 0.92rem;
    text-align: center;
    color: var(--pub-quiet);
}
.su-alt a[b-rfbgezqfoq] { color: var(--pub-accent); font-weight: 700; text-decoration: none; }
.su-alt a:hover[b-rfbgezqfoq] { text-decoration: underline; }

/* ── Verification code ──────────────────────────────────────────────── */

.su-code-wrap[b-rfbgezqfoq] { max-width: 300px; margin: 26px auto 0; }
.su-code[b-rfbgezqfoq] {
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 16px;
    font-family: var(--pub-font);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    text-indent: 0.35em;   /* offsets the trailing letter-space so the digits look centred */
    color: var(--pub-navy);
    background: var(--pub-paper-lift);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-sm);
}
.su-code:focus[b-rfbgezqfoq] {
    outline: none;
    background: var(--pub-white);
    border-color: var(--pub-accent);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.16);
}
.su-code[b-rfbgezqfoq]::placeholder { color: var(--pub-faint); font-weight: 600; }

.su-link-btn[b-rfbgezqfoq] {
    margin-top: 20px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--pub-font);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--pub-quiet);
    text-decoration: underline;
    cursor: pointer;
}
.su-link-btn:hover:enabled[b-rfbgezqfoq] { color: var(--pub-navy); }
.su-link-btn:disabled[b-rfbgezqfoq] { cursor: default; opacity: 0.6; }

/* ── Legal acceptance ───────────────────────────────────────────────── */

.su-legal[b-rfbgezqfoq] { list-style: none; margin: 26px 0 28px; padding: 0; }
.su-legal li[b-rfbgezqfoq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 10px;
    background: var(--pub-paper);
    border: 1px solid var(--pub-line-soft);
    border-radius: 12px;
}
.su-legal input[b-rfbgezqfoq] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    accent-color: var(--pub-accent);
    cursor: pointer;
}
.su-legal label[b-rfbgezqfoq] { font-size: 0.98rem; line-height: 1.5; color: var(--pub-ink); cursor: pointer; }
.su-legal a[b-rfbgezqfoq] { color: var(--pub-accent); font-weight: 700; text-decoration: none; }
.su-legal a:hover[b-rfbgezqfoq] { text-decoration: underline; }
.su-version[b-rfbgezqfoq] { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--pub-quiet); }

/* ── Messages ───────────────────────────────────────────────────────── */

.su-error[b-rfbgezqfoq],
.su-ok[b-rfbgezqfoq] {
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: var(--pub-radius-sm);
    border: 1px solid;
    border-left-width: 3px;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}
.su-error[b-rfbgezqfoq] { border-color: var(--pub-warn); background: rgba(180, 60, 60, 0.06); color: var(--pub-warn); }
.su-ok[b-rfbgezqfoq] { border-color: var(--pub-ok); background: rgba(61, 138, 94, 0.07); color: var(--pub-ok); }
.su-panel-center .su-error[b-rfbgezqfoq],
.su-panel-center .su-ok[b-rfbgezqfoq] { margin-top: 22px; }

.su-actions[b-rfbgezqfoq] { display: flex; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* Visually hidden but still announced. */
.su-sr[b-rfbgezqfoq] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 620px) {
    .su-hero[b-rfbgezqfoq] { padding: 44px 0 40px; }
    .su-body[b-rfbgezqfoq] { padding: 32px 0 64px; }
    .su-panel[b-rfbgezqfoq] { padding: 26px 22px 24px; }
    .su-row[b-rfbgezqfoq] { grid-template-columns: 1fr; gap: 0; }
    .su-step-name[b-rfbgezqfoq] { display: none; }
    .su-steps[b-rfbgezqfoq] { justify-content: center; gap: 0; margin-bottom: 26px; }
    .su-actions .fp-btn[b-rfbgezqfoq] { width: 100%; justify-content: center; }
}
/* /Components/Pages/SplitView.razor.rz.scp.css */
.split-view-container[b-2ghw66iesj] {
    display: flex;
    gap: 0;
    /* Fill the remaining height of the page's flex column (main-content) instead of a fixed vh calc,
       so there's no dead whitespace below and no overflow above. */
    flex: 1 1 auto;
    min-height: 320px;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}

.split-view-list[b-2ghw66iesj] {
    width: 21.25rem;
    min-width: 17.5rem;
    max-width: 25rem;
    border-right: 1px solid var(--bs-border-color);
    /* Column layout so the record list scrolls while the pager footer stays pinned at the bottom. */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bs-body-bg);
    flex-shrink: 0;
}

    .split-view-list .list-group[b-2ghw66iesj] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .split-view-list .list-group-item[b-2ghw66iesj] {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 0.6rem 1rem;
    }

        .split-view-list .list-group-item:first-child[b-2ghw66iesj] {
            border-top: 0;
        }

/* A column with the record nav as a header outside the scroll area, so only the body scrolls. Sticky inside the
   body would not cover the body's padding, and input-group buttons (z-index 2) would scroll over it. */
.split-view-detail[b-2ghw66iesj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--bs-body-bg);
}

.split-view-detail-nav[b-2ghw66iesj] {
    flex-shrink: 0;
}

.split-view-detail-body[b-2ghw66iesj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem;
}
/* /Components/Pages/TaskTimeline.razor.rz.scp.css */
/* ===== Base layout ===== */

.scheduler-page[b-hoygdadom5] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    min-height: 0;
}

.scheduler-container[b-hoygdadom5] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-fullscreen[b-hoygdadom5] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh !important;
}

.scheduler-fullscreen .scheduler-wrapper[b-hoygdadom5] {
    height: 0;
    flex: 1 1 0;
}

.scheduler-wrapper[b-hoygdadom5] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 0.5rem;
}

/* ===== Body: frozen labels + scrollable cells ===== */
.scheduler-body[b-hoygdadom5] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.scheduler-labels[b-hoygdadom5] {
    flex-shrink: 0;
    width: var(--label-w, 10rem);
    overflow: hidden;
    background: #fff;
    border-right: 2px solid #dee2e6;
    z-index: 3;
}

/* Body row labels on white for stronger text contrast on large screens (the header corner stays grey). */
.scheduler-labels .scheduler-resource-label[b-hoygdadom5] {
    background: #fff;
    font-weight: 600;
    color: #212529;
}

.scheduler-scroll-area[b-hoygdadom5] {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* ===== Timeline header ===== */
.scheduler-timeline[b-hoygdadom5] {
    display: flex;
    flex-shrink: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.scheduler-timeline-clip[b-hoygdadom5] {
    flex: 1;
    overflow: hidden;
}

.scheduler-timeline-cells[b-hoygdadom5] {
    display: flex;
    flex-direction: column;
}

.scheduler-timeline-cell[b-hoygdadom5] {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.5rem 0;
    border-right: 1px solid #ced4da;
    color: #212529;
}

.scheduler-timeline-cell-now[b-hoygdadom5] {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}

.scheduler-timeline-cell-day-start[b-hoygdadom5] {
    box-shadow: inset 2px 0 0 #ced4da;
    font-weight: 700;
}

/* ===== Week number row ===== */
.scheduler-week-number-row[b-hoygdadom5] {
    border-bottom: 1px solid #adb5bd;
}

/* Also carries the month band. A month cell spans its own columns, so a partial month at the edge of the
   window can be narrow - it truncates rather than spilling over its neighbour. */
.scheduler-week-number-cell[b-hoygdadom5] {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #212529;
    background: #ced4da;
    padding: 2px 0;
    border-right: 1px solid #adb5bd;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ===== Search highlight =====
   The search walks rows instead of filtering them, so the hits have to be visible against the rows that
   stay around them: every match gets a tint, the one currently walked to gets a border it cannot be
   confused with. Applied to the row in both panes (frozen labels + grid), which is why the selectors are
   loose about which element they land on. */
.scheduler-row-search-match[b-hoygdadom5] {
    background-color: rgba(255, 193, 7, 0.16) !important;
}

.scheduler-row-search-current[b-hoygdadom5] {
    background-color: rgba(255, 193, 7, 0.32) !important;
    box-shadow: inset 0 0 0 2px #ffc107;
}

/* ===== Weekday initial row (setting: Scheduler.ShowWeekdays) ===== */
/* One letter per date column, so it aligns with the columns rather than spanning them like the
   week-number / month bands above it. */
.scheduler-weekday-row[b-hoygdadom5] {
    border-bottom: 1px solid #ced4da;
}

.scheduler-weekday-cell[b-hoygdadom5] {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #495057;
    background: #eef0f2;
    padding: 1px 0;
    border-right: 1px solid #ced4da;
    flex-shrink: 0;
}

/* ===== Row label ===== */
.scheduler-resource-label[b-hoygdadom5] {
    flex-shrink: 0;
    width: var(--label-w, 10rem);
    min-width: var(--label-w, 10rem);
    max-width: var(--label-w, 10rem);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #f8f9fa;
    border-bottom: 1px solid #ced4da;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
}

/* Frozen-label sub-cells (case number + name). The label width is fixed; the
   case cell is fixed-width and the name cell flexes to fill the remainder. */
.tl-sub[b-hoygdadom5] {
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: stretch;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.tl-sub-case[b-hoygdadom5] {
    flex-shrink: 0;
    width: var(--case-w, 7rem);
    border-right: 1px solid #ced4da;
}

.tl-sub-flex[b-hoygdadom5] {
    flex: 1;
    min-width: 0;
}

/* Inline start-date + duration editor per RB lane (toggle: Timeline.Settings.RbInlineEdit). */
.tl-sub-edit[b-hoygdadom5] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
}

.tl-inline-date[b-hoygdadom5],
.tl-inline-dur[b-hoygdadom5] {
    font-size: 0.72rem;
    line-height: 1.2;
    padding: 1px 4px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    color: #2a3a4a;
}

.tl-inline-date[b-hoygdadom5] { width: 7.5rem; }
.tl-inline-dur[b-hoygdadom5] { width: 3rem; }
.tl-inline-end[b-hoygdadom5] { font-size: 0.8rem; color: #6c757d; white-space: nowrap; align-self: center; }

/* The unit the duration field is read in. It follows the view (hours only in the hour view), so it is
   spelled out next to the box rather than left to the tooltip. */
.tl-inline-unit[b-hoygdadom5] {
    font-size: 0.72rem;
    color: #6c757d;
    align-self: center;
    margin-left: -2px;
}

.tl-head[b-hoygdadom5] {
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}

/* ===== WorkTask grouped label column (one sub-row per ResourceBooking lane) ===== */
.scheduler-labels .scheduler-resource-label.tl-group[b-hoygdadom5] {
    align-items: stretch;
    overflow: visible;
}

/* WorkTask group: a compact title header stacked above the resource lanes. */
.tl-group-main[b-hoygdadom5] {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.tl-wt-header[b-hoygdadom5] {
    display: flex;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.tl-lanes[b-hoygdadom5] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.tl-lane-row[b-hoygdadom5] {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* The WorkTask identity (case + name) only appears on the first lane; continuation lanes leave it
   blank so the group reads as one block. The RB resource-or-type label appears on every lane. */
.tl-lane-row .tl-sub[b-hoygdadom5] {
    padding-top: 0;
    padding-bottom: 0;
}

.tl-wt-name[b-hoygdadom5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem;
}

/* Shown only when the address is what a search matched, so the row can say why it was found. */
.tl-wt-address[b-hoygdadom5] {
    color: #6c757d;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* What the search matched, wherever it appears in a row's text. */
.tl-hit[b-hoygdadom5] {
    background: #ffe08a;
    color: inherit;
    padding: 0;
    border-radius: 2px;
}

.tl-rb-label[b-hoygdadom5] {
    color: #6c757d;
    font-style: italic;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A demand (resource type, no person yet) is a muted placeholder. */
.tl-rb-label.tl-rb-demand[b-hoygdadom5] {
    opacity: 0.8;
}

/* The resource name doubles as the handle for changing who is booked. */
.tl-rb-pick[b-hoygdadom5] {
    cursor: pointer;
    border-radius: 3px;
    padding: 0 2px;
    margin-left: -2px;
}

.tl-rb-pick:hover[b-hoygdadom5] {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

/* First name shown inside the inline date-editor row: bounded so it sits beside the date rather than
   pushing it out, and never shrinks away entirely. */
.tl-rb-firstname[b-hoygdadom5] {
    flex: 0 1 auto;
    max-width: 6rem;
    margin-right: 4px;
}

/* Per-lane "remove this booking" affordance. Hidden until the lane is hovered, so a group with several
   resources is not a column of x's - and it keeps its width reserved either way, so revealing it does
   not shift the lane's contents. */
.tl-lane-remove[b-hoygdadom5] {
    flex-shrink: 0;
    width: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #adb5bd;
    cursor: pointer;
    visibility: hidden;
}

.tl-lane-row:hover .tl-lane-remove[b-hoygdadom5] {
    visibility: visible;
}

.tl-lane-remove:hover[b-hoygdadom5] {
    color: #dc3545;
}

/* Inline "+ add line" affordance per WorkTask group. */
.tl-add[b-hoygdadom5] {
    flex-shrink: 0;
    width: 1.5rem;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    cursor: pointer;
    border-left: 1px solid #ced4da;
}

.tl-add:hover[b-hoygdadom5] {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

/* Inline "add resource" popover: resource + start + duration, anchored to the group's top-right
   so it overlays the timeline (the group is position:relative + overflow:visible) instead of
   growing the row, which would break label/grid row-height alignment. */
.tl-inline-add[b-hoygdadom5] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #adb5bd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    min-width: 24rem;
}

.tl-inline-add[b-hoygdadom5]  .position-relative {
    flex: 1;
    min-width: 9rem;
}

.tl-inline-add .btn[b-hoygdadom5] {
    padding: 1px 6px;
    line-height: 1.2;
}

.tl-head:hover[b-hoygdadom5] {
    background: rgba(13, 110, 253, 0.08);
}

/* Resize handle on label column edge */
.timeline-label-resize-handle[b-hoygdadom5] {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 4;
    background: transparent;
}

.timeline-label-resize-handle:hover[b-hoygdadom5],
.timeline-label-resize-handle:active[b-hoygdadom5] {
    background: rgba(13, 110, 253, 0.3);
}

.scheduler-corner[b-hoygdadom5] {
    border-bottom: none;
    border-right: 2px solid #dee2e6;
}

/* ===== Grid body ===== */
.scheduler-grid-body[b-hoygdadom5] {
    position: relative;
    /* Size to the full timeline width so each row's border-bottom (the horizontal grid line) spans the
       whole scrollable area, not just the viewport width at first paint. Without this the rows are only
       as wide as the visible area and lines disappear past the initial viewport when scrolling right. */
    width: max-content;
    min-width: 100%;
}

/* ===== Row ===== */
.scheduler-row[b-hoygdadom5] {
    display: flex;
    border-bottom: var(--grid-line-w, 1px) solid var(--grid-line-color, #ced4da);
}

.scheduler-row:last-child[b-hoygdadom5] {
    border-bottom: none;
}

/* ===== Row cells container ===== */
.scheduler-row-cells[b-hoygdadom5] {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #fff;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--col-w) - 1px),
        var(--grid-line-color, #ced4da) calc(var(--col-w) - 1px),
        var(--grid-line-color, #ced4da) var(--col-w)
    );
}

.scheduler-day-start-marker[b-hoygdadom5] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--grid-line-color, #ced4da);
    pointer-events: none;
    z-index: 0;
}

/* "Today / now" marker: a full-height red line spanning all task rows, inside the scrolling grid body
   so it tracks the columns. The frozen label column is a separate pane to the left, so no offset is needed. */
.scheduler-today-line[b-hoygdadom5] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #dc3545;
    pointer-events: none;
    z-index: 5;
}

/* Weekend (Sat/Sun) columns in day view — darker, header-like tint + a clear band behind the bars. */
.scheduler-timeline-cell-weekend[b-hoygdadom5] {
    background: #d5d9de;
}

.scheduler-weekend-col[b-hoygdadom5] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 0;
}

/* Public holidays in day view — marked like weekends (a touch darker so a blocked weekday stands out). */
.scheduler-timeline-cell-holiday[b-hoygdadom5] {
    background: #cfd3d9;
}

.scheduler-holiday-col[b-hoygdadom5] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.11);
    pointer-events: none;
    z-index: 0;
}

/* Bars selected via ctrl-click or lasso, for a group move. */
.scheduler-task-selected[b-hoygdadom5] {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* ===== Task bar ===== */
.scheduler-task[b-hoygdadom5] {
    position: absolute;
    /* A thin dark edge: bars of the same colour sitting next to each other otherwise read as one long
       block, and a short booking has too little colour of its own to stand out at all. */
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    font-size: calc(0.75rem + var(--task-fs-boost, 0px));
    font-weight: var(--task-fw, 400);
    padding: 0 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.1s ease;
    user-select: none;
    z-index: 1;
}

.scheduler-task:hover[b-hoygdadom5] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 5;
}

.scheduler-task-dragging[b-hoygdadom5] {
    opacity: 0.7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    z-index: 10 !important;
    cursor: grabbing;
}

.scheduler-task[b-hoygdadom5]::before,
.scheduler-task[b-hoygdadom5]::after {
    content: '';
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
}

.scheduler-task[b-hoygdadom5]::before {
    left: 0;
}

.scheduler-task[b-hoygdadom5]::after {
    right: 0;
}

.scheduler-task-title[b-hoygdadom5] {
    pointer-events: none;
}

/* A bar too narrow for its own label (a one-day booking in a month-wide view is a few pixels) keeps the
   label beside it instead of clipping it to nothing. The label leaves the coloured bar, so it carries its
   own colour and a white halo to stay readable over grid lines and whatever sits behind it. */
.scheduler-task-narrow[b-hoygdadom5] {
    overflow: visible;
}

.scheduler-task-narrow .scheduler-task-title[b-hoygdadom5] {
    position: absolute;
    left: calc(100% + 4px);
    top: 0;
    color: #2a3a4a;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    z-index: 2;
}

/* ===== Settings panel ===== */
.scheduler-settings-backdrop[b-hoygdadom5] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.scheduler-settings-panel[b-hoygdadom5] {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 1041;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    min-width: 260px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ===== Task Timeline - status-based task block colors ===== */

/* Attention / Locked flag colors (trump status colors) */
[b-hoygdadom5] .task-timeline-attention {
    background: #fd7e14 !important;
    color: #fff !important;
}

[b-hoygdadom5] .task-timeline-locked {
    background: #dc3545 !important;
    color: #fff !important;
}

/* New - blue */
[b-hoygdadom5] .task-timeline-new {
    background: #2196F3 !important;
    color: #fff !important;
}

/* In Progress - green */
[b-hoygdadom5] .task-timeline-inprogress {
    background: #4CAF50 !important;
    color: #fff !important;
}

/* On Hold - orange */
[b-hoygdadom5] .task-timeline-onhold {
    background: #FF9800 !important;
    color: #fff !important;
}

/* Completed - muted green */
[b-hoygdadom5] .task-timeline-completed {
    background: #81C784 !important;
    color: #fff !important;
    opacity: 0.7;
}

/* Cancelled - red */
[b-hoygdadom5] .task-timeline-cancelled {
    background: #F44336 !important;
    color: #fff !important;
    opacity: 0.6;
}

/* Planned - light blue */
[b-hoygdadom5] .task-timeline-planned {
    background: #90CAF9 !important;
    color: #1a1a1a !important;
}

/* Unconfirmed - grey */
[b-hoygdadom5] .task-timeline-unconfirmed {
    background: #BDBDBD !important;
    color: #333 !important;
}

/* Awaiting (Customer / Subcontractor) - amber */
[b-hoygdadom5] .task-timeline-awaiting {
    background: #FFA726 !important;
    color: #fff !important;
}

/* Default fallback */
[b-hoygdadom5] .task-timeline-default {
    background: #78909C !important;
    color: #fff !important;
}

/* ===== Context menu ===== */
.scheduler-context-backdrop[b-hoygdadom5] {
    position: fixed;
    inset: 0;
    z-index: 1049;
}

.scheduler-context-menu[b-hoygdadom5] {
    position: fixed;
    z-index: 1050;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.25rem 0;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.scheduler-context-menu-header[b-hoygdadom5] {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #ced4da;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.scheduler-context-menu-item[b-hoygdadom5] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    color: #212529;
}

.scheduler-context-menu-item:hover[b-hoygdadom5] {
    background: #f0f0f0;
}

.scheduler-context-menu-item.active[b-hoygdadom5] {
    background: #e8f0fe;
    font-weight: 600;
}

/* ===== Month calendar ===== */
.scheduler-month-wrapper[b-hoygdadom5] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-month[b-hoygdadom5] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-month-header[b-hoygdadom5] {
    display: grid;
    grid-template-columns: 2rem repeat(7, 1fr);
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.scheduler-month-dow[b-hoygdadom5] {
    text-align: center;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.5rem 0;
    color: #495057;
}

.scheduler-month-week-num-header[b-hoygdadom5] {
    border-right: 1px solid #dee2e6;
}

.scheduler-month-week-num[b-hoygdadom5] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #343a40;
    background: #e9ecef;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    cursor: pointer;
    user-select: none;
    transition: color 0.1s, background 0.1s;
}

    .scheduler-month-week-num:hover[b-hoygdadom5] {
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.06);
    }

.scheduler-month-row:last-child .scheduler-month-week-num[b-hoygdadom5] {
    border-bottom: none;
}

.scheduler-month-body[b-hoygdadom5] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-month-row[b-hoygdadom5] {
    display: grid;
    grid-template-columns: 2rem repeat(7, 1fr);
    flex: 1;
    min-height: 0;
}

.scheduler-month-cell[b-hoygdadom5] {
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    padding: 0.25rem 0.4rem;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .scheduler-month-cell:last-child[b-hoygdadom5] {
        border-right: none;
    }

.scheduler-month-row:last-child .scheduler-month-cell[b-hoygdadom5] {
    border-bottom: none;
}

.scheduler-month-cell-other[b-hoygdadom5] {
    background: #fafafa;
    color: #adb5bd;
}

.scheduler-month-cell-today[b-hoygdadom5] {
    background: rgba(13, 110, 253, 0.05);
}

/* A public holiday or one of the tenant's own closed days - shaded like the weekend columns in day view,
   so a plan drawn across the Christmas shutdown shows what it is crossing. */
.scheduler-month-cell-closed[b-hoygdadom5] {
    background: rgba(0, 0, 0, 0.06);
}

.scheduler-month-day-num[b-hoygdadom5] {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: inherit;
    display: inline-block;
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0 2px;
    transition: color 0.1s, background 0.1s;
}

    .scheduler-month-day-num:hover[b-hoygdadom5] {
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.08);
    }

.scheduler-month-cell-today .scheduler-month-day-num[b-hoygdadom5] {
    color: #0d6efd;
}

.scheduler-month-task-list[b-hoygdadom5] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

    .scheduler-month-task-list[b-hoygdadom5]::-webkit-scrollbar {
        width: 3px;
    }

    .scheduler-month-task-list[b-hoygdadom5]::-webkit-scrollbar-thumb {
        background: #ced4da;
        border-radius: 2px;
    }

    .scheduler-month-task-list[b-hoygdadom5]::-webkit-scrollbar-track {
        background: transparent;
    }

.scheduler-month-task[b-hoygdadom5] {
    height: var(--month-task-h, 18px);
    line-height: var(--month-task-h, 18px);
    font-size: calc(var(--month-task-h, 18px) * 0.55);
    padding: 0 4px;
    margin-bottom: 2px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

    .scheduler-month-task:hover[b-hoygdadom5] {
        opacity: 0.85;
    }
/* /Components/Pages/Tour.razor.rz.scp.css */
/* Screenshot tour. Hero, container and the closing panel come from the shared .fp-*
   vocabulary in wwwroot/css/feature-pages.css; this file carries the area index, the
   screenshot grid and the lightbox. */

/* The area index is a quiet row of text links rather than a row of pills: it is navigation
   within the page, and a strip of rounded chips reads as template chrome. */
.tr-jump[b-1sc9rt76js] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--pub-line);
}
.tr-jump a[b-1sc9rt76js] {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--pub-navy);
    text-decoration: none;
}
.tr-jump a:hover[b-1sc9rt76js] { color: var(--pub-accent); }

.tr-area[b-1sc9rt76js] {
    padding: 64px 0 8px;
    scroll-margin-top: 90px;
}
.tr-area h2[b-1sc9rt76js] { margin-bottom: 10px; }
.tr-intro[b-1sc9rt76js] {
    margin: 0 0 28px;
    max-width: 62ch;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--pub-muted);
}

.tr-grid[b-1sc9rt76js] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.tr-shot[b-1sc9rt76js] {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.tr-shot:hover[b-1sc9rt76js] { border-color: var(--pub-accent-soft); box-shadow: var(--pub-shadow); }
.tr-shot button[b-1sc9rt76js] {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--pub-line-soft);
    background: var(--pub-paper);
    cursor: zoom-in;
}
.tr-shot button:focus-visible[b-1sc9rt76js] { outline: 2px solid var(--pub-accent); outline-offset: -2px; }
.tr-shot img[b-1sc9rt76js] {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: top left;
}
.tr-shot figcaption[b-1sc9rt76js] {
    padding: 15px 18px 17px;
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--pub-muted);
}

.tr-lightbox[b-1sc9rt76js] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(22, 41, 60, 0.9);
    cursor: zoom-out;
}
.tr-lightbox img[b-1sc9rt76js] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}
.tr-close[b-1sc9rt76js] {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
}
.tr-close svg[b-1sc9rt76js] { width: 20px; height: 20px; }
.tr-close:hover[b-1sc9rt76js] { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 620px) {
    .tr-area[b-1sc9rt76js] { padding-top: 48px; }
    .tr-grid[b-1sc9rt76js] { grid-template-columns: 1fr; }
    .tr-lightbox[b-1sc9rt76js] { padding: 12px; }
}
/* /Components/Shared/ActivitySidePanel.razor.rz.scp.css */
.side-panel[b-wb6s73smtn] {
    flex: 0 0 440px;
    width: 440px;
    max-width: 92vw;
    height: 100vh;
    background: #fff;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.06);
    z-index: 1030;
}

.side-panel-header[b-wb6s73smtn] {
    padding: var(--space-md, 1rem);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-light, #f8f9fa);
}

.side-panel-tabs[b-wb6s73smtn] {
    padding: 0.25rem var(--space-md, 1rem) 0;
    background: var(--bs-light, #f8f9fa);
    overflow-x: auto;
    overflow-y: hidden;
}

.side-panel-tabs .nav-link[b-wb6s73smtn] {
    max-width: 12rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.side-panel-body[b-wb6s73smtn] {
    padding: var(--space-md, 1rem);
    min-height: 0;
}

@media (max-width: 768px) {
    .side-panel[b-wb6s73smtn] {
        flex-basis: 100vw;
        width: 100vw;
        max-width: 100vw;
    }
}
/* /Components/Shared/CalendarView.razor.rz.scp.css */
/* The component is a flex column so its grid can fill the height the page gives it. */
.cal-root[b-0p5bspxjxh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.cal-scroll[b-0p5bspxjxh] {
    overflow: auto;
    background: var(--bs-body-bg, #fff);
    /* Fills whatever the parent column leaves, instead of the old fixed 72vh that left dead space below
       on tall screens. min-height:0 is what lets a flex child shrink enough to scroll. Same shape as
       ResourceScheduler.razor.css. */
    flex: 1 1 0;
    min-height: 0;
}

/* Month mode has no inner scroller of its own, so its wrapper takes the remaining height and scrolls. */
.cal-month-wrap[b-0p5bspxjxh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

.cal-grid[b-0p5bspxjxh] {
    min-width: fit-content;
}

/* Header sticks while the day grid scrolls. */
.cal-head[b-0p5bspxjxh] {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cal-body[b-0p5bspxjxh] {
    display: flex;
}

.cal-gutter[b-0p5bspxjxh] {
    width: 56px;
    flex: 0 0 56px;
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}

.cal-hour-label[b-0p5bspxjxh] {
    font-size: .7rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: right;
    padding-right: .35rem;
    /* Nudge so the label sits against its grid line. */
    transform: translateY(-.4em);
}

/* One group per person; days sit inside it, giving side-by-side calendars. */
.cal-person-group[b-0p5bspxjxh] {
    flex: 1 1 0;
    min-width: calc(var(--cal-days) * 92px);
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}

.cal-person-name[b-0p5bspxjxh] {
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    padding: .25rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cal-day-heads[b-0p5bspxjxh],
.cal-day-cols[b-0p5bspxjxh] {
    display: flex;
}

.cal-day-head[b-0p5bspxjxh] {
    flex: 1 1 0;
    text-align: center;
    padding: .25rem 0;
    border-right: 1px solid var(--bs-border-color, #e9ecef);
}

.cal-day-head.today[b-0p5bspxjxh] {
    background: rgba(13, 110, 253, .1);
}

.cal-day-head.weekend[b-0p5bspxjxh],
.cal-day-col.weekend[b-0p5bspxjxh] {
    background: rgba(0, 0, 0, .04);
}

.cal-day-col[b-0p5bspxjxh] {
    flex: 1 1 0;
    position: relative;
    border-right: 1px solid var(--bs-border-color, #e9ecef);
    cursor: pointer;
}

.cal-hour-line[b-0p5bspxjxh] {
    border-bottom: 1px solid var(--bs-border-color, #eef1f4);
}

.cal-event[b-0p5bspxjxh] {
    position: absolute;
    overflow: hidden;
    text-align: left;
    padding: 1px 4px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 4px;
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    font-size: .72rem;
    line-height: 1.15;
    cursor: pointer;
}

.cal-event:hover[b-0p5bspxjxh] {
    filter: brightness(.96);
}

/* Busy time from Microsoft 365. Deliberately unlike a CRM event: no colour of its own, hatched, and not
   clickable - it says "this time is taken" and there is nothing behind it to open. The hatching is what
   distinguishes it at a glance from a pale CRM source colour. */
.cal-event-external[b-0p5bspxjxh] {
    cursor: default;
    color: #495057;
    border-style: dashed;
    border-color: rgba(0, 0, 0, .25);
    background: repeating-linear-gradient(
        45deg,
        rgba(108, 117, 125, .13),
        rgba(108, 117, 125, .13) 5px,
        rgba(108, 117, 125, .04) 5px,
        rgba(108, 117, 125, .04) 10px
    );
}

.cal-event-external:hover[b-0p5bspxjxh] {
    filter: none;
}

/* Dragged bar floats above its neighbours and ignores hit-testing quirks while moving. */
.cal-event.cal-dragging[b-0p5bspxjxh] {
    opacity: .85;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    cursor: grabbing;
}

.cal-event-resize[b-0p5bspxjxh] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    cursor: ns-resize;
}

.cal-event-resize:hover[b-0p5bspxjxh] {
    background: rgba(0, 0, 0, .15);
}

.cal-event-time[b-0p5bspxjxh] {
    font-weight: 600;
    margin-right: .25rem;
}

.cal-event-title[b-0p5bspxjxh] {
    /* Wrap within the block rather than clipping to one line where there is room. */
    word-break: break-word;
}

/* ── Month ── */
/* Weekday header row: its own height, not an equal share of the wrapper. Sharing the flex with the
   grid (both flex:1 1 0) stretched this single row to half the calendar, leaving a tall empty band
   above the days. */
.cal-month-head[b-0p5bspxjxh] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 0 0 auto;
}

/* The day grid takes the height the header leaves; its rows share that space so a month fills the
   page instead of stopping short. */
.cal-month-grid[b-0p5bspxjxh] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1 1 0;
    min-height: 0;
    grid-auto-rows: 1fr;
}

.cal-month-head-cell[b-0p5bspxjxh] {
    text-align: center;
    padding: .35rem 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cal-month-cell[b-0p5bspxjxh] {
    min-height: 108px;
    padding: .25rem;
    border-right: 1px solid var(--bs-border-color, #e9ecef);
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
    cursor: pointer;
}

.cal-month-cell.muted[b-0p5bspxjxh] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6c757d);
}

.cal-month-cell.today[b-0p5bspxjxh] {
    background: rgba(13, 110, 253, .08);
}

.cal-month-cell.weekend[b-0p5bspxjxh] {
    background: rgba(0, 0, 0, .03);
}

.cal-month-event[b-0p5bspxjxh] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 3px;
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    font-size: .7rem;
    padding: 1px 4px;
    margin-bottom: 2px;
    cursor: pointer;
}

.cal-month-more[b-0p5bspxjxh] {
    font-size: .68rem;
}

/* ── Right-click menu on the viewer's own external meetings ──────────────
   Fixed so no ancestor's overflow can clip it, above the grid but below modals. */
.cal-menu-backdrop[b-0p5bspxjxh] {
    position: fixed;
    inset: 0;
    z-index: 1080;
}

.cal-menu[b-0p5bspxjxh] {
    position: fixed;
    z-index: 1081;
    min-width: 13rem;
    padding: .25rem;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.cal-menu-item[b-0p5bspxjxh] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .35rem .6rem;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    font-size: .85rem;
    text-align: left;
}

.cal-menu-item:hover[b-0p5bspxjxh] {
    background: var(--bs-secondary-bg, #e9ecef);
}

/* A block the viewer may act on: the only external blocks with a pointer cursor. */
.cal-event-trackable[b-0p5bspxjxh] {
    cursor: context-menu;
}
/* /Components/Shared/CampaignResultsPanel.razor.rz.scp.css */
/* Plain CSS, not Razor: media queries here are @media, never @@media.
   See Docs/blazor-ui-architecture.md. */

.crp[b-qooprz2y68] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.crp-loading[b-qooprz2y68] {
    padding: 40px;
    text-align: center;
    color: #9ca3af;
}

.crp-muted[b-qooprz2y68] {
    color: #6b7280;
    font-size: 14px;
}

/* ── Funnel ──────────────────────────────────────────────────────────── */

.crp-funnel[b-qooprz2y68] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.crp-step[b-qooprz2y68] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 14px;
    background: #fff;
}

.crp-step-value[b-qooprz2y68] {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: #1f3b57;
}

.crp-step-label[b-qooprz2y68] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.crp-step-rate[b-qooprz2y68] {
    margin-top: 2px;
    font-size: 12px;
    color: #8b7355;
}

/* ── Money cards ─────────────────────────────────────────────────────── */

.crp-money[b-qooprz2y68] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.crp-card[b-qooprz2y68] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.crp-card-label[b-qooprz2y68] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.crp-card-value[b-qooprz2y68] {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2937;
}

.crp-card-note[b-qooprz2y68] {
    font-size: 12px;
    color: #9ca3af;
}

.crp-card.crp-good[b-qooprz2y68] {
    border-color: #bfe3cd;
    background: #f4fbf7;
}

.crp-card.crp-good .crp-card-value[b-qooprz2y68] {
    color: #2f7d52;
}

.crp-card.crp-bad[b-qooprz2y68] {
    border-color: #f3cfcf;
    background: #fdf6f6;
}

.crp-card.crp-bad .crp-card-value[b-qooprz2y68] {
    color: #b03e3e;
}

.crp-hint[b-qooprz2y68] {
    margin: 0;
    font-size: 12.5px;
    color: #9ca3af;
}

@media (max-width: 767px) {
    .crp-funnel[b-qooprz2y68] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Shared/EmailDesigner.razor.rz.scp.css */
/* Scoped styles for EmailDesigner.

   Note this file is plain CSS, not Razor: a media query here is @media, never @@media.
   See "Scoped CSS: @media, never @@media" in Docs/blazor-ui-architecture.md - the escaped form is
   emitted verbatim, the browser rejects the at-rule, and the whole block is dropped silently. */

.ed[b-ejrj66yyug] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */

.ed-bar[b-ejrj66yyug] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.ed-add[b-ejrj66yyug] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ed-add-btn[b-ejrj66yyug] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
}

.ed-add-btn:hover[b-ejrj66yyug] {
    border-color: #1f3b57;
    color: #1f3b57;
}

.ed-bar-right[b-ejrj66yyug] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ed-toggle[b-ejrj66yyug],
.ed-device[b-ejrj66yyug] {
    padding: 5px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
}

.ed-toggle.on[b-ejrj66yyug],
.ed-device.on[b-ejrj66yyug] {
    background: #1f3b57;
    border-color: #1f3b57;
    color: #fff;
}

.ed-devices[b-ejrj66yyug] {
    display: flex;
    gap: 2px;
}

/* ── Design settings ─────────────────────────────────────────────────── */

.ed-settings[b-ejrj66yyug] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
    background: #fbfbfa;
}

.ed-settings label[b-ejrj66yyug] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ed-settings input[type=color][b-ejrj66yyug] {
    width: 100%;
    height: 30px;
    padding: 1px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: #fff;
}

.ed-settings select[b-ejrj66yyug] {
    padding: 5px 7px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 13px;
    text-transform: none;
    font-weight: 400;
    color: #1f2937;
}

.ed-settings .ed-wide[b-ejrj66yyug] {
    grid-column: span 2;
}

/* ── Panes ───────────────────────────────────────────────────────────── */

.ed-panes[b-ejrj66yyug] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}

.ed-blocks[b-ejrj66yyug] {
    padding: 10px;
    overflow-y: auto;
    border-right: 1px solid #dee2e6;
    max-height: 620px;
}

.ed-empty[b-ejrj66yyug] {
    padding: 48px 16px;
    text-align: center;
    color: #9ca3af;
}

.ed-empty i[b-ejrj66yyug] {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

.ed-empty p[b-ejrj66yyug] {
    margin: 0;
    font-size: 13px;
}

.ed-block[b-ejrj66yyug] {
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    margin-bottom: 6px;
    background: #fff;
    cursor: pointer;
}

.ed-block.sel[b-ejrj66yyug] {
    border-color: #1f3b57;
    box-shadow: 0 0 0 2px rgba(31, 59, 87, .1);
}

.ed-block-head[b-ejrj66yyug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
}

.ed-block-name[b-ejrj66yyug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.ed-block-actions[b-ejrj66yyug] {
    display: flex;
    gap: 1px;
}

.ed-block-actions button[b-ejrj66yyug] {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    cursor: pointer;
}

.ed-block-actions button:hover:not(:disabled)[b-ejrj66yyug] {
    background: #f3f4f6;
    color: #1f3b57;
}

.ed-block-actions button.danger:hover:not(:disabled)[b-ejrj66yyug] {
    background: #fee2e2;
    color: #b91c1c;
}

.ed-block-actions button:disabled[b-ejrj66yyug] {
    opacity: .3;
    cursor: default;
}

.ed-block-summary[b-ejrj66yyug] {
    padding: 0 9px 8px;
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Property fields ─────────────────────────────────────────────────── */

.ed-props[b-ejrj66yyug] {
    padding: 4px 9px 10px;
    border-top: 1px solid #f3f4f6;
    cursor: default;
}

.ed-f[b-ejrj66yyug] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ed-f input[type=text][b-ejrj66yyug],
.ed-f input[type=url][b-ejrj66yyug],
.ed-f select[b-ejrj66yyug] {
    padding: 6px 8px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #1f2937;
}

.ed-f input[type=color][b-ejrj66yyug] {
    width: 100%;
    height: 30px;
    padding: 1px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: #fff;
}

.ed-f input[type=range][b-ejrj66yyug] {
    accent-color: #1f3b57;
}

.ed-f small[b-ejrj66yyug] {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #9ca3af;
}

.ed-f-row[b-ejrj66yyug] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ed-cols[b-ejrj66yyug] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ed-col-h[b-ejrj66yyug] {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

/* ── Preview ─────────────────────────────────────────────────────────── */

.ed-preview[b-ejrj66yyug] {
    padding: 14px;
    background: #eceae6;
    overflow-y: auto;
    max-height: 620px;
}

.ed-preview-frame[b-ejrj66yyug] {
    margin: 0 auto;
    width: 100%;
    max-width: 680px;
    height: 100%;
    min-height: 560px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    transition: max-width .15s ease;
}

/* The phone preview is a real 375px viewport, not a scaled-down desktop one: the media query in the
   rendered mail keys off viewport width, so scaling would show the desktop layout shrunk rather than
   the layout a phone actually gets. */
.ed-preview-frame.mobile[b-ejrj66yyug] {
    max-width: 375px;
}

.ed-preview-frame iframe[b-ejrj66yyug] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    border: 0;
}

@media (max-width: 991px) {
    .ed-panes[b-ejrj66yyug] {
        grid-template-columns: 1fr;
    }

    .ed-blocks[b-ejrj66yyug] {
        border-right: 0;
        border-bottom: 1px solid #dee2e6;
        max-height: none;
    }
}
/* /Components/Shared/EntityFilterBuilder.razor.rz.scp.css */
/* Plain CSS, not Razor: media queries here are @media, never @@media.
   See Docs/blazor-ui-architecture.md. */

.efb-row[b-hcv6j3k7t8] {
    display: grid;
    grid-template-columns: 2fr 2fr 4fr auto;
    gap: 8px;
    align-items: start;
    margin-bottom: 8px;
}

/* An operator that needs no value takes the value column too, so the row does not leave a hole. */
.efb-row .efb-wide[b-hcv6j3k7t8] {
    grid-column: span 2;
}

.efb-muted[b-hcv6j3k7t8] {
    font-size: 13px;
    color: #6b7280;
}

@media (max-width: 767px) {
    .efb-row[b-hcv6j3k7t8] {
        grid-template-columns: 1fr 1fr auto;
    }

    .efb-row .efb-wide[b-hcv6j3k7t8] {
        grid-column: span 1;
    }
}
/* /Components/Shared/EntityMap.razor.rz.scp.css */
/* Fills whatever the host page gives it; the page owns the layout, the component owns the canvas. */
.map-canvas[b-lbcunhqcws] {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
}
/* /Components/Shared/FieldHelpTooltip.razor.rz.scp.css */
.field-help-tooltip[b-jav6xlzjhy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    cursor: help;
    color: var(--bs-secondary);
    font-size: 0.8em;
}

.field-help-tooltip-text[b-jav6xlzjhy] {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-dark);
    color: #fff;
    font-size: 0.8rem;
    font-weight: normal;
    line-height: 1.4;
    border-radius: 0.375rem;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    z-index: 1080;
    text-align: left;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.field-help-tooltip-text[b-jav6xlzjhy]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 12px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--bs-dark) transparent transparent transparent;
}

.field-help-tooltip:hover .field-help-tooltip-text[b-jav6xlzjhy],
.field-help-tooltip:focus .field-help-tooltip-text[b-jav6xlzjhy] {
    display: block;
}
/* /Components/Shared/HelpButton.razor.rz.scp.css */
.help-fab[b-x8wvh90r1b] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background-color: var(--ampleo-primary, #2A4D69);
    color: #fff;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 1050;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.help-fab:hover[b-x8wvh90r1b] {
    transform: scale(1.1);
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.3);
}

.help-fab:focus-visible[b-x8wvh90r1b] {
    outline: 2px solid var(--ampleo-primary, #2A4D69);
    outline-offset: 2px;
}
/* /Components/Shared/HelpGuide.razor.rz.scp.css */
.help-guide-bar[b-3cs5rfipzg] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1070;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    font-size: 0.9rem;
}
/* /Components/Shared/HelpPanel.razor.rz.scp.css */
.help-panel[b-igqtn5m1kv] {
    position: fixed;
    top: 0;
    right: -22.5rem;
    width: 21.25rem;
    height: 100vh;
    background: var(--bs-body-bg, #fff);
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
    z-index: 1055;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}

.help-panel.open[b-igqtn5m1kv] {
    right: 0;
}

.help-panel-header[b-igqtn5m1kv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.help-panel-body[b-igqtn5m1kv] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.help-task-item[b-igqtn5m1kv] {
    margin-bottom: 0.5rem;
}
/* /Components/Shared/MatrixGrid.razor.rz.scp.css */
.matrix-grid[b-yb0sby2xh5] {
    font-size: 0.85rem;
}

.matrix-row-header[b-yb0sby2xh5] {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matrix-thead-group th[b-yb0sby2xh5] {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-table-bg, #f8f9fa);
}

.matrix-thead-group .matrix-row-header[b-yb0sby2xh5] {
    z-index: 4;
}

.matrix-thead-cols th[b-yb0sby2xh5] {
    position: sticky;
    top: 28px;
    z-index: 2;
    background-color: var(--bs-table-bg, #f8f9fa);
}

.matrix-thead-cols .matrix-row-header[b-yb0sby2xh5] {
    z-index: 4;
}

thead .matrix-row-header[b-yb0sby2xh5] {
    background-color: var(--bs-table-bg, #f8f9fa);
    z-index: 3;
}

.matrix-settings-panel[b-yb0sby2xh5] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1041;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    min-width: 260px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.matrix-group-tr[b-yb0sby2xh5] {
    cursor: pointer;
}

.matrix-group-label[b-yb0sby2xh5] {
    font-weight: 600;
    background-color: var(--bs-table-bg, #f8f9fa);
    border-right-color: transparent !important;
}

.matrix-group-fill[b-yb0sby2xh5] {
    background-color: var(--bs-table-bg, #f8f9fa);
    border-left-color: transparent !important;
}

.matrix-group-header[b-yb0sby2xh5] {
    background-color: var(--ampleo-neutral, #f0f0f0);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.matrix-cell-input[b-yb0sby2xh5] {
    width: 100%;
    padding: 0.15rem 0.25rem;
    font-size: 0.85rem;
    text-align: center;
    border-radius: 0;
}

.matrix-cell-input:focus[b-yb0sby2xh5] {
    background-color: rgba(42, 77, 105, 0.06) !important;
    box-shadow: inset 0 0 0 2px var(--ampleo-primary, #2A4D69);
    outline: none;
}

.matrix-cell-input[b-yb0sby2xh5]::-webkit-inner-spin-button,
.matrix-cell-input[b-yb0sby2xh5]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.matrix-cell-input[type=number][b-yb0sby2xh5] {
    -moz-appearance: textfield;
}

.matrix-subtotal-row td[b-yb0sby2xh5] {
    background-color: #f0f4f7;
    border-top: 2px solid #dee2e6;
    font-size: 0.8rem;
}

.matrix-subtotal-cell[b-yb0sby2xh5] {
    color: var(--ampleo-primary, #2A4D69);
}

.matrix-grand-total-row td[b-yb0sby2xh5] {
    background-color: #e8ecf0;
    font-size: 0.8rem;
}

.matrix-grand-total-cell[b-yb0sby2xh5] {
    color: var(--ampleo-primary, #2A4D69);
}
/* /Components/Shared/NotificationNavItem.razor.rz.scp.css */
.notif-toast[b-cwvitfvh38] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    max-width: 320px;
    cursor: pointer;
    background: var(--bs-body-bg, #fff);
    animation: notif-toast-in-b-cwvitfvh38 0.2s ease-out;
}

.notif-toast:hover[b-cwvitfvh38] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

@keyframes notif-toast-in-b-cwvitfvh38 {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/PortalConversationPanel.razor.rz.scp.css */
/* The message thread. Bounded to roughly the viewport so a long history scrolls inside the panel instead of
   running the whole form down the page; the composer below it stays put. Scrolled to the newest message on
   load, so older messages are the ones that scroll up out of view. */
.portal-conversation-thread[b-ibc5forfmm] {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* The inline reply editor. A contenteditable div styled to read like a form control. */
.portal-conversation-editor[b-ibc5forfmm] {
    min-height: 4.5rem;
    max-height: 20rem;
    overflow-y: auto;
    white-space: pre-wrap;
    cursor: text;
}

/* Placeholder for the empty editor - contenteditable has none of its own. */
.portal-conversation-editor:empty[b-ibc5forfmm]::before {
    content: attr(data-placeholder);
    color: var(--bs-secondary-color);
}

/* Feedback while a picture is dragged over the editor; the class is toggled by the composer script. */
.portal-conversation-editor.portal-composer--dropping[b-ibc5forfmm] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 2px;
}

/* Pictures are inserted into the editor by the script, so they carry no scoped attribute - ::deep reaches them. */
.portal-conversation-editor[b-ibc5forfmm]  img {
    max-height: 12rem;
    max-width: 100%;
    border-radius: .375rem;
    vertical-align: top;
    margin: .15rem 0;
}

/* Thread pictures open a preview in place rather than a new tab, so they read as clickable. */
.portal-conversation-thumb[b-ibc5forfmm] {
    cursor: zoom-in;
}

/* In-page full-size preview. Fixed overlay above the app; sits below Bootstrap's toast layer (1090). */
.portal-image-lightbox[b-ibc5forfmm] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    cursor: zoom-out;
}

.portal-image-lightbox img[b-ibc5forfmm] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: .375rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    cursor: default;
}

.portal-image-lightbox:focus[b-ibc5forfmm] {
    outline: none;
}

.portal-image-lightbox-close[b-ibc5forfmm] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.portal-image-lightbox-close:hover[b-ibc5forfmm] {
    background: rgba(255, 255, 255, 0.3);
}
/* /Components/Shared/PublicNav.razor.rz.scp.css */
/* Public site navigation. NOTE: single @media below - a .razor.css file is
   plain CSS, not Razor, so @@media is invalid and gets dropped silently.
   Colours come from --pub-* in wwwroot/css/public-theme.css. */

.pn[b-r1rx6sn5r7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pub-white);
    border-bottom: 1px solid var(--pub-line);
    padding: 0 24px;
    font-family: var(--pub-font);
}
.pn-inner[b-r1rx6sn5r7] {
    max-width: 1200px;
    margin: 0 auto;
    height: 74px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.pn-brand[b-r1rx6sn5r7] { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.pn-brand-logo[b-r1rx6sn5r7] { height: 30px; }
.pn-brand-name[b-r1rx6sn5r7] { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.03em; color: var(--pub-navy); }
.pn-brand-name > span[b-r1rx6sn5r7] { color: var(--pub-accent); }

/* ---- desktop menubar ---- */
/* The panels are positioned against the menubar, not against the hovered item,
   so `align-self: stretch` matters: it makes the menubar fill the bar's full
   74px and therefore makes `top: 100%` on a panel land on the bar's bottom
   edge. Without it the menubar is only as tall as its buttons and the panels
   float up into the bar. */
.pn-menubar[b-r1rx6sn5r7] {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}
/* Stretched to the bar's full height, not just the button's. The menubar centres
   its items, which left the <li> ending at 56px while the panel starts at 74 -
   18px in which the pointer was over neither, so the panel closed the moment you
   moved down towards it. The li must touch the panel for :hover to survive the
   journey. The button stays centred inside it. */
.pn-item[b-r1rx6sn5r7] {
    position: static;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.pn-top[b-r1rx6sn5r7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--pub-navy);
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 8px;
    white-space: nowrap;
}
.pn-top:hover[b-r1rx6sn5r7],
.pn-item:hover > .pn-top[b-r1rx6sn5r7],
.pn-item:focus-within > .pn-top[b-r1rx6sn5r7] { color: var(--pub-navy); background: var(--pub-paper); }
.pn-caret[b-r1rx6sn5r7] { opacity: 0.55; transition: transform 0.15s; }
.pn-item:hover .pn-caret[b-r1rx6sn5r7] { transform: rotate(180deg); }

/* The panel opens on hover and on keyboard focus. Doing it in CSS rather than
   component state means it works during SSR prerender, before the circuit
   connects - a menu that needs a round trip to open feels broken. */
/* Anchored to the start of the menubar rather than to the hovered item. Doing
   it per item, as the marketing mock draws it, puts a 620px card wherever that
   item happens to sit - which runs off the right edge for the later menus at
   anything under about 1200px, and CSS cannot measure its way out of that. The
   menubar always starts just after the brand, so one shared origin fits at
   every width where the menubar is shown at all (>=901px). */
/* Visibility rather than display, so closing can be DELAYED. Moving the pointer
   from the button towards a link inside crosses the panel's own edge, and any
   momentary drop of :hover would close it mid-journey; the 200ms grace below
   means a diagonal or unsteady movement is forgiven. display:none cannot be
   delayed - it is not an animatable property - which is why it is gone. */
.pn-panel[b-r1rx6sn5r7] {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    /* Closing: hold for 200ms, then fade, and only then stop hit-testing. */
    transition: opacity 0.14s ease 0.2s,
                transform 0.14s ease 0.2s,
                visibility 0s linear 0.34s;
    position: absolute;
    top: 100%;
    left: 0;
    width: 620px;
    /* Against the viewport, not the menubar: the menubar is `flex: 1` and so
       narrows with the window, and `max-width: 100%` would squeeze the panel's
       two columns down with it. */
    max-width: calc(100vw - 48px);
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: 14px;
    box-shadow: var(--pub-shadow-lg);
    overflow: hidden;
}
/* Opening is immediate - only closing is forgiving. [data-pn-open] is set by
   public-nav.js when the menu is opened by click, tap or keyboard, so a pinned
   menu stays put once the pointer wanders off. */
.pn-item:hover > .pn-panel[b-r1rx6sn5r7],
.pn-item[data-pn-open] > .pn-panel[b-r1rx6sn5r7] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
}

/* Keyboard, WITHOUT the script: focus alone opens the panel, so the menu is
   still usable if public-nav.js fails to load or has not run yet.
   The script sets .pn-js on <html> and takes over, because focus-opening
   contradicts the disclosure pattern it implements - Escape closes and hands
   focus back to the button, which :focus-within would instantly read as "open
   again". With the script present the button is pressed to open, which is what
   aria-expanded tells a screen-reader user anyway. */
html:not(.pn-js) .pn-item:focus-within > .pn-panel[b-r1rx6sn5r7] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
}

/* Explicitly dismissed (Escape, or a click elsewhere). This has to be able to beat
   :focus-within, because Escape returns focus to the button - which would otherwise
   re-open the panel the moment it closed. Same specificity as the open rules, so it
   must stay below them. public-nav.js clears it as soon as the pointer or focus
   leaves, so the next hover or Tab opens normally. */
.pn-item[data-pn-dismissed] > .pn-panel[b-r1rx6sn5r7] {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

/* The grace period is about pointer accuracy, not decoration, so the delay
   stays; only the movement goes. */
@media (prefers-reduced-motion: reduce) {
    .pn-panel[b-r1rx6sn5r7] { transform: none; transition: opacity 0s linear 0.2s, visibility 0s linear 0.2s; }
    .pn-item:hover > .pn-panel[b-r1rx6sn5r7],
    .pn-item:focus-within > .pn-panel[b-r1rx6sn5r7],
    .pn-item[data-pn-open] > .pn-panel[b-r1rx6sn5r7] { transition: opacity 0s, visibility 0s; }
}

.pn-panel-inner[b-r1rx6sn5r7] {
    padding: 26px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
    align-items: start;
}
/* One group has nothing to sit beside, so it takes the full width. */
.pn-panel-inner:has(> .pn-group:only-child)[b-r1rx6sn5r7] { grid-template-columns: 1fr; }

.pn-panel-foot[b-r1rx6sn5r7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px 28px;
    background: var(--pub-paper);
    border-top: 1px solid var(--pub-line);
}
.pn-foot-hd[b-r1rx6sn5r7] { font-size: 0.88rem; font-weight: 600; color: var(--pub-navy); }
.pn-foot-links[b-r1rx6sn5r7] { display: flex; gap: 18px; flex-wrap: wrap; }
.pn-foot-link[b-r1rx6sn5r7] { font-size: 0.88rem; font-weight: 600; color: var(--pub-accent); text-decoration: none; }
.pn-foot-link:hover[b-r1rx6sn5r7] { color: var(--pub-accent-dark); }
.pn-group-hd[b-r1rx6sn5r7] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pub-quiet);
    margin-bottom: 14px;
}
.pn-group-list[b-r1rx6sn5r7] { list-style: none; margin: 0; padding: 0; }
.pn-group-list li[b-r1rx6sn5r7] { margin-bottom: 2px; }
.pn-link[b-r1rx6sn5r7] {
    display: block;
    padding: 7px 10px;
    margin-left: -10px;
    border-radius: 7px;
    font-size: 0.95rem;
    color: var(--pub-ink);
    text-decoration: none;
}
.pn-link:hover[b-r1rx6sn5r7] { background: var(--pub-paper); color: var(--pub-navy); }

/* ---- right-hand actions ---- */
.pn-actions[b-r1rx6sn5r7] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.pn-locale-wrap[b-r1rx6sn5r7] { position: relative; }
.pn-locale-btn[b-r1rx6sn5r7] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--pub-paper);
    border: 1px solid var(--pub-line);
    border-radius: 8px;
    color: var(--pub-muted);
    font: inherit;
    font-size: 0.82rem;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.pn-locale-btn:hover[b-r1rx6sn5r7] { border-color: var(--pub-accent-soft); color: var(--pub-navy); }
.pn-locale-menu[b-r1rx6sn5r7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(31, 59, 87, 0.14);
    min-width: 120px;
    overflow: hidden;
    z-index: 200;
}
.pn-locale-item[b-r1rx6sn5r7] {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    font-size: 0.88rem;
    color: var(--pub-ink);
    cursor: pointer;
}
.pn-locale-item:hover[b-r1rx6sn5r7] { background: var(--pub-paper); }
.pn-locale-item.active[b-r1rx6sn5r7] { font-weight: 700; color: var(--pub-navy); }

.pn-login[b-r1rx6sn5r7] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--pub-navy);
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid var(--pub-line);
    border-radius: 8px;
    white-space: nowrap;
}
.pn-login:hover[b-r1rx6sn5r7] { border-color: var(--pub-accent-soft); }
.pn-trycta[b-r1rx6sn5r7] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    background: var(--pub-accent);
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 8px;
    white-space: nowrap;
}
.pn-trycta:hover[b-r1rx6sn5r7] { background: var(--pub-accent-dark); color: #fff; }

.pn-burger[b-r1rx6sn5r7] {
    display: none;
    background: none;
    border: 1px solid var(--pub-line);
    border-radius: 8px;
    color: var(--pub-navy);
    padding: 6px 9px;
    line-height: 0;
    cursor: pointer;
}

/* ---- mobile drawer ---- */
.pn-drawer[b-r1rx6sn5r7] {
    border-top: 1px solid var(--pub-line);
    padding: 6px 0 16px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
}
.pn-dsec[b-r1rx6sn5r7] { border-bottom: 1px solid var(--pub-line-soft); }
.pn-dsec-hd[b-r1rx6sn5r7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pub-navy);
    padding: 15px 4px;
    cursor: pointer;
}
.pn-dsec-caret[b-r1rx6sn5r7] { transition: transform 0.15s; opacity: 0.6; }
.pn-dsec-caret.open[b-r1rx6sn5r7] { transform: rotate(180deg); }
.pn-dsec-body[b-r1rx6sn5r7] { padding: 0 4px 12px; }
.pn-dgroup-hd[b-r1rx6sn5r7] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pub-quiet);
    margin: 10px 0 6px;
}
.pn-dlink[b-r1rx6sn5r7] {
    display: block;
    padding: 11px 10px;
    margin-left: -10px;
    border-radius: 8px;
    font-size: 0.97rem;
    color: var(--pub-ink);
    text-decoration: none;
}
.pn-dlink:active[b-r1rx6sn5r7] { background: var(--pub-paper); }
.pn-dtop[b-r1rx6sn5r7] {
    display: block;
    padding: 15px 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pub-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--pub-line-soft);
}
.pn-dlocales[b-r1rx6sn5r7] { display: flex; gap: 8px; padding: 16px 4px 0; }
.pn-dlocale[b-r1rx6sn5r7] {
    flex: 1;
    padding: 11px 12px;
    background: var(--pub-paper);
    border: 1px solid var(--pub-line);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--pub-muted);
    cursor: pointer;
}
.pn-dlocale.active[b-r1rx6sn5r7] { background: var(--pub-paper-warm); color: var(--pub-navy); font-weight: 700; }

/* Below this width the three menus plus locale, login and CTA cannot share a
   row. Menus and login move into the drawer; the CTA stays visible. */
@media (max-width: 900px) {
    .pn-menubar[b-r1rx6sn5r7] { display: none; }
    .pn-desktop[b-r1rx6sn5r7] { display: none; }
    .pn-burger[b-r1rx6sn5r7] { display: block; }
}

@media (max-width: 600px) {
    .pn[b-r1rx6sn5r7] { padding: 0 16px; }
    .pn-inner[b-r1rx6sn5r7] { gap: 12px; height: 60px; }
    .pn-brand-name[b-r1rx6sn5r7] { display: none; }
    .pn-trycta[b-r1rx6sn5r7] { padding: 9px 14px; }
    .pn-drawer[b-r1rx6sn5r7] { max-height: calc(100vh - 60px); }
}
/* /Components/Shared/PublicPageStub.razor.rz.scp.css */
/* Styling for a not-yet-written public page. Deliberately quiet: a paper hero
   and nothing else, so the page reads as "reserved" rather than as a broken
   one. Colours come from --pub-* in wwwroot/css/public-theme.css. */

.ps-root[b-27kx8z1y62] {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    background: var(--pub-white);
    -webkit-font-smoothing: antialiased;
}
.ps-root *[b-27kx8z1y62] { box-sizing: border-box; }

.ps-container[b-27kx8z1y62] { max-width: 780px; margin: 0 auto; padding: 0 var(--pub-gutter); }

.ps-hero[b-27kx8z1y62] { background: var(--pub-paper); border-bottom: 1px solid var(--pub-line-soft); padding: 88px 0 96px; }

.ps-overline[b-27kx8z1y62] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pub-accent);
    margin-bottom: 16px;
}

/* font-family and color restated, not inherited: app.css carries a bare
   `h1 { font-family: 'Aptos'; color: var(--ampleo-primary) }` for the in-app
   UI, and a rule on the element beats what .ps-root passes down. */
.ps-root h1[b-27kx8z1y62] {
    margin: 0;
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    font-weight: var(--pub-h-weight);
    letter-spacing: var(--pub-h-track);
    line-height: 1.08;
    text-wrap: pretty;
}

.ps-lead[b-27kx8z1y62] {
    margin: 22px 0 0;
    font-size: 1.16rem;
    line-height: 1.55;
    color: var(--pub-muted);
    text-wrap: pretty;
}

.ps-note[b-27kx8z1y62] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 32px;
    padding: 22px 26px;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-left: 3px solid var(--pub-accent);
    border-radius: 12px;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--pub-muted);
}
.ps-note-hd[b-27kx8z1y62] { font-weight: 700; color: var(--pub-navy); }

.ps-actions[b-27kx8z1y62] { display: flex; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.ps-btn[b-27kx8z1y62] {
    display: inline-flex;
    align-items: center;
    padding: 15px 28px;
    border-radius: var(--pub-radius-sm);
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.ps-btn-primary[b-27kx8z1y62] { background: var(--pub-accent); color: #fff; box-shadow: 0 6px 18px rgba(31, 59, 87, 0.14); }
.ps-btn-primary:hover[b-27kx8z1y62] { background: var(--pub-accent-dark); color: #fff; }
.ps-btn-outline[b-27kx8z1y62] { background: var(--pub-white); color: var(--pub-navy); border-color: var(--pub-navy); }
.ps-btn-outline:hover[b-27kx8z1y62] { background: var(--pub-navy); color: #fff; }

@media (max-width: 600px) {
    .ps-hero[b-27kx8z1y62] { padding: 56px 0 64px; }
    .ps-note[b-27kx8z1y62] { padding: 18px 20px; }
    .ps-actions .ps-btn[b-27kx8z1y62] { width: 100%; justify-content: center; }
}
/* /Components/Shared/RelatedGrid.razor.rz.scp.css */
/* ===== Fullscreen overlay ===== */
.related-grid-fullscreen[b-txvxhjanqc] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    margin: 0 !important;
    border-radius: 0 !important;
    flex: unset !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden;
    background: #fff;
}

.related-grid-fullscreen[b-txvxhjanqc]  .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
/* /Components/Shared/SegmentCriteriaPanel.razor.rz.scp.css */
/* Plain CSS, not Razor: media queries here are @media, never @@media.
   See Docs/blazor-ui-architecture.md. */

.scp[b-7j514auyga] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scp-loading[b-7j514auyga] {
    padding: 40px;
    text-align: center;
    color: #9ca3af;
}

.scp-head[b-7j514auyga] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.scp-title[b-7j514auyga] {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: #1f3b57;
}

.scp-muted[b-7j514auyga] {
    margin: 0;
    font-size: 12.5px;
    color: #6b7280;
}

.scp-saved[b-7j514auyga] {
    font-size: 12.5px;
    color: #2f7d52;
}

/* ── Preview ─────────────────────────────────────────────────────────── */

.scp-preview[b-7j514auyga] {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fbfbfa;
}

.scp-preview-head[b-7j514auyga] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.scp-count[b-7j514auyga] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    color: #1f3b57;
}

.scp-count-none[b-7j514auyga] {
    color: #c3c8ce;
}

.scp-count-label[b-7j514auyga] {
    font-size: 12.5px;
    color: #6b7280;
}

.scp-warn[b-7j514auyga] {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: #8a6d3b;
}

.scp-sample[b-7j514auyga] {
    margin: 12px 0 6px;
    padding: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
}

.scp-sample li[b-7j514auyga] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #eeeeec;
    font-size: 13px;
}

.scp-sample li:last-child[b-7j514auyga] {
    border-bottom: 0;
}

.scp-sample-name[b-7j514auyga] {
    color: #1f2937;
}

.scp-sample-email[b-7j514auyga] {
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575px) {
    .scp-head[b-7j514auyga] {
        flex-direction: column;
    }

    .scp-sample li[b-7j514auyga] {
        flex-direction: column;
        gap: 2px;
    }
}
/* /Components/Shared/Sidebar.razor.rz.scp.css */
/* Area selector dropdown (dark menu on the brand-primary background). Force legible light text on
   hover/focus/active; Bootstrap's default hover colour reads as near-black here, which looks odd. */
.dropdown-menu-dark .dropdown-item:hover[b-h8lbd6appl],
.dropdown-menu-dark .dropdown-item:focus[b-h8lbd6appl],
.dropdown-menu-dark .dropdown-item.active[b-h8lbd6appl],
.dropdown-menu-dark .dropdown-item:active[b-h8lbd6appl] {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
}
/* /Components/Shared/Timeline.razor.rz.scp.css */
.timeline-card[b-vinxgtpe5h] {
    cursor: pointer;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.timeline-card:hover[b-vinxgtpe5h] {
    border-color: var(--bs-primary, #1e3a5f) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* /Components/Shared/UserGuideContent.razor.rz.scp.css */
/* User guide layout and the typography of the fragments in userguide.d/.

   The fragments are injected as a MarkupString, so this component did not author
   them and CSS isolation will not reach them - everything inside .ug-body needs
   ::deep. They are plain semantic HTML (p, h4, ul, table) plus a few ug-* classes,
   which is why the rules below style bare elements: there is deliberately no class
   on a paragraph in a documentation fragment.

   Colours come from --pub-* in wwwroot/css/public-theme.css, which App.razor links
   globally - so this works on the public page and on the in-app /guide alike.

   NOTE: a .razor.css file is plain CSS, not Razor, so @media is written once and
   @@media is invalid and silently dropped. */

.ug-root[b-u2gz3l9dl3] {
    font-family: var(--pub-font);
    color: var(--pub-navy-soft);
}

/* ---- table of contents ---- */
.ug-toc[b-u2gz3l9dl3] { padding: 40px 0; }
.ug-toc-shaded[b-u2gz3l9dl3] { background: var(--pub-paper); }
.ug-toc-inner[b-u2gz3l9dl3] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.ug-toc-item[b-u2gz3l9dl3] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: 10px;
    padding: 16px 20px;
    color: var(--pub-navy);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}
.ug-toc-item:hover[b-u2gz3l9dl3] { border-color: var(--pub-accent-soft); color: var(--pub-navy); }
.ug-toc-ico[b-u2gz3l9dl3] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(31, 59, 87, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--pub-navy);
}

/* ---- sections ---- */
.ug-sections[b-u2gz3l9dl3] { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.ug-section[b-u2gz3l9dl3] { scroll-margin-top: 80px; padding: 56px 0 48px; border-bottom: 1px solid var(--pub-line); }
/* font-family and colour restated: app.css has a bare `h1, h2, h3` rule for the
   in-app UI that beats anything inherited here. See Docs/public-site.md. */
.ug-section > h2[b-u2gz3l9dl3] {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-weight: 600;
    font-size: 1.6rem;
    margin-bottom: 16px;
}

/* ---- fragment body ---- */
.ug-body[b-u2gz3l9dl3] { font-size: 1rem; }
.ug-body[b-u2gz3l9dl3]  p { color: var(--pub-navy-soft); line-height: 1.8; margin: 0 0 14px; }
.ug-body[b-u2gz3l9dl3]  h4 {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 28px 0 8px;
}
.ug-body[b-u2gz3l9dl3]  ul,
.ug-body[b-u2gz3l9dl3]  ol { color: var(--pub-navy-soft); line-height: 2; padding-left: 20px; margin: 0 0 14px; }
.ug-body[b-u2gz3l9dl3]  strong { color: var(--pub-navy); font-weight: 600; }
.ug-body[b-u2gz3l9dl3]  a { color: var(--pub-accent); }
.ug-body[b-u2gz3l9dl3]  a:hover { color: var(--pub-accent-dark); }

.ug-body[b-u2gz3l9dl3]  table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 12px; }
.ug-body[b-u2gz3l9dl3]  tr { border-bottom: 1px solid var(--pub-line); }
.ug-body[b-u2gz3l9dl3]  td { padding: 10px 0; color: var(--pub-muted); vertical-align: top; }
.ug-body[b-u2gz3l9dl3]  .ug-term {
    padding: 10px 14px 10px 0;
    font-weight: 600;
    color: var(--pub-navy);
    white-space: nowrap;
}
.ug-body[b-u2gz3l9dl3]  .ug-scroll { overflow-x: auto; }

.ug-body[b-u2gz3l9dl3]  .ug-key {
    background: rgba(31, 59, 87, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}
.ug-body[b-u2gz3l9dl3]  .ug-note {
    background: rgba(31, 59, 87, 0.06);
    border-left: 3px solid var(--pub-navy);
    border-radius: 0 8px 8px 0;
    padding: 14px 20px;
    color: var(--pub-navy);
    font-size: 0.93rem;
    margin-top: 20px;
}
.ug-body[b-u2gz3l9dl3]  .ug-note p { color: var(--pub-navy); margin: 0; }

.ug-body[b-u2gz3l9dl3]  .ug-card {
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: 10px;
    padding: 20px;
}
.ug-body[b-u2gz3l9dl3]  .ug-tile {
    background: var(--pub-white);
    border: 1px solid var(--pub-line);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
}
.ug-body[b-u2gz3l9dl3]  .ug-tile-ico {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(31, 59, 87, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--pub-navy);
}
.ug-body[b-u2gz3l9dl3]  .ug-card-title {
    font-family: var(--pub-font);
    color: var(--pub-navy);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}
.ug-body[b-u2gz3l9dl3]  .ug-small { color: var(--pub-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.ug-body[b-u2gz3l9dl3]  .ug-strong { color: var(--pub-navy); font-weight: 500; }
.ug-body[b-u2gz3l9dl3]  .ug-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--pub-navy); }
.ug-body[b-u2gz3l9dl3]  .ug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.ug-body[b-u2gz3l9dl3]  .ug-grid-tight {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.ug-body[b-u2gz3l9dl3]  .ug-flow { display: flex; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.ug-body[b-u2gz3l9dl3]  .ug-badge {
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}
.ug-body[b-u2gz3l9dl3]  .ug-badge-slate { background: var(--pub-muted); }
.ug-body[b-u2gz3l9dl3]  .ug-badge-navy  { background: var(--pub-navy-soft); }
.ug-body[b-u2gz3l9dl3]  .ug-badge-brown { background: var(--pub-accent); }

/* ---- closing call to action (public page only) ---- */
.ug-cta[b-u2gz3l9dl3] { background: var(--pub-navy); padding: 80px 0; text-align: center; }
.ug-cta-inner[b-u2gz3l9dl3] { max-width: 600px; margin: 0 auto; padding: 0 24px; }
.ug-cta h2[b-u2gz3l9dl3] {
    font-family: var(--pub-font);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: #fff;
    margin-bottom: 12px;
}
.ug-cta p[b-u2gz3l9dl3] { color: var(--pub-on-navy); font-size: 1.05rem; margin-bottom: 28px; }
.ug-cta-btn[b-u2gz3l9dl3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pub-accent);
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 8px;
}
.ug-cta-btn:hover[b-u2gz3l9dl3] { background: var(--pub-accent-lift); color: #fff; }

@media (max-width: 600px) {
    .ug-section[b-u2gz3l9dl3] { padding: 40px 0 32px; }
    .ug-cta[b-u2gz3l9dl3] { padding: 56px 0; }
    .ug-body[b-u2gz3l9dl3]  .ug-term { white-space: normal; }
}

/* A URL or an endpoint in a section is a single unbreakable word, and on a phone
   one of them (the Outlook add-in's manifest address) was wide enough to scroll the
   whole page sideways. Let long tokens break rather than push the layout. */
.ug-root[b-u2gz3l9dl3]  p,
.ug-root[b-u2gz3l9dl3]  li,
.ug-root[b-u2gz3l9dl3]  td {
    overflow-wrap: anywhere;
}