h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ---------------------------------------------------------------------------
   PadZero design system
   A thin layer on top of MudBlazor, translated from Plane's Propel design
   system (https://propel.plane.so). The palette, type scale and elevations
   come from Components/Theming/PadZeroTheme.cs and reach this file as --mud-*
   variables, so light and dark follow the theme. Only the geometry and the
   states MudBlazor does not express itself are written here.
   --------------------------------------------------------------------------- */

/* Propel scale: rounded-sm 4px for small things inside a control,
   rounded-md 6px for controls, rounded-lg 8px for containers. */
:root {
    --pz-font-sans: 'Inter', 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --pz-radius-sm: 4px;
    --pz-radius: 6px;
    --pz-radius-lg: 8px;
    --pz-radius-xl: 12px;
    /* Propel's chrome rungs (--text-body-xs / --text-body-sm): 13px for table
       cells, metadata and labels, 14px for content. The semantic ladder lives
       in PadZeroTheme.cs; these are for the rules that set a size here. */
    --pz-text-xs: 0.8125rem;
    --pz-text-sm: 0.875rem;
    /* The rungs below the body: 12px (--text-12) for a panel's secondary text,
       11px (--text-11) for table headers and change details. */
    --pz-text-2xs: 0.75rem;
    --pz-text-3xs: 0.6875rem;
    /* Propel's control scale: 36px inputs (--control-height-xl), 32px buttons
       (lg), 12px of horizontal padding and 16px glyphs. The workhorse is 28px,
       which is too tight for a labelled form, so 36 is the floor here. */
    --pz-control-height: 2.25rem;
    --pz-button-height: 2rem;
    --pz-control-padding-x: 0.75rem;
    --pz-glyph: 1rem;
    /* Propel elevation: raised-* stays in the flow, overlay-* floats above it,
       direction-* is a side panel casting onto the content it covers. */
    --pz-shadow-raised-100: 0px 1px 6px -1px rgba(41, 47, 61, 0.03), 0px 1px 4px 0px rgba(41, 47, 61, 0.04);
    --pz-shadow-raised-200: 0px 1px 2px -1px rgba(41, 47, 61, 0.06), 0px 1px 3px 0px rgba(41, 47, 61, 0.05);
    --pz-shadow-raised-300: 0px 2px 4px -1px rgba(41, 47, 61, 0.04), 0px 4px 6px -1px rgba(41, 47, 61, 0.05);
    --pz-shadow-overlay-100: 0px 10px 10px -5px rgba(41, 47, 61, 0.04), 0px 10px 40px -5px rgba(41, 47, 61, 0.04);
    --pz-shadow-overlay-200: 0px 10px 10px -10px rgba(41, 47, 61, 0.04), 0px 30px 60px -12px rgba(41, 47, 61, 0.10);
    --pz-header-height: 52px;
    color-scheme: var(--mud-native-html-color-scheme, light);
}

/* Base ----------------------------------------------------------------- */
html,
body {
    font-family: var(--pz-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* MudBlazor ships no reset, and the browser's default heading and paragraph
   margins are a big part of why an unstyled layout looks dated. */
h1, h2, h3, h4, h5, h6, p, figure, blockquote {
    margin: 0;
}

button, input, select, textarea {
    font-family: inherit;
}

::selection {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.22);
}

/* Slim scrollbars ------------------------------------------------------ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-inputs) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-lines-inputs);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--mud-palette-gray-default);
}

/* Navigation ----------------------------------------------------------- */
.pz-nav-label {
    padding: 0.75rem 0.625rem 0.25rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.pz-nav .mud-nav-link {
    margin: 1px 0;
    padding: 0.375rem 0.5rem;
    min-height: 28px;
    border-radius: var(--pz-radius);
    color: var(--mud-palette-drawer-text);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 120ms ease, color 120ms ease;
}

.pz-nav .mud-nav-link .mud-icon-root {
    color: var(--mud-palette-drawer-icon);
    transition: color 120ms ease;
}

.pz-nav .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    color: var(--mud-palette-text-primary);
}

.pz-nav .mud-nav-link:hover .mud-icon-root {
    color: var(--mud-palette-text-primary);
}

/* MudBlazor's active rule is highly specific and adds a right border, so the
   pill treatment has to out-rank it. */
.pz-nav .mud-nav-link.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
    border-inline-end-width: 0 !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500;
}

.pz-nav .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary);
}

