html, body {
    font-family: Inter, Roboto, Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Keep Quill HTML from forcing the layout wider than the viewport. */
.kb-article-body {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-article-body img,
.kb-article-body video {
    max-width: 100%;
    height: auto;
}

.kb-article-body iframe {
    max-width: 100%;
}

.kb-article-body iframe.ql-video,
.kb-article-body .ql-video {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 12rem;
    border: 0;
}

.kb-article-body pre,
.kb-article-body table {
    max-width: 100%;
    overflow-x: auto;
}

/* #469: a long unbroken reply must wrap inside the ticket card.
   MudCard is a column flex item (min-width: auto), so a single token
   otherwise becomes the card's min-content and widens the page.
   overflow-wrap: anywhere also shrinks that min-content. */
.ticket-page,
.ticket-page .mud-stack,
.ticket-page .mud-card,
.ticket-page .mud-card-header,
.ticket-page .mud-card-header-content,
.ticket-page .mud-card-content,
.ticket-page .quill-editor-host,
.ticket-page .ql-container,
.ticket-page .ql-editor,
.ticket-body {
    min-width: 0;
    max-width: 100%;
}

.ticket-body,
.ticket-page .ql-editor {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ticket-body img,
.ticket-body video {
    max-width: 100%;
    height: auto;
}

.ticket-body pre,
.ticket-body table {
    max-width: 100%;
    overflow-x: auto;
}

.ticket-body a,
.ql-editor a,
.ql-snow a {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
    cursor: pointer;
}

/* Custom-field text stays inside the submit column, including the length error. */
.custom-field-text {
    min-width: 0;
    max-width: 100%;
}

.custom-field-text .mud-input-helper-text {
    overflow-wrap: anywhere;
}

.custom-field-text textarea.mud-input-root {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* #83: outlined multiline MudTextField — textarea fills clickable area */
.mud-input-control .mud-input > textarea.mud-input-root-outlined {
    margin-top: 0;
    padding-top: 18.5px;
    padding-bottom: 18.5px;
    box-sizing: border-box;
    min-height: 100%;
}

/* Portal customize — in-page contenteditable surfaces (legacy parity) */
.clasp-portal-editable {
    outline: 2px dashed var(--mud-palette-info);
    outline-offset: 3px;
    border-radius: 4px;
    min-width: 2rem;
    min-height: 1.25em;
    cursor: text;
    padding: 0.15rem 0.35rem;
    transition: outline-style 0.15s ease, background-color 0.15s ease;
}

.clasp-portal-editable:focus {
    outline-style: solid;
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
}

.clasp-portal-editable.clasp-portal-edit-heading {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.clasp-portal-editable.clasp-portal-edit-blurb {
    text-align: center;
    width: 100%;
    color: var(--mud-palette-text-secondary);
}

.clasp-portal-editable.clasp-portal-edit-placeholder {
    display: block;
    width: 100%;
}

.clasp-portal-editable.clasp-portal-edit-submit {
    display: inline;
    color: inherit;
    outline-color: rgba(255, 255, 255, 0.85);
}

/* ~60% narrower than the full content column, capped, and centered so
   Customize Page, Language, Exit, and Save stay in one compact bar. */
.clasp-portal-customize-toolbar {
    position: sticky;
    top: calc(var(--clasp-header-height, 82px) + 8px);
    z-index: 1200;
    box-sizing: border-box;
    width: min(40%, 36rem);
    max-width: min(40%, 36rem);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    background: var(--mud-palette-surface);
}

.clasp-portal-customize-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.15rem 0.35rem;
}

.clasp-portal-customize-title {
    flex: 0 0 auto;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.clasp-portal-customize-lang {
    flex: 1 1 7.5rem;
    min-width: 7.5rem;
    max-width: 9.5rem;
}

.clasp-portal-customize-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.25rem;
}

.clasp-portal-customize-hint {
    margin: 0.15rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 900px) {
    .clasp-portal-customize-toolbar {
        width: min(100%, 36rem);
        max-width: min(100%, 36rem);
    }

    .clasp-portal-customize-bar {
        flex-wrap: wrap;
    }
}

/* Help-center header (boxed bar, full-bleed surface).
   Stay above page content; do not switch this bar to absolute positioning.
   Top Header is painted only here. Logo and account clusters stay transparent
   so a translucent value is not composited a second time on top of this bar. */
.clasp-portal-header.mud-appbar {
    background: var(--clasp-top-header, #fbfcfe) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.04);
    border-bottom: 1px solid #e7e9ef;
    z-index: var(--mud-zindex-appbar, 1300);
    min-height: var(--clasp-header-height, 82px);
}

.clasp-portal-header .mud-toolbar {
    --mud-internal-toolbar-height: var(--clasp-header-height, 82px);
    height: auto;
    min-height: var(--clasp-header-height, 82px);
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.clasp-help-header-inner {
    /* Two zones: logo (or brand name when no logo) left, navigation
       right-aligned. 16px vertical padding and 40px side padding. The bar
       stays wider than the page column so the nav links stay on one row. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 24px;
    width: 100%;
    max-width: 1440px;
    min-height: var(--clasp-header-height, 82px);
    margin: 0 auto;
    padding: 16px 40px;
    box-sizing: border-box;
}

.clasp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.clasp-help-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: max-content;
    max-width: none;
    position: relative;
    z-index: 2;
    color: inherit;
    text-decoration: none;
}

.clasp-help-brand-upload {
    cursor: pointer;
    border-radius: 10px;
}

.clasp-help-brand-upload:hover .clasp-help-logo,
.clasp-help-brand-upload:focus-within .clasp-help-logo,
.clasp-help-brand-upload:hover .clasp-help-brand-name,
.clasp-help-brand-upload:focus-within .clasp-help-brand-name {
    outline: 2px solid var(--mud-palette-primary, #2563eb);
    outline-offset: 3px;
}

.clasp-help-brand-upload:focus-within {
    outline: 2px solid var(--mud-palette-primary, #2563eb);
    outline-offset: 3px;
}

.clasp-portal-editable-inline {
    display: inline;
}

/* Logo-only brand lockup. min/max width hold the slot; object-fit keeps the
   bitmap's aspect ratio when a file is wider or taller than the slot. */
.clasp-help-logo {
    display: block;
    flex: 0 1 auto;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 130px;
    max-width: 250px;
    max-height: 50px;
    object-fit: contain;
    object-position: left center;
}

/* Desktop keeps the logo from being clipped by the right-aligned nav.
   Narrow widths override this so the language picker and menu stay on screen. */
@media (min-width: 1200px) {
    .clasp-help-brand:has(.clasp-help-logo) {
        flex-shrink: 0;
        overflow: visible;
    }
}

.clasp-help-brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.15;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
}

.clasp-help-nav-slot {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    min-width: 0;
}

.clasp-help-menu {
    display: inline-flex;
    align-items: center;
}

/* Same 40px control height as Sign in / the account button. The header
   floor is 82px (16px padding + 50px logo), so this control fits. */
.clasp-help-menu.mud-icon-button,
.clasp-help-menu .mud-icon-button {
    width: 40px;
    height: 40px;
    padding: 8px;
    box-sizing: border-box;
}

.clasp-help-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    gap: 32px;
}

.clasp-help-nav-link {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 6px;
    /* Equal left/right padding so hover, focus, and active share one hit target. */
    padding: 8px 8px;
    border-radius: 0;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

/* Long brand names shrink the middle column. Keep the 24–32px gap and equal
   horizontal padding; only the type gets smaller when the centered slot is tight. */
@container (max-width: 700px) {
    .clasp-help-nav {
        gap: 24px;
    }

    .clasp-help-nav-link {
        gap: 4px;
        font-size: 13px;
        padding: 8px 8px;
    }
}

@container (max-width: 580px) {
    .clasp-help-nav {
        gap: 24px;
    }

    .clasp-help-nav-link {
        font-size: 12px;
        padding: 8px 4px;
    }
}

.clasp-help-nav-link:hover,
.clasp-help-nav-link:focus-visible {
    background: transparent;
    color: #2563EB;
    outline: none;
}

.clasp-help-nav-link.is-active {
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: #2563EB;
    font-weight: 700;
}

/* Menu Text: Knowledge Base, Timesheet, and Submit Ticket. My Tickets keeps
   the stylesheet colors above. When the brand color is unset, hover and active
   stay the current blue. Active state is the color (and a heavier weight), not an underline. */
.clasp-help-nav-link.clasp-brand-menu-text {
    color: var(--clasp-menu-text, #475569);
}

.clasp-help-nav-link.clasp-brand-menu-text:hover,
.clasp-help-nav-link.clasp-brand-menu-text:focus-visible {
    color: var(--clasp-menu-text, #2563EB);
}

.clasp-help-nav-link.clasp-brand-menu-text.is-active {
    color: var(--clasp-menu-text, #2563EB);
    font-weight: 700;
}

.mud-menu-item.clasp-brand-menu-text,
.mud-list-item.clasp-brand-menu-text {
    color: var(--clasp-menu-text, inherit);
}

.mud-menu-item.clasp-brand-menu-text:hover,
.mud-menu-item.clasp-brand-menu-text:focus-visible,
.mud-list-item.clasp-brand-menu-text:hover,
.mud-list-item.clasp-brand-menu-text:focus-visible {
    color: var(--clasp-menu-text, inherit);
}

.clasp-help-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--mud-palette-primary, #4f46e5);
    color: var(--mud-palette-primary-text, #fff);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.clasp-help-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.clasp-lang {
    position: relative;
}

.clasp-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.clasp-lang-trigger:hover,
.clasp-lang-trigger:focus-visible {
    border-color: #cbd5e1;
    outline: none;
}

.clasp-lang-trigger:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

.clasp-lang-globe {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #2563EB;
}

.clasp-lang-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #94A3B8;
}

.clasp-lang-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.clasp-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    min-width: 160px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
}

.clasp-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid #F1F5F9;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.clasp-lang-option:last-child {
    border-bottom: 0;
}

.clasp-lang-option:hover,
.clasp-lang-option:focus-visible {
    background: #f8fafc;
    outline: none;
}

.clasp-lang-option.is-selected,
.clasp-lang-option.is-selected:hover {
    background: #F1F5F9;
}

.clasp-lang-code {
    flex: 0 0 1.75rem;
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.clasp-lang-name {
    flex: 1 1 auto;
    min-width: 0;
}

.clasp-lang-check {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex: 0 0 auto;
    color: #2563EB;
}

.clasp-help-lang-label {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clasp-help-signin {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    min-height: 40px;
    box-shadow: none !important;
}

.clasp-help-signup {
    text-transform: none !important;
    font-weight: 600 !important;
}

/* Hero / search */
.clasp-help-hero {
    margin: -24px -24px 0;
    padding: 88px 24px 56px;
    background-color: #0A1128;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.2px);
    background-size: 22px 22px;
    color: #fff;
    text-align: center;
}

.clasp-help-hero.has-cover {
    /* The uploaded cover is the banner. Leave the navy fill on the base rule
       so a brand with no cover still shows #0A1128 underneath a failed image. */
    background-image: var(--clasp-hero-cover);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* White heading and #b6c2d2 subtitle sit on the cover. A plate only behind
   the text column keeps that copy readable without tinting the rest of the image.
   0.86 navy over white still clears 4.5:1 for the subtitle. */
.clasp-help-hero.has-cover .clasp-help-hero-inner {
    padding: 1.5rem 1.75rem 1.25rem;
    border-radius: 16px;
    background: rgba(10, 17, 40, 0.86);
}

.clasp-help-hero.is-customizing {
    margin-top: 1.5rem;
    position: relative;
}

.clasp-help-change-banner {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.clasp-help-change-banner:hover,
.clasp-help-change-banner:focus-within {
    background: rgba(15, 23, 42, 0.9);
}

.clasp-help-hero-inner {
    width: min(760px, 100%);
    margin: 0 auto;
}

.clasp-help-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(147, 197, 253, 0.45);
    border-radius: 999px;
    background: rgba(30, 58, 110, 0.55);
    color: #93c5fd;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.clasp-help-title {
    margin: 1.15rem 0 0.75rem;
    color: #fff;
    font-size: clamp(1.85rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.clasp-help-title-text,
.clasp-help-hero .clasp-portal-edit-heading {
    color: #fff;
    font-size: inherit;
    font-weight: 700;
    text-align: center;
}

.clasp-help-subtitle {
    max-width: 40rem;
    margin: 0 auto 1.75rem;
    color: #b6c2d2;
    font-size: 1.05rem;
    line-height: 1.55;
}

.clasp-help-subtitle-text,
.clasp-help-hero .clasp-portal-edit-blurb {
    color: #b6c2d2;
    text-align: center;
}

.clasp-help-search-wrap {
    position: relative;
    width: 100%;
}

.clasp-help-search.mud-input-control {
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0;
}

.clasp-help-search .mud-input-control-input-container,
.clasp-help-search .mud-input.mud-input-outlined,
.clasp-help-search .mud-input.mud-input-outlined.mud-input-full-width {
    width: 100%;
}

.clasp-help-search .mud-input.mud-input-outlined {
    background: #fff;
    border-radius: 999px;
    min-height: 3.5rem;
}

.clasp-help-search .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-radius: 999px !important;
    border-color: transparent !important;
}

.clasp-help-search .mud-input-outlined-border legend {
    width: 0.01px !important;
    padding: 0 !important;
}

.clasp-help-search .mud-input-slot,
.clasp-help-search .mud-input > input.mud-input-root,
.clasp-help-search div.mud-input-slot.mud-input-root {
    background: transparent;
    color: #0f172a;
    font-size: 1rem;
}

.clasp-help-search .mud-input-adornment {
    color: #64748b;
    margin-inline-start: 0.85rem;
}

.clasp-help-search input::placeholder,
.clasp-help-search .mud-input-slot::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.clasp-help-search-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 8px;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.clasp-help-search-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clasp-help-search-list > li {
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.clasp-help-search-card {
    display: block;
    min-width: 0;
    max-width: 100%;
    padding: 14px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-help-search-card:hover,
.clasp-help-search-card:focus-visible {
    border-color: #93c5fd;
    background: #f8fafc;
    outline: none;
}

.clasp-help-search-kicker {
    color: #2563EB;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-help-search-title {
    margin-top: 4px;
    color: #0F172A;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-help-search-snippet,
.clasp-help-search-empty {
    margin: 4px 0 0;
    color: #64748B;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-help-search-snippet {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clasp-help-search-empty {
    margin: 0;
}

.clasp-help-home-body {
    padding-top: 2.75rem;
    padding-bottom: 0;
}

/* Knowledge Base is the first band: its ::before paints Sub Header across the
   section padding box. Keep the hero gap on the section so that color fills
   the strip. Later bands still use the wrapper padding above. */
.clasp-help-home-body:has(> .clasp-kb-browse:first-child) {
    padding-top: 0;
}

.clasp-home-narrow {
    width: 65%;
    max-width: 65%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.clasp-full-bleed {
    width: calc(100% + 48px);
    max-width: none;
    margin-left: -24px;
    margin-right: -24px;
    box-sizing: border-box;
}

/* Full-bleed cancels the page padding. Put the same 24px back on the monitor
   note, feedback card, and register banner so they share one outer width
   and the same side margins. */
.clasp-home-card-row {
    padding-left: 24px;
    padding-right: 24px;
}

.clasp-kb-subtitle-rule,
.clasp-home-section-rule {
    height: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #E2E8F0;
}

.clasp-kb-subtitle-rule {
    margin-top: 16px;
    margin-bottom: 24px;
}

.clasp-home-section-rule {
    margin-top: 0;
    margin-bottom: 0;
}

/* The divider's old top margin sat on the page color under the Knowledge Base
   band. Keep that gap as section padding so Sub Header fills it. */
.clasp-kb-browse:has(+ .clasp-home-section-rule) {
    padding-bottom: 48px;
}

/* Sub Header paints only the home-page Knowledge Base and Feedback bands.
   KB article and browse subpages use other classes and stay on the page surface. */
.clasp-kb-browse {
    position: relative;
    isolation: isolate;
}

.clasp-help-home-body > .clasp-kb-browse:first-child {
    padding-top: 2.75rem;
}

.clasp-kb-browse::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -24px;
    right: -24px;
    background: var(--clasp-sub-header, transparent);
    pointer-events: none;
}

.clasp-kb-browse-header {
    margin-bottom: 0;
}

.clasp-kb-browse-title,
.clasp-eco-title {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.clasp-kb-browse-subtitle,
.clasp-eco-subtitle {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
}

.clasp-kb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.clasp-kb-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clasp-kb-card:hover,
.clasp-kb-card:focus-visible {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    outline: none;
}

.clasp-kb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.clasp-kb-icon,
.clasp-eco-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: 0 0 auto;
}

.clasp-kb-icon svg {
    width: 24px;
    height: 24px;
}

.clasp-eco-icon svg {
    width: 22px;
    height: 22px;
}

.clasp-kb-icon {
    background: #eff6ff;
    color: #3b82f6;
}

.clasp-kb-count {
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.clasp-kb-card-title,
.clasp-eco-card-title {
    color: #0f172a;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.clasp-kb-card-title {
    margin: 1.05rem 0 0.4rem;
}

.clasp-eco-card-title {
    margin: 0.35rem 0 0.3rem;
}

.clasp-kb-card-desc,
.clasp-eco-card-desc {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.clasp-kb-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clasp-kb-explore {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 1.25rem;
    color: #64748b;
    font-size: 0.925rem;
    font-weight: 600;
    transition: color 0.15s ease, gap 0.15s ease;
}

.clasp-kb-explore svg {
    width: 1rem;
    height: 1rem;
}

.clasp-kb-card:hover .clasp-kb-explore,
.clasp-kb-card:focus-visible .clasp-kb-explore {
    color: #2563eb;
    gap: 0.45rem;
}

.clasp-eco {
    background: #F8FAFC;
    padding: 40px 24px 48px;
    text-align: center;
}

.clasp-eco-inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.clasp-eco-subtitle {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.clasp-eco-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 1.75rem;
    text-align: left;
}

.clasp-eco-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    min-width: 0;
}

.clasp-eco-card.is-blue .clasp-eco-icon { background: #eff6ff; color: #2563eb; }
.clasp-eco-card.is-green .clasp-eco-icon { background: #ecfdf5; color: #059669; }
.clasp-eco-card.is-purple .clasp-eco-icon { background: #f5f3ff; color: #7c3aed; }
.clasp-eco-card.is-amber .clasp-eco-icon { background: #fff7ed; color: #d97706; }

/* One slate palette on every Help-section card. Variant classes tint icons only. */
.clasp-eco-card .clasp-eco-eyebrow { color: #475569; }
.clasp-eco-card .clasp-eco-card-title { color: #0F172A; }
.clasp-eco-card .clasp-eco-card-desc { color: #64748B; }

.clasp-eco-eyebrow {
    margin: 0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Grey band. Center the blue card on both axes. Side padding comes from
   .clasp-home-card-row and is equal, so nothing shifts the card left or right.
   Block padding is equal too: a bottom-only pad sits outside the flex line and
   pins the card to the top of the band, so align-items: center never moves it. */
.clasp-register-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F8FAFC;
    padding-top: 32px;
    padding-bottom: 32px;
}

/* 4 Feedback Panels off: the register CTA follows the KB grid with nothing
   between them. Keep the blue banner off the category cards. */
.clasp-kb-browse + .clasp-register-cta {
    margin-top: 24px;
}

.clasp-register-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    box-sizing: border-box;
    width: 100%;
    /* Tailwind max-w-6xl. margin: 0 auto centers the card in the grey band. */
    max-width: 72rem;
    min-width: 0;
    margin: 0 auto;
    padding: 40px 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
}

.clasp-register-cta-copy {
    min-width: 0;
}

.clasp-register-cta-pill {
    display: inline-flex;
    margin: 0;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.clasp-register-cta-title {
    margin: 12px 0;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.clasp-register-cta-sub {
    margin: 0;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
}

.clasp-register-cta-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
}

.clasp-register-cta-primary,
.clasp-register-cta-secondary {
    display: inline-block;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.clasp-register-cta-primary {
    padding: 12px 24px;
    background: #ffffff;
    color: #1e40af;
    font-weight: 700;
}

.clasp-register-cta-secondary {
    margin-top: 12px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 600;
}

.clasp-register-cta-primary:hover {
    background: #f8fafc;
    color: #1e40af;
}

.clasp-register-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.clasp-register-cta-primary:focus-visible,
.clasp-register-cta-secondary:focus-visible,
.clasp-help-nav-link:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 3px;
}

.clasp-register-cta-primary:focus-visible,
.clasp-register-cta-secondary:focus-visible {
    outline-color: #ffffff;
}

@media (max-width: 1360px) {
    .clasp-eco-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .clasp-kb-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 960px) {
    .clasp-home-narrow {
        width: 100%;
        max-width: 100%;
    }

    .clasp-register-cta-card {
        flex-direction: column;
        align-items: stretch;
        padding: 28px 20px;
    }

    .clasp-register-cta-title {
        font-size: 22px;
    }

    .clasp-register-cta-actions {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .clasp-kb-grid,
    .clasp-eco-grid {
        grid-template-columns: 1fr;
    }
}

.clasp-help-layout.mud-layout {
    min-height: 100vh;
    /* 16px block padding + 50px logo. A configured short HeaderHeight is
       raised to this floor so the fixed bar cannot cover page content.
       The 40px sign-in, account, and menu controls fit inside the logo floor.
       Taller brand settings still pass through max(). */
    --clasp-header-pad-block: 16px;
    --clasp-header-control: 50px;
    --clasp-header-floor: calc(var(--clasp-header-control) + (var(--clasp-header-pad-block) * 2));
    --clasp-header-height: max(var(--clasp-header-configured, var(--clasp-header-floor)), var(--clasp-header-floor));
    --mud-appbar-height: var(--clasp-header-height);
    overflow: visible;
}

/* Short pages (including /kb/articles/*) keep the footer at the viewport bottom.
   The main column grows; the footer follows as the last flex item. */
.clasp-help-main.mud-main-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100vh;
    overflow: visible;
}

.clasp-help-main-body {
    flex: 1 0 auto;
    padding-bottom: 0 !important;
    overflow: visible;
}

/* Extra gap under the header on pages whose first content is a card or title.
   When the appbar offset already matches the header, this stays at 8px so the
   pa-6 body padding (24px) plus this gap lands in the 24–32px range. */
.clasp-page-clearance {
    margin-top: max(8px, calc(var(--clasp-header-height, 82px) - var(--mud-appbar-height, 64px)));
    overflow: visible;
}

.clasp-help-footer {
    width: 100%;
    margin-top: 0;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #090D16;
    color: #9ca3af;
    box-sizing: border-box;
}

.clasp-help-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.clasp-help-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.clasp-help-footer-copy {
    margin: 0;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.5;
}

.clasp-help-powered-by {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

.clasp-help-powered-by:hover,
.clasp-help-powered-by:focus-visible {
    color: #ffffff;
}

/* Credit with the dark footer turned off: a small line on the page background. */
.clasp-help-credit {
    width: 100%;
    padding: 16px 24px 24px;
    text-align: center;
    box-sizing: border-box;
}

.clasp-help-credit .clasp-help-powered-by {
    color: #4b5563;
}

.clasp-help-credit .clasp-help-powered-by:hover,
.clasp-help-credit .clasp-help-powered-by:focus-visible {
    color: #111827;
}

.clasp-monitor-banner {
    margin-top: 32px;
}

.clasp-monitor-banner-text {
    margin: 0;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.5;
}

.clasp-feedback {
    margin-top: 32px;
    /* mb-6: keep the feedback card off the register banner. */
    margin-bottom: 24px;
    background: var(--clasp-sub-header, transparent);
}

/* Fold the section's own gap into the band so the color surrounds the card
   without moving it. Unset sub header keeps the margins above. */
.clasp-has-sub-header .clasp-feedback {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 32px;
    padding-bottom: 24px;
}

.clasp-feedback-card {
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.clasp-feedback-title {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.3;
}

.clasp-feedback-body {
    margin: 0 0 16px;
    color: #475569;
    font-size: 15px;
    line-height: 1.5;
}

.clasp-feedback-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--clasp-button-color, #2563eb);
    color: var(--clasp-button-text, #ffffff);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.clasp-feedback-link:hover,
.clasp-feedback-link:focus-visible {
    background: var(--clasp-button-color, #1d4ed8);
    color: var(--clasp-button-text, #ffffff);
}

.clasp-has-button-color .clasp-feedback-link:hover,
.clasp-has-button-color .clasp-feedback-link:focus-visible {
    filter: brightness(0.95);
}

.clasp-support-policy {
    width: 100%;
    padding: 28px 0;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    box-sizing: border-box;
}

.clasp-support-policy-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.clasp-support-policy-title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
}

.clasp-support-policy-body {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.clasp-help-footer-social {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
}

.clasp-help-footer-social a,
.clasp-help-footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    line-height: 0;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.clasp-help-footer-social a:hover,
.clasp-help-footer-social a:focus-visible,
.clasp-help-footer-social-btn:hover,
.clasp-help-footer-social-btn:focus-visible {
    color: #ffffff;
}

.clasp-help-footer-social a:focus-visible,
.clasp-help-footer-social-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.clasp-help-footer-social-btn.is-empty {
    opacity: 0.55;
}

.clasp-help-footer-social svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 720px) {
    .clasp-help-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (min-width: 1200px) {
    /* Desktop shows the ordered nav in the right-hand cluster. Below this
       width the same items live in the collapsed menu. */
    .clasp-help-nav-slot {
        display: flex;
        flex: 0 1 auto;
        min-width: 0;
        z-index: 1;
    }

    .clasp-help-nav {
        max-width: 100%;
    }

    .clasp-help-brand,
    .clasp-help-actions {
        min-width: 0;
    }

    .clasp-help-brand {
        flex: 0 1 auto;
        max-width: 20rem;
        overflow: hidden;
    }

    /* The account dropdown is absolutely positioned inside the actions
       cluster; clipping here hides the profile menu and Sign out.
       The cluster fills the bar and packs its items to the right. */
    .clasp-help-actions {
        flex: 1 1 auto;
        gap: 32px;
        margin-left: 0;
        max-width: none;
        overflow: visible;
        /* Size containment only where this cluster is given a definite width.
           Below 1200px the bar is content-sized; containment would collapse it. */
        container-type: inline-size;
    }

    .clasp-help-brand-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .clasp-help-menu {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    /* The horizontal nav (including Timesheet) is in the menu here, so the
       brand may shrink instead of pushing Sign in off the screen.
       The menu button is 40px. The logo max-height is 50px and block
       padding stays 16px, so the padded floor stays 82px. */
    .clasp-help-layout.mud-layout {
        --clasp-header-pad-block: 16px;
        --clasp-header-control: 50px;
    }

    .clasp-help-brand {
        min-width: 0;
        background: transparent;
    }

    .clasp-help-brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 960px) {
    /* Horizontal nav is already in the menu at this width. Keep 16px vertical
       padding (the header floor above) and a tighter side inset so the logo
       and menu button stay on one row. */
    .clasp-help-layout.mud-layout {
        --clasp-header-pad-block: 16px;
    }

    .clasp-help-header-inner {
        padding: 16px 16px;
        min-width: 0;
    }

    /* A 250px logo plus the language picker, sign-in, and menu does not fit
       a phone row. Let the brand and image yield; keep the controls fixed. */
    .clasp-help-brand:has(.clasp-help-logo) {
        flex: 1 1 0%;
        min-width: 0;
        max-width: min(250px, 100%);
        overflow: hidden;
    }

    .clasp-help-logo {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        max-height: 50px;
        object-fit: contain;
        object-position: left center;
    }

    .clasp-help-actions {
        flex: 0 0 auto;
        min-width: max-content;
    }
}

@media (max-width: 600px) {
    .clasp-help-lang-label {
        display: none;
    }

    .clasp-help-brand-name {
        font-size: 1.05rem;
    }

    .clasp-help-hero {
        margin-left: -24px;
        margin-right: -24px;
        padding: 56px 16px 40px;
    }

    .clasp-help-subtitle {
        font-size: 0.95rem;
    }
}

a.clasp-help-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: var(--clasp-button-color, var(--mud-palette-primary, #2563eb));
    color: var(--clasp-button-text, #fff);
    text-decoration: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

a.clasp-help-signin:hover,
a.clasp-help-signin:focus-visible {
    color: var(--clasp-button-text, #fff);
    filter: brightness(0.95);
}

a.clasp-help-signup {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    color: var(--clasp-menu-text, #334155);
    text-decoration: none;
}

a.clasp-help-signup:hover,
a.clasp-help-signup:focus-visible {
    color: var(--clasp-menu-text, #2563eb);
}

/* Single Submit Ticket control, beside Sign up / Sign in. */
a.clasp-help-submit {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    color: var(--clasp-menu-text, #334155);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

a.clasp-help-submit:hover,
a.clasp-help-submit:focus-visible,
a.clasp-help-submit.is-active {
    color: var(--clasp-menu-text, #2563eb);
}

a.clasp-help-submit.is-active {
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-weight: 700;
}

/* 320px with the language picker and anonymous submit: Sign in (or the account
   button) plus Submit Ticket is wider than the row. Those account actions are
   already in the menu. The action cluster yields so a long Submit Ticket label
   ellipsizes before the brand name collapses. */
@media (max-width: 360px) {
    .clasp-help-header-inner {
        gap: 12px;
    }

    .clasp-help-brand {
        flex: 0 1 auto;
        min-width: 4.5rem;
        max-width: 46%;
        overflow: hidden;
    }

    .clasp-help-actions {
        flex: 1 1 auto;
        min-width: 0;
    }

    a.clasp-help-signin,
    .clasp-help-account {
        display: none;
    }

    .clasp-lang-trigger {
        gap: 0;
        padding: 6px 8px;
    }

    .clasp-lang-chevron {
        display: none;
    }

    a.clasp-help-submit {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 9.5rem;
        padding: 0 8px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.clasp-kb-docs {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    color: #0f172a;
    /* MudMainContent only offsets by --mud-appbar-height (64px). Brand headers
       can be taller (--clasp-header-height), which otherwise covers the title. */
    padding-top: max(0px, calc(var(--clasp-header-height, 82px) - var(--mud-appbar-height, 64px)));
    /* Keep the last card's shadow clear of the footer. */
    padding-bottom: 64px;
}

.clasp-kb-listing {
    padding-bottom: 64px;
}

.clasp-kb-docs-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.clasp-kb-docs-title {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.75rem, 2.6vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.clasp-kb-docs-subtitle {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
}

.clasp-kb-docs-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 280px;
    min-width: 220px;
    height: 42px;
    margin-top: 6px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
}

.clasp-kb-docs-filter input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-size: 0.95rem;
}

.clasp-kb-docs-filter-icon,
.clasp-kb-docs-filter-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.clasp-kb-docs-toggle {
    display: none;
}

.clasp-kb-docs-layout {
    display: grid;
    grid-template-columns: minmax(220px, 28%) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.clasp-kb-docs-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: auto;
    max-height: none;
    overflow: visible;
    min-width: 0;
}

.clasp-kb-docs-group,
.clasp-kb-docs-folders {
    min-width: 0;
    overflow: visible;
}

.clasp-kb-docs-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.clasp-kb-docs-leading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.clasp-kb-docs-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #3b82f6;
}

.clasp-kb-docs-glyph svg {
    width: 18px;
    height: 18px;
}

.clasp-kb-docs-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.3;
}

.clasp-kb-docs-item.is-folder {
    font-weight: 500;
    color: #475569;
}

.clasp-kb-docs-item.is-active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.clasp-kb-docs-item:hover {
    background: #f8fafc;
}

.clasp-kb-docs-item.is-active:hover {
    background: #eff6ff;
}

.clasp-kb-docs-count {
    flex: 0 0 auto;
    align-self: center;
    min-width: 1.5rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.clasp-kb-docs-item.is-active .clasp-kb-docs-count {
    background: #dbeafe;
    color: #1d4ed8;
}

.clasp-kb-docs-group:not(.is-expanded) .clasp-kb-docs-folders {
    display: none;
}

.clasp-kb-docs-folders {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 6px 12px;
    padding-left: 10px;
    border-left: 1px solid #e2e8f0;
}

.clasp-kb-docs-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clasp-kb-docs-card {
    min-width: 0;
    padding: 22px 24px 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow-wrap: anywhere;
}

.clasp-kb-docs-card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-kb-docs-card-title a {
    color: #0f172a;
    text-decoration: none;
}

.clasp-kb-docs-card-title a:hover {
    color: #2563eb;
}

.clasp-kb-docs-card-excerpt {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-kb-docs-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 0;
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 0.875rem;
}

.clasp-kb-docs-card-foot a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.clasp-kb-docs-card-foot a:hover {
    text-decoration: underline;
}

/* Knowledge base article reading column. Header, nav, and footer stay as-is.
   Breadcrumbs remain the first content under the header. */
.clasp-kb-article-shell {
    padding-top: max(0px, calc(var(--clasp-header-height, 82px) - var(--mud-appbar-height, 64px)));
}

.clasp-kb-article-crumbs {
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    color: #707070;
    font-size: 14px;
    line-height: 1.4;
}

.clasp-kb-article-crumbs li.mud-breadcrumb-item > a,
.clasp-kb-article-crumbs .mud-breadcrumb-separator > span {
    color: #707070;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    opacity: 1;
}

.clasp-kb-article-crumbs li.mud-breadcrumb-item.mud-disabled > a {
    color: #555555;
    font-weight: 700;
}

.clasp-kb-article-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 20px;
    background: #ffffff;
    color: #555555;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.clasp-kb-article-title {
    margin: 0 0 16px;
    color: #555555;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-kb-article-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 24px;
    color: #707070;
    font-size: 14px;
    line-height: 1.4;
}

.clasp-kb-article-tags {
    margin-bottom: 20px;
}

.clasp-kb-article {
    color: #555555;
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-kb-article p,
.clasp-kb-article li {
    color: #555555;
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-kb-article ol,
.clasp-kb-article ul {
    margin: 0 0 16px;
    padding-left: 1.5rem;
}

.clasp-kb-article li {
    margin: 0.35rem 0;
}

.clasp-kb-article a {
    color: #555555;
    font-weight: 700;
    text-decoration: underline;
}

.clasp-kb-article blockquote,
.clasp-kb-article pre,
.clasp-kb-article .ql-syntax {
    display: block;
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: #f8f9fa;
    color: #333333;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-kb-article code {
    padding: 2px 6px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: #f8f9fa;
    color: #333333;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-kb-article pre code {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
}

.clasp-kb-article-attachments {
    margin-top: 28px;
    color: #555555;
    font-size: 15px;
}

.clasp-kb-article-attachments-title {
    margin: 0 0 8px;
    color: #555555;
    font-size: 16px;
    font-weight: 600;
}

.clasp-kb-article-attachments ul {
    margin: 0;
    padding-left: 1.25rem;
}

.clasp-kb-article-attachments a {
    color: #555555;
    font-weight: 700;
    text-decoration: underline;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.clasp-kb-article-attachment-size {
    margin-left: 6px;
    color: #707070;
    font-size: 14px;
}

.clasp-kb-article-feedback {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.clasp-kb-article-feedback-label {
    margin: 0 0 12px;
    color: #555555;
    font-size: 15px;
    font-weight: 600;
}

.clasp-kb-article-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.clasp-kb-vote {
    border-radius: 4px;
    padding: 6px 14px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.clasp-kb-vote:disabled {
    cursor: progress;
    opacity: 0.65;
}

.clasp-kb-vote-yes {
    border: 1px solid #28a745;
    color: #28a745;
}

.clasp-kb-vote-no {
    border: 1px solid #dc3545;
    color: #dc3545;
}

.clasp-kb-vote.is-selected {
    box-shadow: inset 0 0 0 1px currentColor;
}

.clasp-kb-article-feedback-note {
    margin: 10px 0 0;
    color: #707070;
    font-size: 14px;
}

.clasp-auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
}

.clasp-auth-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 32px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    color: #0f172a;
    outline: none;
}

.clasp-auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.clasp-auth-close:hover {
    background: #f8fafc;
    color: #475569;
}

.clasp-auth-tabs {
    display: flex;
    gap: 24px;
    margin: 0 36px 24px 0;
    border-bottom: 1px solid #e2e8f0;
}

.clasp-auth-tab {
    margin: 0;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #94a3b8;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.clasp-auth-tab.is-active {
    border-bottom-color: #2563eb;
    color: #2563eb;
    font-weight: 700;
}

.clasp-auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clasp-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.clasp-auth-field > span:first-child {
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.clasp-auth-field input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-size: 0.95rem;
}

.clasp-auth-field input:focus {
    outline: 2px solid #bfdbfe;
    border-color: #2563eb;
    background: #fff;
}

.clasp-auth-password {
    position: relative;
    display: block;
}

.clasp-auth-password input {
    padding-right: 44px;
}

.clasp-auth-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    transform: translateY(-50%);
    cursor: pointer;
}

.clasp-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.clasp-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.9rem;
}

.clasp-auth-forgot {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.clasp-auth-forgot:hover {
    text-decoration: underline;
}

.clasp-auth-forgot-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -8px 0 20px;
}

.clasp-auth-back {
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.clasp-auth-back:hover {
    text-decoration: underline;
}

.clasp-auth-close.is-static {
    position: static;
}

.clasp-auth-forgot-title {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.clasp-auth-forgot-copy {
    margin: 0 0 20px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.clasp-auth-forgot-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 220px;
    margin: 8px 0 12px;
    padding: 32px 20px;
    text-align: center;
    outline: none;
}

.clasp-auth-forgot-confirm:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
}

.clasp-auth-forgot-confirm-message {
    margin: 0;
    max-width: 34ch;
    color: #334155;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.clasp-auth-forgot-panel .clasp-auth-field > span:first-child {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.clasp-auth-forgot-panel .clasp-auth-field input {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f8fafc;
}

.clasp-auth-forgot-panel .clasp-auth-submit {
    gap: 8px;
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 6px;
    line-height: 1.25;
    white-space: normal;
}

.clasp-auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: clasp-auth-spin 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes clasp-auth-spin {
    to {
        transform: rotate(360deg);
    }
}

.clasp-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    margin-top: 4px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.clasp-auth-submit:hover {
    background: #1d4ed8;
    color: #fff;
}

.clasp-auth-submit:disabled {
    opacity: 0.7;
    cursor: progress;
}

.clasp-auth-secondary {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 8px;
    border: 1px solid #2563eb;
    border-radius: 8px;
    background: #fff;
    color: #2563eb;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.clasp-auth-secondary:hover {
    background: #eff6ff;
}

.clasp-auth-or,
.clasp-auth-hint {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: center;
}

.clasp-auth-note {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.clasp-auth-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.875rem;
}

.clasp-auth-success {
    margin: 8px 0 0;
    padding: 12px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.925rem;
    line-height: 1.45;
}

@media (max-width: 800px) {
    .clasp-kb-docs-head {
        flex-direction: column;
    }

    .clasp-kb-docs-filter {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .clasp-kb-docs-layout {
        grid-template-columns: 1fr;
    }

    .clasp-kb-docs-toggle {
        display: inline-flex;
        align-items: center;
        margin-bottom: 12px;
        padding: 8px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
        color: #0f172a;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .clasp-kb-docs-nav {
        display: none;
        height: auto;
        max-height: none;
        overflow: visible;
        margin-bottom: 16px;
    }

    .clasp-kb-docs-nav.is-open {
        display: flex;
    }
}

/* Support tickets dashboard (/tickets). Header and footer stay in the layout.
   The gray fills the viewport so short lists do not drop to a white band. */
.clasp-help-layout.mud-layout:has(.clasp-ticket-dash),
.clasp-help-layout.mud-layout:has(.clasp-timesheet),
.clasp-help-main.mud-main-content:has(.clasp-ticket-dash),
.clasp-help-main.mud-main-content:has(.clasp-timesheet),
.clasp-help-main-body:has(.clasp-ticket-dash),
.clasp-help-main-body:has(.clasp-timesheet) {
    background: #F8FAFC;
}

.clasp-help-main-body:has(.clasp-ticket-dash),
.clasp-help-main-body:has(.clasp-timesheet) {
    display: flex;
    flex-direction: column;
}

.clasp-ticket-dash {
    margin: -24px -24px 0;
    padding: 48px 0;
    background: #F8FAFC;
    color: #0f172a;
    flex: 1 1 auto;
    min-height: 100%;
}

.clasp-ticket-dash-inner {
    width: 65%;
    max-width: 65%;
    margin: 0 auto;
    box-sizing: border-box;
}

.clasp-ticket-dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.clasp-ticket-dash-title {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.clasp-ticket-dash-subtitle,
.clasp-ticket-dash-note {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.clasp-ticket-create {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 10px 20px;
    border-radius: 8px;
    background: #2563EB;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.clasp-ticket-create:hover,
.clasp-ticket-create:focus-visible {
    color: #ffffff;
    filter: brightness(0.95);
}

.clasp-ticket-card {
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #ffffff;
}

.clasp-ticket-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 16px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.clasp-ticket-tab {
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 16px;
    cursor: pointer;
}

.clasp-ticket-tab.is-active {
    background: #F1F5F9;
    color: #0f172a;
    font-weight: 600;
}

.clasp-ticket-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    min-width: 180px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #ffffff;
    color: #64748b;
}

.clasp-ticket-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-size: 13px;
}

.clasp-ticket-search-icon,
.clasp-ticket-search-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.clasp-ticket-table-wrap {
    overflow-x: auto;
}

.clasp-ticket-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.clasp-ticket-table th {
    padding: 12px 24px;
    background: #F8FAFC;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.clasp-ticket-table td {
    padding: 16px 24px;
    border-top: 1px solid #E2E8F0;
    vertical-align: middle;
}

.clasp-ticket-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 24px;
    border-top: 1px solid #E2E8F0;
    color: #475569;
    font-size: 14px;
}

.clasp-ticket-pager-summary {
    margin: 0;
}

.clasp-ticket-pager-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.clasp-ticket-pager button {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.clasp-ticket-pager button:hover:not(:disabled),
.clasp-ticket-pager button:focus-visible:not(:disabled) {
    background: #f1f5f9;
    outline: none;
}

.clasp-ticket-pager button.is-current {
    background: #2563eb;
    color: #ffffff;
}

.clasp-ticket-pager button:disabled {
    opacity: 0.45;
    cursor: default;
}

.clasp-ticket-page-size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 14px;
}

.clasp-ticket-page-size select {
    height: 36px;
    padding: 0 8px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #ffffff;
    color: rgb(41, 43, 44);
    font: inherit;
    font-size: 14px;
}

.clasp-ticket-id {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

a.clasp-ticket-subject {
    display: inline-block;
    margin-top: 2px;
    color: #2563eb;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}

a.clasp-ticket-subject:hover,
a.clasp-ticket-subject:focus-visible {
    text-decoration: underline;
}

.clasp-ticket-category {
    color: #475569;
    font-size: 14px;
}

.clasp-ticket-priority {
    font-size: 13px;
    font-weight: 600;
}

.clasp-ticket-priority.is-high {
    color: #dc2626;
    font-weight: 700;
}

.clasp-ticket-priority.is-low,
.clasp-ticket-priority.is-normal {
    color: #64748b;
    font-weight: 500;
}

.clasp-ticket-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.clasp-ticket-status.is-progress {
    background: #FEF3C7;
    color: #92400E;
}

.clasp-ticket-status.is-resolved {
    background: #D1FAE5;
    color: #047857;
}

.clasp-ticket-status.is-open {
    background: #F1F5F9;
    color: #475569;
}

.clasp-ticket-updated {
    color: #64748b;
    font-size: 13px;
    white-space: nowrap;
}

.clasp-ticket-view {
    color: #2563EB;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.clasp-ticket-view:hover,
.clasp-ticket-view:focus-visible {
    text-decoration: underline;
}

.clasp-ticket-empty {
    color: #64748b;
    font-size: 14px;
}

/* Authenticated header account menu — flush right under the name button. */
.clasp-help-account {
    position: relative;
}

.clasp-help-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--mud-palette-primary, #2563eb);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.clasp-help-account-trigger:hover,
.clasp-help-account-trigger:focus-visible {
    filter: brightness(0.95);
}

.clasp-help-account-trigger:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

.clasp-help-account-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.clasp-help-account-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.clasp-help-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    min-width: 200px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
}

.clasp-help-account-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid #F1F5F9;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.clasp-help-account-item:last-child {
    border-bottom: 0;
}

.clasp-help-account-item:hover,
.clasp-help-account-item:focus-visible {
    background: #f8fafc;
    outline: none;
}

/* Profile settings — centered 65% content, avatar card + profile form. */
.clasp-profile-shell {
    width: 65%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

.clasp-profile {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.clasp-profile-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    text-align: center;
}

.clasp-profile-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #FF7A00;
    color: #fff;
}

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

.clasp-profile-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

.clasp-profile-photo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    opacity: 0;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.clasp-profile-avatar:hover .clasp-profile-photo,
.clasp-profile-avatar:focus-within .clasp-profile-photo,
.clasp-profile-photo.is-busy {
    opacity: 1;
}

.clasp-profile-photo-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 96px;
    padding: 0 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    pointer-events: none;
}

.clasp-profile-photo-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.clasp-profile-photo-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.clasp-profile-photo-input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.clasp-profile-name {
    color: #292B2C;
    font-size: 1.05rem;
    font-weight: 700;
}

.clasp-profile-email,
.clasp-profile-org {
    color: #0072CE;
    font-size: 14px;
    text-decoration: none;
}

.clasp-profile-email:hover,
.clasp-profile-org:hover,
.clasp-profile-email:focus-visible,
.clasp-profile-org:focus-visible {
    text-decoration: underline;
}

.clasp-profile-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.clasp-profile-status.is-pending {
    background: #FF7A00;
    color: #ffffff;
}

.clasp-profile-status.is-active {
    background: #D1FAE5;
    color: #047857;
}

.clasp-profile-status.is-locked {
    background: #F1F5F9;
    color: #475569;
}

.clasp-profile-panel {
    min-width: 0;
    padding: 8px 8px 16px;
    background: #ffffff;
    border: none;
    border-radius: 8px;
    overflow: visible;
}

.clasp-profile-tabs {
    border-bottom: 1px solid #E9ECEF;
    margin-bottom: 20px;
}

.clasp-profile-tab {
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 12px 16px;
    background: transparent;
    color: #6C757D;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
}

.clasp-profile-tab.is-active {
    color: #0072CE;
    border-bottom-color: #0072CE;
}

.clasp-profile-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    padding: 10px 16px 0;
    overflow: visible;
}

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

.clasp-profile-actions {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px 0;
}

/* Material outlined fields on /me and the Change Password dialog.
   The shrunk label sits in the top border notch at 14px, not scaled to 12px. */
.clasp-outline-fields {
    overflow: visible;
}

.clasp-outline-fields .mud-input-control,
.clasp-outline-fields .mud-input-control.mud-input-outlined-with-label {
    overflow: visible;
    margin-top: 10px;
    margin-bottom: 4px;
}

.clasp-outline-fields .mud-input.mud-input-outlined {
    background: #ffffff;
    border-radius: 8px;
    color: rgb(41, 43, 44);
}

.clasp-outline-fields .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-color: #CBD5E1;
    border-width: 1px;
    border-radius: 8px;
    background: transparent;
}

.clasp-outline-fields .mud-input-outlined-border legend {
    font-size: 14px;
    font-weight: 400;
}

.clasp-outline-fields .mud-input.mud-input-outlined:hover > .mud-input-outlined-border {
    border-color: #94A3B8;
}

.clasp-outline-fields .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.clasp-outline-fields .mud-input.mud-input-outlined.mud-disabled > .mud-input-outlined-border {
    border-width: 1px;
    border-color: #CBD5E1;
}

.clasp-outline-fields .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-color: var(--mud-palette-primary, #2563eb);
}

.mud-application-layout-rtl .clasp-outline-fields .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .clasp-outline-fields .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(-12px, -9px) scale(1);
}

.clasp-outline-fields .mud-input > input.mud-input-root.mud-input-root-outlined,
.clasp-outline-fields .mud-input > .mud-input-slot.mud-input-root-outlined:not(textarea) {
    color: rgb(41, 43, 44);
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    min-height: 40px;
    padding: 6px 12px;
    line-height: 26px;
    box-sizing: border-box;
}

.clasp-outline-fields .mud-input > textarea.mud-input-root.mud-input-root-outlined {
    color: rgb(41, 43, 44);
    font-size: 14px;
    font-weight: 400;
    height: auto;
    min-height: 96px;
    padding: 8px 12px;
    line-height: 1.45;
    box-sizing: border-box;
}

.clasp-outline-fields input::placeholder,
.clasp-outline-fields textarea::placeholder,
.clasp-password-dialog input::placeholder {
    font-size: 14px;
    color: #9ca3af;
    opacity: 1;
}

.clasp-password-dialog .clasp-password-field {
    position: relative;
}

.clasp-password-dialog .clasp-password-field > .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.clasp-password-dialog .clasp-password-eye {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.clasp-password-dialog .clasp-password-eye:hover,
.clasp-password-dialog .clasp-password-eye:focus-visible {
    color: #1f2937;
    outline: none;
}

.clasp-password-dialog .clasp-password-field .mud-input > input.mud-input-root-outlined,
.clasp-password-dialog .clasp-password-field .mud-input > .mud-input-slot.mud-input-root-outlined {
    padding-right: 40px;
}

.clasp-outline-fields .mud-input.mud-disabled,
.clasp-outline-fields .mud-input-root:disabled {
    color: #292B2C;
    -webkit-text-fill-color: #292B2C;
}

.clasp-outline-fields label.mud-input-label {
    color: #9ca3af;
    font-size: 14px;
    font-weight: 400;
}

.clasp-outline-fields .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.clasp-outline-fields .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    color: #334155;
    font-size: 14px;
    font-weight: 400;
    background-color: #ffffff;
    transform: translate(12px, -9px) scale(1);
}

.clasp-outline-fields .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: #dc3545;
    font-weight: 400;
}

/* Submit labels already include one asterisk. MudBlazor's required ::after
   would paint a second one (Email Address **, Subject **). */
.clasp-submit-page .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    content: none;
}

/* Customer ticket detail — centered 65% column, 70% thread / 30% sidebar. */
.clasp-help-ticket {
    width: 65%;
    max-width: 65vw;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 48px;
    box-sizing: border-box;
}

.clasp-help-ticket-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: #6C757D;
    font-size: 14px;
}

.clasp-help-ticket-crumbs a {
    color: #6C757D;
    text-decoration: none;
}

.clasp-help-ticket-crumbs a:hover,
.clasp-help-ticket-crumbs a:focus-visible {
    text-decoration: underline;
}

.clasp-help-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.clasp-help-ticket-title {
    margin: 0;
    color: #292B2C;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.clasp-help-ticket-status {
    flex: 0 0 auto;
    background: #0072CE;
    color: #FFFFFF;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 16px;
    line-height: 1.2;
    white-space: nowrap;
}

.clasp-help-ticket-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(220px, 3fr);
    gap: 24px;
    align-items: start;
}

.clasp-help-ticket-reply,
.clasp-help-ticket-message {
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.clasp-help-ticket-reply {
    margin-bottom: 16px;
}

.clasp-help-ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clasp-help-ticket-reply-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.clasp-help-ticket-reply-tab {
    color: #292B2C;
    font-size: 14px;
    font-weight: 700;
}

.clasp-help-ticket-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #0072CE;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.clasp-help-ticket-close:disabled {
    opacity: 0.6;
    cursor: default;
}

.clasp-help-ticket-reply .ql-toolbar.ql-snow,
.clasp-submit-card .ticket-form-field-body .ql-toolbar.ql-snow {
    border: 1px solid #CBD5E1;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: #334155;
    font-size: 14px;
    padding: 8px;
}

.clasp-help-ticket-reply .ql-toolbar.ql-snow .ql-picker-label,
.clasp-help-ticket-reply .ql-toolbar.ql-snow button,
.clasp-submit-card .ticket-form-field-body .ql-toolbar.ql-snow .ql-picker-label,
.clasp-submit-card .ticket-form-field-body .ql-toolbar.ql-snow button {
    color: #334155;
    font-size: 14px;
}

.clasp-help-ticket-reply .ql-container.ql-snow,
.clasp-submit-card .ticket-form-field-body .ql-container.ql-snow {
    border: 1px solid #CBD5E1;
    border-radius: 0 0 6px 6px;
    font-size: 14px;
}

.clasp-help-ticket-reply .ql-editor,
.clasp-help-ticket-reply .ql-editor p,
.clasp-submit-card .ticket-form-field-body .ql-editor,
.clasp-submit-card .ticket-form-field-body .ql-editor p {
    color: #292B2C;
    font-size: 14px;
    font-weight: 400;
}

.clasp-help-ticket-reply .ql-editor,
.clasp-submit-card .ticket-form-field-body .ql-editor {
    padding: 12px 15px;
}

.clasp-help-ticket-reply .quill-editor-host:focus-within .ql-toolbar.ql-snow,
.clasp-help-ticket-reply .quill-editor-host:focus-within .ql-container.ql-snow,
.clasp-submit-card .ticket-form-field-body .quill-editor-host:focus-within .ql-toolbar.ql-snow,
.clasp-submit-card .ticket-form-field-body .quill-editor-host:focus-within .ql-container.ql-snow {
    border-color: #0072CE;
}

.clasp-help-ticket-reply .quill-editor-host:focus-within,
.clasp-submit-card .ticket-form-field-body .quill-editor-host:focus-within {
    outline: 1px solid #0072CE;
    border-radius: 6px;
}

.clasp-help-ticket-reply-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.clasp-help-ticket-reply-attach {
    flex: 1 1 auto;
    min-width: 0;
}

.clasp-help-ticket-reply-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.clasp-help-ticket-btn {
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.clasp-help-ticket-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.clasp-help-ticket-btn-secondary {
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #334155;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 14px;
}

.clasp-help-ticket-btn-primary {
    background: #0072CE;
    color: #FFFFFF;
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 600;
    border: none;
}

.clasp-help-ticket-message-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clasp-help-ticket-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FF7A00;
    color: #FFF;
    font-weight: bold;
    flex: 0 0 auto;
}

.clasp-help-ticket-author {
    color: #292B2C;
    font-weight: 700;
}

.clasp-help-ticket-time {
    margin-left: auto;
    color: #6C757D;
    font-size: 14px;
    white-space: nowrap;
}

.clasp-help-ticket-body {
    margin-top: 12px;
    color: #333333;
    line-height: 1.6;
}

.clasp-help-ticket-side {
    background: #FAFAFA;
    border: 1px solid #E9ECEF;
    border-radius: 8px;
    padding: 20px;
}

.clasp-help-ticket-side h2 {
    margin: 0 0 16px;
    color: #292B2C;
    font-size: 18px;
    font-weight: 700;
}

.clasp-help-ticket-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.clasp-help-ticket-meta dt {
    margin-bottom: 4px;
    color: #334155;
    font-size: 14px;
    font-weight: 400;
}

.clasp-help-ticket-meta dd {
    margin: 0;
    color: #292B2C;
    font-size: 14px;
    font-weight: 400;
}

.clasp-help-ticket-empty {
    color: #334155;
    font-size: 14px;
    font-weight: 400;
}

.clasp-help-ticket .mud-input,
.clasp-help-ticket .mud-input-slot,
.clasp-help-ticket .mud-input-label,
.clasp-help-ticket .mud-select-input,
.clasp-help-ticket .mud-button-label,
.clasp-help-ticket .mud-typography {
    color: #292B2C;
    font-size: 14px;
    font-weight: 400;
}

.clasp-help-ticket .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border: 1px solid #CBD5E1;
}

.clasp-help-ticket .mud-button-filled-primary .mud-button-label {
    color: #ffffff;
}

@media (max-width: 960px) {
    .clasp-help-ticket {
        width: 100%;
        max-width: none;
    }

    .clasp-profile-shell {
        width: 100%;
        max-width: none;
    }

    .clasp-profile,
    .clasp-profile-fields {
        grid-template-columns: 1fr;
    }

    .clasp-help-ticket-grid,
    .clasp-help-ticket-head,
    .clasp-help-ticket-reply-foot {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    .clasp-help-ticket-reply-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 960px) {
    .clasp-ticket-dash-inner {
        width: calc(100% - 32px);
        max-width: none;
    }

    .clasp-ticket-dash-head {
        flex-direction: column;
    }

    .clasp-ticket-search {
        margin-left: 0;
        width: 100%;
    }
}

/* Timesheet (/timesheet) — same card language as the Support Tickets dashboard. */
.clasp-timesheet {
    margin: -24px -24px 0;
    padding: 0 0 48px;
    background: #F8FAFC;
    color: #292B2C;
    flex: 1 1 auto;
    min-height: 100%;
}

.clasp-timesheet-inner {
    width: 65%;
    max-width: 65%;
    margin: 0 auto;
    box-sizing: border-box;
}

.clasp-timesheet-head {
    margin-top: 32px;
}

.clasp-timesheet-title {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.clasp-timesheet-subtitle {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.clasp-timesheet-card {
    margin-top: 24px;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    background: #ffffff;
}

.clasp-timesheet-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 16px 20px;
}

.clasp-timesheet-preset {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 260px;
}

.clasp-timesheet-date {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 240px;
}

.clasp-timesheet-selected-range {
    flex: 1 1 100%;
}

.clasp-timesheet-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.clasp-timesheet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.clasp-timesheet-btn-primary {
    border-color: #2563EB;
    background: #2563EB;
    color: #ffffff;
}

.clasp-timesheet-btn:hover,
.clasp-timesheet-btn:focus-visible {
    filter: brightness(0.97);
}

.clasp-timesheet-btn-primary:hover,
.clasp-timesheet-btn-primary:focus-visible {
    color: #ffffff;
}

.clasp-timesheet-btn:disabled,
.clasp-timesheet-btn.is-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

.clasp-timesheet-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    padding: 0 20px 16px;
    color: #334155;
    font-size: 14px;
}

.clasp-timesheet-metric-label {
    margin-right: 8px;
    color: #64748b;
    font-size: 14px;
}

.clasp-timesheet-metric-value {
    color: #292B2C;
    font-size: 14px;
    font-weight: 700;
}

.clasp-timesheet-table-card {
    overflow: hidden;
    padding: 0;
}

.clasp-timesheet-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.clasp-timesheet-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    text-align: left;
}

.clasp-timesheet-table th {
    padding: 12px 16px;
    background: #F8FAFC;
    color: #64748B;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.clasp-timesheet-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    color: #292B2C;
    font-size: 14px;
    vertical-align: middle;
}

.clasp-timesheet-table tr:last-child td {
    border-bottom: 0;
}

.clasp-timesheet-table a {
    color: #1e3a8a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.clasp-timesheet-table a:hover,
.clasp-timesheet-table a:focus-visible {
    color: #2563EB;
    text-decoration: underline;
}

a.clasp-timesheet-id-subject {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: inherit;
    font-weight: 400;
    text-decoration: none;
}

a.clasp-timesheet-id-subject:hover,
a.clasp-timesheet-id-subject:focus-visible {
    color: inherit;
    text-decoration: none;
}

.clasp-timesheet-ticket-id {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.clasp-timesheet-ticket-subject {
    color: #2563eb;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

a.clasp-timesheet-id-subject:hover .clasp-timesheet-ticket-subject,
a.clasp-timesheet-id-subject:focus-visible .clasp-timesheet-ticket-subject {
    text-decoration: underline;
}

.clasp-timesheet-empty {
    color: #64748b;
    font-size: 14px;
}

.clasp-timesheet .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.clasp-timesheet .mud-input,
.clasp-timesheet .mud-input-slot,
.clasp-timesheet .mud-input-label,
.clasp-timesheet .mud-input-root,
.clasp-timesheet input {
    color: #292B2C;
    font-size: 14px;
}

.clasp-timesheet .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border: 1px solid #CBD5E1;
    border-radius: 8px;
}

@media (max-width: 960px) {
    .clasp-timesheet-inner {
        width: calc(100% - 32px);
        max-width: none;
    }

    .clasp-timesheet-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* Submit ticket (/tickets/submit) — elevated card. Field behavior stays on the form. */
.clasp-submit-page {
    margin: -24px -24px 0;
    padding: 32px 24px 48px;
    background: #f8fafc;
    min-height: 100vh;
}

.clasp-help-layout.mud-layout:has(.clasp-submit-page),
.clasp-help-main.mud-main-content:has(.clasp-submit-page) {
    background: #f8fafc;
}

.clasp-submit-card {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 48px;
}

.clasp-submit-badge {
    display: inline-flex;
    background: #dbeafe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 99px;
}

.clasp-submit-title {
    margin: 16px 0 8px;
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.clasp-submit-sub {
    margin: 0 0 28px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    white-space: pre-wrap;
}

.clasp-submit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.clasp-submit-grid > .ticket-form-field-span,
.clasp-submit-grid > .clasp-submit-span {
    grid-column: 1 / -1;
}

/* Subject suggestions float under the outlined input. The open field is the
   stacking context so the menu paints over the description without pushing it
   down. The list's containing block is the whole field, which also holds the
   character counter, so 100% sits below that counter. Anchor the menu to the
   input container instead. The first top is the one-line helper/counter
   fallback (0.75rem * 1.66 line-height + 3px margin); browsers that understand
   anchor() replace it and stay attached when helper text wraps. Visuals match
   the language menu and home search overlay. */
.clasp-subject-article-field {
    position: relative;
}

.clasp-subject-article-field.has-suggestions {
    z-index: 4;
}

.clasp-subject-article-field .mud-input-control-input-container {
    anchor-name: --clasp-subject-input;
}

.clasp-subject-articles {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 0.75rem * 1.66 - 3px + 4px);
    top: calc(anchor(--clasp-subject-input bottom) + 4px);
    z-index: 1;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
}

.clasp-subject-articles a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1d4ed8;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.clasp-subject-articles a:hover,
.clasp-subject-articles a:focus-visible {
    background: #f8fafc;
    text-decoration: none;
}

.clasp-subject-articles a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.clasp-subject-article-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.clasp-subject-article-excerpt {
    display: block;
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* Requester row: Email Address (left) then Your Name (right). Stacks with the form. */
.clasp-submit-requester {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.clasp-submit-card .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.clasp-outline-fields .ticket-form-field-body textarea.mud-input-root-outlined {
    min-height: 180px;
    height: auto;
}

.clasp-submit-editor-label {
    display: block;
    margin: 0 0 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.clasp-submit-attach-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #475569;
}

.clasp-submit-page input,
.clasp-submit-page textarea,
.clasp-submit-page select,
.clasp-submit-page .mud-input-root,
.clasp-submit-page .mud-input-slot,
.clasp-help-ticket input,
.clasp-help-ticket textarea,
.clasp-help-ticket select,
.clasp-help-ticket .mud-input-root,
.clasp-help-ticket .mud-input-slot,
.clasp-help-ticket .ql-editor {
    font-size: 14px;
    color: rgb(41, 43, 44);
}

.clasp-submit-attach-label {
    margin-bottom: 8px;
}

.clasp-submit-dropzone {
    display: block;
    width: 100%;
    padding: 40px;
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.clasp-submit-dropzone:hover:not([aria-disabled="true"]),
.clasp-submit-dropzone:focus-visible:not([aria-disabled="true"]),
.clasp-submit-dropzone.is-dragover:not([aria-disabled="true"]) {
    border-color: #2563eb;
    background: #eff6ff;
    outline: none;
}

.clasp-submit-dropzone[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.65;
}

.clasp-submit-dropzone-icon {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    color: #2563eb;
}

.clasp-submit-dropzone-title {
    margin: 12px 0 0;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.clasp-submit-dropzone-sub {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 13px;
}

.clasp-submit-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.clasp-submit-cancel,
.clasp-submit-primary {
    font: inherit;
    cursor: pointer;
}

.clasp-submit-cancel {
    border: 0;
    background: transparent;
    color: #475569;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 600;
}

.clasp-submit-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: var(--clasp-button-color, #2563eb);
    color: var(--clasp-button-text, #ffffff);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.clasp-submit-primary svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex: 0 0 auto;
}

.clasp-submit-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: clasp-submit-spin 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes clasp-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

.clasp-submit-cancel:disabled,
.clasp-submit-primary:disabled {
    opacity: 0.55;
    cursor: default;
}

.clasp-submit-primary:hover:not(:disabled),
.clasp-submit-primary:focus-visible:not(:disabled) {
    filter: brightness(0.95);
}

@media (max-width: 720px) {
    .clasp-submit-card {
        padding: 28px 16px;
    }

    .clasp-submit-grid,
    .clasp-submit-requester {
        grid-template-columns: 1fr;
    }

    .clasp-submit-actions {
        flex-wrap: wrap;
    }
}

/* Help-portal confirmation cards (unsaved changes, close ticket). */
.mud-dialog.clasp-help-confirm {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.clasp-help-confirm .mud-dialog-title {
    display: none;
}

.clasp-help-confirm .mud-dialog-content {
    padding: 28px 32px 24px;
}

.clasp-help-confirm-title {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.mud-dialog.clasp-help-confirm .clasp-help-confirm-message {
    margin: 16px 0 24px;
    color: #334155;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.clasp-help-confirm-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.clasp-help-confirm-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.clasp-help-confirm-btn.is-accent {
    color: #4f46e5;
}

.clasp-help-confirm-btn:focus-visible {
    text-decoration: underline;
    outline: none;
}

/* Ticket submit success replaces the inline banner. Brand copy may use <br>. */
.clasp-submit-success-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.6);
}

.clasp-submit-success-dialog {
    position: relative;
    box-sizing: border-box;
    width: min(480px, 100%);
    min-width: min(320px, 100%);
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 20px 28px 28px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    color: #0f172a;
    outline: none;
}

.clasp-submit-success-header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.clasp-submit-success-header-balance {
    width: 32px;
    height: 32px;
}

.clasp-submit-success-title {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.clasp-submit-success-close {
    justify-self: end;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.clasp-submit-success-close:hover,
.clasp-submit-success-close:focus-visible {
    color: #0f172a;
    background: #f1f5f9;
}

.clasp-submit-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 16px auto 12px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #047857;
}

.clasp-submit-success-icon svg {
    width: 28px;
    height: 28px;
}

.clasp-submit-success-message {
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    color: #334155;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    text-align: center;
    white-space: pre-line;
}

.clasp-submit-success-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
}

.clasp-submit-success-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    border: 0;
    border-radius: 8px;
    background: var(--clasp-button-color, #2563eb);
    color: var(--clasp-button-text, #ffffff);
    padding: 12px 28px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.clasp-submit-success-ok:hover,
.clasp-submit-success-ok:focus-visible {
    filter: brightness(0.95);
}

.clasp-submit-success-ok:focus-visible {
    outline: 2px solid var(--clasp-button-color, #2563eb);
    outline-offset: 2px;
}

/* Help-portal selects render in a popover, so the dark input color has to
   be repeated on the list. Hover and selection stay on the background. */
.mud-popover.clasp-select-popover .mud-list-item,
.mud-popover.clasp-select-popover .mud-list-item.mud-primary-text,
.mud-popover.clasp-select-popover .mud-list-item .mud-list-item-text,
.mud-popover.clasp-select-popover .mud-list-item .mud-typography {
    color: rgb(41, 43, 44) !important;
}

.mud-popover.clasp-select-popover .mud-list-item:hover,
.mud-popover.clasp-select-popover .mud-list-item.mud-primary-hover,
.mud-popover.clasp-select-popover .mud-list-item:focus-visible {
    background: #f1f5f9 !important;
}

.mud-popover.clasp-select-popover .mud-list-item.mud-selected-item {
    background: #e8eef4 !important;
}