/* Cards ---------------------------------------------------------------- */
.pz-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pz-radius-lg);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--pz-shadow-raised-100);
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

/* Propel lifts a card to raised-300 on hover; it never floats, so no
   transform here. */
.pz-card--interactive:hover {
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: var(--pz-shadow-raised-300);
}

.pz-card__text {
    color: var(--mud-palette-text-secondary);
}

/* Hero ----------------------------------------------------------------- */
.pz-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pz-radius-xl);
    background-color: var(--mud-palette-surface);
    background-image:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--mud-palette-primary-rgb), 0.10) 0%, rgba(var(--mud-palette-primary-rgb), 0) 55%),
        radial-gradient(90% 120% at 100% 0%, rgba(var(--mud-palette-info-rgb), 0.08) 0%, rgba(var(--mud-palette-info-rgb), 0) 55%);
}

.pz-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.pz-hero__title {
    max-width: 24ch;
}

.pz-hero__subtitle {
    max-width: 62ch;
    margin-top: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.pz-hero__actions {
    margin-top: 1.75rem;
}

/* Feature cards -------------------------------------------------------- */
.pz-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: var(--pz-radius);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.pz-feature__title {
    margin-bottom: 0.375rem;
}

.pz-feature__text {
    color: var(--mud-palette-text-secondary);
}

/* Page header ---------------------------------------------------------- */
.pz-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pz-page-header__main {
    min-width: 0;
}

.pz-page-header__eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--mud-palette-text-tertiary, var(--mud-palette-text-secondary));
    font-weight: 500;
}

.pz-page-header__subtitle {
    max-width: 68ch;
    margin-top: 0.25rem;
    color: var(--mud-palette-text-secondary);
}

.pz-page-header__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-top: 0.125rem;
}

/* Plane titles a page in the h5 rung (18px/1.2/500); the 32px h1 the MudText
   typo asks for belongs to a marketing hero, not to application chrome. */
.pz-page-header .pz-page-header__title {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
}

@media (max-width: 599.98px) {
    .pz-page-header {
        flex-direction: column;
    }
}

/* A peek's heading: the record's name with the entity label under it. */
.pz-pane__titles {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.pz-pane__title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pz-pane__subtitle {
    color: var(--mud-palette-text-secondary);
}

/* Buttons -------------------------------------------------------------- */
/* Propel sizes: md is 28px, lg 32px, and a filled button carries the raised
   elevation at rest instead of Material's hover lift. */
.mud-button-root.mud-button-size-medium {
    min-height: 32px;
    padding-inline: 0.75rem;
}

.mud-button-root.mud-button-size-large {
    min-height: 36px;
}

.mud-button-root.mud-button-size-small {
    min-height: 28px;
    padding-inline: 0.625rem;
}

.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:active {
    box-shadow: var(--pz-shadow-raised-100) !important;
}

/* A saturated outline competes with the filled primary action next to it, so
   outlined buttons get a neutral hairline and keep their colour in the label.
   The colour returns to the border on hover. */
.mud-button-root.mud-button-outlined:not(.mud-button-outlined-inherit) {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.mud-button-root.mud-button-outlined:not(.mud-button-outlined-inherit):hover {
    border-color: currentColor !important;
}

.mud-button-root:focus-visible {
    outline: 2px solid rgba(var(--mud-palette-primary-rgb), 0.55);
    outline-offset: 2px;
}

/* Tables and data grids ------------------------------------------------ */
.mud-table-root {
    font-size: 0.8125rem;
}

.mud-table-head .mud-table-cell,
.mud-table-head .mud-table-cell .mud-button-root {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.mud-table-row .mud-table-cell {
    border-bottom-color: var(--mud-palette-lines-default);
}

/* Overlays and small components ---------------------------------------- */
.mud-dialog {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pz-radius-xl) !important;
    box-shadow: var(--pz-shadow-overlay-200) !important;
}

.mud-popover,
.mud-menu-list,
.mud-select-list {
    border-radius: var(--pz-radius-lg);
    box-shadow: var(--pz-shadow-overlay-100) !important;
}

.mud-snackbar {
    border-radius: var(--pz-radius);
}

.mud-chip {
    border-radius: var(--pz-radius);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Inputs use MudBlazor's standard (underlined) variant, so there is no box to
   round: the underline takes the theme's line colours and turns accent on
   focus, and only the 13px label from Propel's sizing ladder is left to set. */
.mud-input-root {
    font-size: 0.8125rem;
}

.mud-input-label {
    font-size: 0.8125rem;
}

/* App shell ------------------------------------------------------------ */
/* Propel's surfaces are opaque and separated by a hairline, not a blur. */
.pz-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-appbar .mud-icon-button {
    border-radius: var(--pz-radius);
}

.mud-appbar .mud-icon-button:hover,
.mud-appbar .mud-icon-button:focus-visible {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* The tenant the signed-in user works in, next to the account menu. */
.pz-tenant-badge {
    align-items: center;
    gap: 0.375rem;
    max-width: 240px;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.28);
    border-radius: 999px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.pz-tenant-badge span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pz-menu-tenant {
    padding: 0.5rem 1rem;
}

.pz-menu-tenant .mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

.pz-menu-tenant__name {
    font-weight: 600;
}

.pz-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Content column: generous, centred margins. MudMainContent already pads the
   top by the app bar height. */
.pz-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

@media (min-width: 600px) {
    .pz-content {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 900px) {
    .pz-content {
        padding: 1.5rem;
    }
}

/* Stat tiles: a headline number and its change from the previous period. */
.pz-stat {
    height: 100%;
}

.pz-stat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pz-stat__label,
.pz-stat__compare {
    color: var(--mud-palette-text-secondary);
}

.pz-stat__icon {
    color: var(--mud-palette-text-secondary);
}

.pz-stat__value {
    font-weight: 600;
    margin: 0.25rem 0;
}

.pz-stat__delta {
    font-weight: 600;
}

.pz-stat__delta--up {
    color: var(--mud-palette-success);
}

.pz-stat__delta--down {
    color: var(--mud-palette-error);
}

.pz-stat__delta--flat {
    color: var(--mud-palette-text-secondary);
}

/* Numeric table columns. */
.pz-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pz-truncate {
    max-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ApexCharts draws its text, grid and tooltips with fixed colours. These rules
   make them follow the light/dark theme. */
.pz-chart-card .apexcharts-text,
.pz-chart-card .apexcharts-legend-text {
    fill: var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-secondary) !important;
}

.pz-chart-card .apexcharts-gridline,
.pz-chart-card .apexcharts-xaxis line,
.pz-chart-card .apexcharts-xaxis-tick {
    stroke: var(--mud-palette-lines-default);
}

.pz-chart-card .apexcharts-tooltip,
.pz-chart-card .apexcharts-xaxistooltip {
    background: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary);
    box-shadow: var(--pz-shadow-overlay-100) !important;
}

.pz-chart-card .apexcharts-tooltip-title {
    background: var(--mud-palette-background-gray) !important;
    border-bottom-color: var(--mud-palette-lines-default) !important;
}

/* Idea intake chat ----------------------------------------------------- */
.pz-chat {
    display: flex;
    flex-direction: column;
    min-height: 32rem;
}

.pz-chat__messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.25rem;
}

.pz-chat__bubble {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    border-radius: var(--pz-radius-lg);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pz-chat__bubble--assistant {
    align-self: flex-start;
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    border-bottom-left-radius: 0.25rem;
}

.pz-chat__bubble--user {
    align-self: flex-end;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-bottom-right-radius: 0.25rem;
}

.pz-chat__typing {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

.pz-chat__typing span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: var(--mud-palette-text-secondary);
    animation: pz-typing 1.2s infinite ease-in-out;
}

.pz-chat__typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.pz-chat__typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes pz-typing {
    0%, 80%, 100% {
        opacity: 0.25;
    }

    40% {
        opacity: 1;
    }
}

.pz-chat__summary {
    margin: 0 1.25rem 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.28);
    border-radius: var(--pz-radius-lg);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.pz-chat__composer {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pz-captured + .pz-captured {
    margin-top: 1rem;
}

.pz-captured__label {
    display: block;
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.pz-captured__empty {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

/* Submitted idea summary ----------------------------------------------- */
.pz-idea-summary {
    overflow: hidden;
    border-color: rgba(var(--mud-palette-primary-rgb), 0.28);
}

.pz-idea-summary__header {
    padding: 1rem;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pz-idea-summary__label {
    display: block;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.pz-idea-summary__text {
    font-size: 1.125rem;
    line-height: 1.65;
    max-width: 72ch;
}

.pz-idea-summary__details {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Idea score panel ----------------------------------------------------- */
@media (min-width: 960px) {
    /* Keep the score in view while the conversation scrolls. */
    .pz-score-panel {
        position: sticky;
        top: calc(var(--mud-appbar-height) + 1rem);
    }
}

.pz-score-panel__spinner {
    width: 1rem !important;
    height: 1rem !important;
}

.pz-score-priority {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.pz-score-priority__value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.pz-score-priority__max {
    color: var(--mud-palette-text-secondary);
}

.pz-score-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1.25rem;
}

.pz-score-row-root {
    display: block;
    width: 100%;
}

.pz-score-row {
    --pz-score-color: var(--mud-palette-text-disabled);
    padding: 0.5rem 0.625rem;
    border-radius: var(--pz-radius);
    cursor: help;
    outline: none;
}

.pz-score-row:hover,
.pz-score-row:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
}

.pz-score-row--low {
    --pz-score-color: var(--mud-palette-error);
}

.pz-score-row--mid {
    --pz-score-color: var(--mud-palette-warning);
}

.pz-score-row--high {
    --pz-score-color: var(--mud-palette-success);
}

.pz-score-row__head {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.875rem;
}

.pz-score-row__label {
    font-weight: 500;
}

.pz-score-row__weight {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0 0.3rem;
    border-radius: 0.25rem;
    color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.pz-score-row__value {
    margin-left: auto;
    font-weight: 700;
    color: var(--pz-score-color);
}

.pz-score-bar {
    height: 0.375rem;
    margin-top: 0.375rem;
    border-radius: 999px;
    background-color: var(--mud-palette-lines-default);
    overflow: hidden;
}

.pz-score-bar__fill {
    height: 100%;
    border-radius: inherit;
    background-color: var(--pz-score-color);
    transition: width 400ms ease, background-color 400ms ease, opacity 400ms ease;
}

.pz-score-row--tentative .pz-score-bar__fill {
    opacity: 0.45;
}

/* An unscored dimension shows an empty, dashed track: the gap is visible. */
.pz-score-row--empty .pz-score-bar {
    background-color: transparent;
    border: 1px dashed var(--mud-palette-warning);
}

.pz-score-row__hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pz-score-row--empty .pz-score-row__hint {
    color: var(--mud-palette-warning);
}

.pz-score-tooltip {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 18rem;
    text-align: left;
}

.pz-idea-summary__priority {
    font-size: 1.125rem;
    color: var(--mud-palette-text-primary);
}

/* Idea collaboration ---------------------------------------------------- */
.pz-thread {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pz-thread__reply {
    margin: 0.5rem 0 0 1.25rem;
    padding-left: 0.875rem;
    border-left: 2px solid var(--mud-palette-lines-default);
}

.pz-thread__reply-button {
    margin-top: 0.25rem;
}

.pz-comment__body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-top: 0.25rem;
}

.pz-signal {
    font-weight: 600;
}

.pz-signal--ai {
    color: var(--mud-palette-info);
}

.pz-signal--human {
    color: var(--mud-palette-success);
}

.pz-signal--large {
    display: block;
    font-size: 1.75rem;
}

.pz-signal-row {
    display: flex;
    gap: 1.5rem;
}


/* Master-detail layout ------------------------------------------------ */
/* The list always owns the full width; the detail pane is added only when a
   record is selected, and the two share the row on wide screens. */
/* Split view: Plane's side peek ------------------------------------------
   Plane does not shrink the list when a record is previewed; it floats a panel
   over it, pinned to the right edge, half the width from md up, with only a
   left border and 4px corners. Source:
   apps/web/components/issues/peek-overview/view.tsx
   ("absolute z-[25] flex flex-col overflow-hidden rounded-sm border
   border-subtle bg-surface-1 transition-all duration-300"; side peek adds
   "top-0 right-0 bottom-0 w-full border-0 border-l md:w-[50%]"). */
.pz-split {
    position: relative;
}

/* `.pz-split--with-pane` marks the open state; the list keeps its full width
   because the pane floats, so there are no columns to change. */

.pz-split__pane {
    position: fixed;
    top: var(--mud-appbar-height);
    right: 0;
    bottom: 0;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-left: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pz-radius-sm);
    background-color: var(--mud-palette-surface);
    transition: width 300ms ease;
}

@media (min-width: 900px) {
    .pz-split__pane {
        width: min(50vw, 720px);
    }
}

/* A status next to its colour: the swatch is the tenant's own colour, set
   inline, so only its shape lives here. */
.booking-status__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.booking-status__swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
}

/* A status inside a picker or a list cell: the dot and the badge take the
   tenant's colour inline, so only their shape lives here. */
.booking-status-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.4rem;
    border-radius: 999px;
}

.moldo-grid-badge {
    height: 1.25rem;
    border: 1px solid currentColor;
    background-color: transparent;
    font-size: 0.75rem;
}

.pz-pane__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem 2rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pz-pane__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pz-pane__title {
    font-weight: 500;
}

/* Plane's peek body: 20px vertical, 32px horizontal, 12px between blocks. */
.pz-pane__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1.25rem 2rem;
}

/* List rows --------------------------------------------------------------
   Plane's list block, translated: a row is at least 44px tall with 12px of
   vertical and 16px of horizontal padding, 13px text, a hairline divider, a
   transparent hover and an accent mark on the row being peeked at. Source:
   apps/web/components/issues/issue-layouts/list/block.tsx
   ("min-h-11 ... py-3 text-13 ... hover:bg-layer-transparent-hover",
   "border-accent-strong" when peeked). The header is 36px of 12px/500 in the
   secondary colour, sticky, with none of MudBlazor's uppercase. */
.pz-list {
    padding: 0;
    overflow: hidden;
}

.pz-list .mud-table-root {
    background-color: transparent;
    border-collapse: collapse;
}

.pz-list .mud-table-head th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 36px;
    padding: 0 16px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.pz-list .mud-table-head .mud-button-root,
.pz-list .mud-table-head .mud-typography-subtitle2 {
    color: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.pz-list .mud-table-body td {
    height: 44px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    font-size: var(--pz-text-xs);
    line-height: 1.375rem;
}

.pz-list .mud-table-body tr:last-child td {
    border-bottom: none;
}

.pz-list .mud-table-body .mud-table-row {
    background-color: transparent;
    transition: background-color 120ms ease;
}

.pz-list .mud-table-body .mud-table-row:hover td {
    background-color: var(--mud-palette-table-hover, rgba(15, 15, 16, 0.04));
}

.pz-list .mud-table-row.pz-list__row--selected td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.pz-list .mud-table-row.pz-list__row--selected td:first-child {
    box-shadow: inset 2px 0 0 0 var(--mud-palette-primary);
}

.pz-list .mud-table-pagination-toolbar {
    min-height: 44px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* Plane's toolbar is a row of ghost buttons 32px tall with 13px labels. */
.moldo-grid-toolbar .mud-button-root {
    height: 32px;
    padding: 0 8px;
    border-radius: var(--pz-radius);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Controls ---------------------------------------------------------------
   MudBlazor ships its controls a step larger than Plane's: 24px glyphs and
   40px buttons against Propel's 16px and 32px. The markup stays as it is; the
   density comes from these rules plus Margin.Dense on the inputs. */
.mud-icon-root.mud-icon-size-medium {
    font-size: 1.25rem;
}

.mud-button-root .mud-icon-root,
.mud-input-adornment .mud-icon-root,
.mud-table .mud-icon-root,
.mud-nav-link .mud-icon-root,
.mud-list-item-icon {
    font-size: var(--pz-glyph);
    width: var(--pz-glyph);
    height: var(--pz-glyph);
}

.mud-input.mud-input-outlined,
.mud-input.mud-input-filled {
    padding-inline: var(--pz-control-padding-x);
}

.mud-input-control > .mud-input-control-input-container > .mud-input {
    min-height: var(--pz-control-height);
}

.mud-button-root:not(.mud-icon-button) {
    height: var(--pz-button-height);
    min-height: var(--pz-button-height);
    padding-inline: var(--pz-control-padding-x);
    border-radius: var(--pz-radius);
}

.mud-icon-button {
    width: var(--pz-button-height);
    height: var(--pz-button-height);
    padding: 0;
}

/* Form group sections -----------------------------------------------------
   MudBlazor gives each expansion panel its own surface, inherited rounded
   corners, a 48px header padded 16px vertically and (with gutters) 24px
   horizontally. Nested in a card that already has 24px of padding, that reads
   as a box inside a box, and the fields start further in than the group title
   they belong to. A group becomes a section instead: no surface, no corners,
   one hairline between groups, no horizontal inset, a 13px/500 title.

   The hairline is Plane's border-subtle: Propel's
   oklch(0.9396 0.0017 247.84) light / oklch(0.2593 0.0033 230.84) dark convert
   to #EAEBEC and #222425, which is exactly what the theme sets LinesDefault to,
   so --mud-palette-lines-default *is* the subtle divider, not an approximation. */
.pz-form .mud-expand-panel {
    margin: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: transparent;
    box-shadow: none;
}

.pz-form .mud-expand-panel:last-of-type {
    border-bottom: none;
}

.pz-form .mud-expand-panel .mud-expand-panel-header {
    min-height: 40px;
    padding: 8px 0;
    border-radius: 0;
    font-size: var(--pz-text-xs);
    font-weight: 500;
}

.pz-form .mud-expand-panel .mud-expand-panel-header.mud-expand-panel-header-gutters {
    padding-left: 0;
    padding-right: 0;
}

.pz-form .mud-expand-panel .mud-expand-panel-content,
.pz-form .mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding: 0 0 1rem;
}

.pz-form .mud-expand-panel .mud-expand-panel-icon {
    width: var(--pz-glyph);
    height: var(--pz-glyph);
    font-size: var(--pz-glyph);
    margin-left: 0.5rem;
}

/* Switches ---------------------------------------------------------------
   A switch is a labelled control without a floating label, so MudBlazor starts
   it one label rung above the text field beside it and the toggle rides above
   that field's text line. The same rung and the Dense margin its neighbours use
   put the toggle back on their baseline. The checked state gets the other half
   of the fix: Mud paints the track in the primary colour at 48% and the knob in
   the same primary, which reads as one blob, so the track is filled and the
   knob is left light, the way Plane's toggle reads.

   The :has() keeps checkboxes, which are boolean inputs too, where they are. */
.mud-input-control.mud-input-control-boolean-input:has(.mud-switch) {
    margin-block: 4px;
    padding-top: 16px;
}

.mud-switch .mud-switch-base.mud-checked .mud-switch-thumb-medium {
    background-color: var(--mud-palette-primary-text);
}

.mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    opacity: 1;
    background-color: var(--mud-palette-primary);
}

/* Quote editor -----------------------------------------------------------
   A line's type is a segmented control: a neutral track with a hairline and the
   chosen segment lifted onto the surface. Mud renders each item as an outlined
   primary button and the selected one as a filled primary block, which competes
   with the Save button for the eye. */
.quote-editor__line-type {
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pz-radius);
    background-color: var(--mud-palette-lines-default);
}

.quote-editor__line-type .mud-toggle-item.mud-button-root {
    height: 24px;
    min-height: 24px;
    padding-inline: 0.625rem;
    border: none;
    border-radius: var(--pz-radius-sm);
    font-size: var(--pz-text-xs);
    color: var(--mud-palette-text-secondary);
}

.quote-editor__line-type .mud-toggle-item.mud-button-root.mud-toggle-item-selected {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--pz-shadow-raised-100);
    font-weight: 500;
}

/* Record history ---------------------------------------------------------
   The panel sits under a record's fields, so it is a step below them: the
   heading at the subtitle rung, its cells and changes at the metadata rungs.
   Mud's body size everywhere made the panel read as loud as the form. */
.record-history .mud-table-body .mud-table-cell,
.record-history .mud-table-head .mud-table-cell {
    padding: 0.375rem 0.75rem 0.375rem 0;
}

.record-history .mud-table-body .mud-table-cell {
    font-size: var(--pz-text-2xs);
    line-height: 1.5;
}

.record-history .mud-table-head .mud-table-cell {
    font-size: var(--pz-text-3xs);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.record-history .record-history__change {
    font-size: var(--pz-text-3xs);
    color: var(--mud-palette-text-secondary);
}

.record-history .record-history__change strong {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

/* Grid toolbar and filter panel ---------------------------------------- */
/* The filter lives above the list, not in the column headers: one panel that
   names a property, a condition and a value, the way Plane's filter does. */
.moldo-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.moldo-grid-filter-count {
    color: var(--mud-palette-text-secondary);
}

.moldo-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0.75rem 0.75rem;
    padding: 0.75rem;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pz-radius);
}

.moldo-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.moldo-filter-actions {
    display: flex;
    gap: 0.5rem;
}

/* The changeset JSON box reads as code, not as prose. */
.schema-apply__json textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 719.98px) {
    .moldo-filter-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .moldo-filter-row > :nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* Maps. Leaflet sizes itself to the container, so the components set the height
   inline and the CSS only decides how the edges look. */
.pz-location-picker__map,
.pz-location-map {
    width: 100%;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: var(--pz-radius-lg);
    overflow: hidden;
}

.pz-location-map__description {
    color: var(--mud-palette-text-secondary, #616161);
    font-size: 0.8125rem;
}

/* Leaflet draws its panes above MudBlazor's inputs unless it is fenced in. */
.pz-location-picker__map.leaflet-container,
.pz-location-map.leaflet-container {
    z-index: 0;
    font: inherit;
}

/* Order detail: the lines are read-only, so the numbers are right-aligned and
   the total sits under the amounts it sums. */
.order-lines__number {
    text-align: right;
    white-space: nowrap;
}

.order-lines__total-label {
    text-align: right;
    font-weight: 600;
}

.order-lines__total {
    font-weight: 600;
}

.order-lines__unallocated {
    text-transform: none;
}

/* A line's resource is allocated in its own row: the picker is given a floor so it
   does not shrink to the width of the name above it. */
.order-lines__allocation {
    min-width: 15rem;
}

.order-lines__waiting {
    margin-top: -0.125rem;
}

/* Resource calendar: the widget draws the grid and the bars, so this file only
   sets the frame around it, the toolbar the page renders instead of the
   widget's own, and the two marks a bar can carry — hatched when it is only a
   maybe, outlined when it clashes with work that holds the resource. */
.pz-calendar-page__board {
    padding: 0.75rem 1rem 1rem;
    min-width: 0;
}

.pz-calendar__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pz-calendar__nav {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.pz-calendar__title {
    margin-left: 0.5rem;
    font-weight: 600;
}

.pz-calendar__views {
    display: flex;
    gap: 0.25rem;
}

.pz-calendar__filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1rem;
}

.pz-calendar__filter {
    min-width: 12rem;
}

.pz-calendar {
    min-height: 34rem;
}

/* The widget has both palettes (`.ec-dark` flips its greys, its today tint and
   `color-scheme`), but it draws its own paper: white in light, a grey of its
   own in dark. The calendar sits in a card, so that paper comes from the theme
   instead — otherwise dark mode shows a lighter rectangle inside the card. The
   selector outranks the widget's own `.ec` block. */
.pz-calendar .ec {
    --ec-bg-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.pz-calendar__empty {
    padding-top: 0.5rem;
    color: var(--mud-palette-text-secondary);
}

/* A calendar that could not be drawn or read says so where the grid is, in the
   colour that means "look here" rather than the one that means "nothing here". */
.pz-calendar__failed {
    padding-top: 0.5rem;
    color: var(--mud-palette-warning);
}

/* A maybe is drawn in the status's colour like any other bar, but hatched: the
   same week can hold three of them, and none of them is work. */
/* The stripes are drawn from the bar's own text colour, not from a fixed ink:
   a bar keeps its tenant's colour in either theme, and the text on it is
   whatever reads against that colour. */
.pz-calendar .ec-event.pz-calendar__maybe .ec-event-body {
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, currentColor 30%, transparent) 0,
        color-mix(in srgb, currentColor 30%, transparent) 2px,
        transparent 2px,
        transparent 6px);
}

/* Two bars of the same width sit on top of each other in a row, so a clash is an
   outline rather than a colour: the status colour still has to be readable. */
.pz-calendar .ec-event.pz-calendar__clash {
    outline: 2px solid var(--mud-palette-warning);
    outline-offset: 1px;
}

.pz-calendar .ec-event.pz-calendar__quote {
    border: 1px dashed color-mix(in srgb, currentColor 55%, transparent);
}

/* The widget's own text is a size smaller than the rest of the app reads. */
.pz-calendar .ec-event-title {
    font-family: var(--pz-font-sans);
    font-size: var(--pz-text-2xs);
}

.pz-calendar .ec-day-head,
.pz-calendar .ec-col-head,
.pz-calendar .ec-row-head {
    font-family: var(--pz-font-sans);
    font-size: var(--pz-text-xs);
}

.pz-split--with-pane .pz-calendar-page__board {
    min-width: 0;
    overflow: auto;
}

/* Resource allocation: a weekly grid. MudSimpleTable draws the table, its cells
   and its horizontal scroll, and the theme supplies the typography and the
   colours; what is left here is the handful of things neither can say — the
   name column that stays put while the weeks scroll, a resource's own row
   reading as a heading over its orders and quotes, and the two states a week
   can be in. */
.pz-allocation {
    min-width: 0;
}

.pz-allocation__board {
    padding: 0.75rem 1rem 1rem;
    min-width: 0;
}

.pz-allocation__filter {
    min-width: 12rem;
}

/* The name column stays put while the weeks scroll past; the background is the
   surface, or the rows show through it. */
.pz-allocation__name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 14rem;
    max-width: 20rem;
    text-align: left;
    background-color: var(--mud-palette-surface);
}

/* A resource row is the summary, and reads as a heading over the orders and
   quotes that belong to it — by weight, not by a background of its own. */
.pz-allocation__resource-name {
    font-weight: 500;
}

/* Figures in a column line up only if they all take the same width. */
.pz-allocation th,
.pz-allocation td {
    font-variant-numeric: tabular-nums;
}

/* A resource nobody can measure is not a fully booked one, so its row says what
   is missing rather than only printing zeroes. */
.pz-allocation__missing {
    color: var(--mud-palette-warning);
}

.pz-allocation__failed {
    color: var(--mud-palette-warning);
}

/* The tint is the heatmap: a week with unbooked capacity to sell into is amber, one
   the orders already overfill is red, and one exactly full takes no tint at all. */
.pz-allocation__cell--room {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

/* A legend needs a patch of the tint itself, at cell size. */
.pz-allocation__swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
}

.pz-allocation__cell--full {
    background-color: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

/* The week's two figures sit on one line, so the grid reads as rows rather than
   as a stack of numbers. */
.pz-allocation__figures {
    font-weight: 500;
    display: inline-flex;
    gap: 0.4rem;
    justify-content: flex-end;
    white-space: nowrap;
}

/* The group is a chip, so it reads as a label rather than as a third line of the
   resource's name. */
.pz-allocation__group {
    height: auto;
    padding: 0 0.4rem;
    font-size: 0.7rem;
}

/* Load rows read as belonging to the resource above them rather than as
   resources of their own. */
.pz-allocation__load th,
.pz-allocation__load td {
    color: var(--mud-palette-text-secondary);
}

/* An order is promised work and a quote is only an offer, so each says which it
   is on the edge of its own name cell: a solid mark for the order, a dashed one
   for the quote. A stripe keeps the distinction when the text colour does not
   carry it — a narrow window, a printer, a reader who cannot tell the hues. */
.pz-allocation__load th:first-child {
    border-left: 3px solid transparent;
}

.pz-allocation__load--order th:first-child {
    border-left-color: var(--mud-palette-primary);
    border-left-style: solid;
}

.pz-allocation__load--quote th:first-child {
    border-left-color: var(--mud-palette-info);
    border-left-style: dashed;
}

/* The estate's own line closes the table: a summary, so it takes a heavier rule
   above it and no fill of its own. */
.pz-allocation__estate th,
.pz-allocation__estate td {
    border-top: 2px solid var(--mud-palette-lines-inputs);
}