/* =============================================================================
   Kaam360 — design system

   Tokens first, then shell, then components. MudBlazor supplies the widgets;
   this file sets surface, depth, type and data-mark specs so the app reads as
   one product rather than a stack of framework defaults.

   Colour decisions worth keeping straight:
     · The brand ramp is indigo. Anything interactive or "ours" uses it.
     · The status palette is fixed and never themed, and always ships as a dot
       plus a word — warning and serious sit below 3:1 on white by design, so
       hue never carries the meaning alone.
     · Data marks use the indigo ORDINAL ramp, validated (monotone lightness,
       single hue, light end 2.98:1 on white). Never the status colours: a
       status hue beside a chart mark would read as a series.
   ============================================================================= */

:root {
    --nx-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --nx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* --- Brand ramp (indigo) ------------------------------------------------ */
    --nx-50:  #EEF2FF;
    --nx-100: #E0E7FF;
    --nx-200: #C7D2FE;
    --nx-300: #A5B4FC;
    --nx-400: #818CF8;
    --nx-500: #6366F1;
    --nx-600: #4F46E5;
    --nx-700: #4338CA;   /* primary */
    --nx-800: #3730A3;
    --nx-900: #312E81;
    --nx-950: #1E1B4B;

    --nx-accent: var(--nx-700);
    --nx-accent-hover: var(--nx-800);
    --nx-accent-soft: #EEF2FF;
    --nx-accent-soft-2: #E0E7FF;

    /* --- Navigation ---------------------------------------------------------
       Flat near-black rather than a navy gradient. A gradient rail is the tell
       of a 2018 admin template; depth here comes from translucent white layers
       over one solid colour, which is what current tools do. */
    --nx-nav: #111114;
    --nx-nav-deep: #0C0C0F;
    --nx-nav-line: rgba(255, 255, 255, 0.07);
    --nx-nav-text: rgba(243, 243, 245, 0.68);
    --nx-nav-text-dim: rgba(243, 243, 245, 0.55);   /* 4.9:1 on the menu (was 3.3:1) */
    --nx-nav-hover: rgba(255, 255, 255, 0.055);
    --nx-nav-active: rgba(255, 255, 255, 0.10);

    /* --- Surfaces -----------------------------------------------------------
       Neutral greys, not blue-tinted. A cool cast over every surface is what
       made the whole thing read as a Material admin theme. */
    --nx-plane: #FAFAFA;
    --nx-surface: #FFFFFF;
    --nx-surface-2: #FAFAFA;   /* table heads, inset fills */
    --nx-surface-3: #F1F1F3;   /* tracks, disabled fills */
    --nx-ring: rgba(0, 0, 0, 0.07);
    --nx-ring-strong: rgba(0, 0, 0, 0.13);

    /* --- Ink ---------------------------------------------------------------- */
    --nx-ink: #18181B;
    --nx-ink-2: #52525B;
    --nx-muted: #64646E;   /* 4.7:1 or better on every light surface (WCAG AA for small text) */

    /* --- Status (fixed; dot + label always) --------------------------------- */
    --nx-good: #0CA30C;
    --nx-warning: #FAB219;
    --nx-serious: #EC835A;
    --nx-critical: #D03B3B;

    /* --- Data marks: indigo ordinal ramp ------------------------------------ */
    --nx-ord-1: #818CF8;
    --nx-ord-2: #6366F1;
    --nx-ord-3: #4338CA;
    --nx-ord-4: #312E81;
    --nx-grid: #E7E9F2;
    --nx-baseline: #C9CDDE;

    /* --- Depth & shape ------------------------------------------------------
       Borders carry the structure and shadows are almost absent. Doubling a
       border with a drop shadow on every card is the other thing that dated it;
       real elevation is reserved for things that actually float. */
    --nx-r-xs: 5px;
    --nx-r-sm: 7px;
    --nx-r: 10px;
    --nx-r-lg: 14px;
    --nx-sh-1: none;
    --nx-sh-2: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -4px rgba(0, 0, 0, 0.07);
    --nx-sh-pop: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 16px 40px -12px rgba(0, 0, 0, 0.18);

    /* Popover stacking is set on MudTheme.ZIndex in MainLayout, not here:
       MudThemeProvider writes its own :root block at runtime, after this file,
       so a CSS override of --mud-zindex-popover silently loses. */
}

html, body {
    height: 100%;
    font-family: var(--nx-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body { background: var(--nx-plane); color: var(--nx-ink); }

h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.024em; margin: 0; line-height: 1.2; }
h2 { font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.016em; margin: 0; }
a { color: var(--nx-accent); }

/* Columns must align vertically; standalone hero figures must not. */
table td, table th, .nx-tabular { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D3D6E4; border-radius: 99px; border: 3px solid var(--nx-plane); }
::-webkit-scrollbar-thumb:hover { background: #BCC0D3; }

/* =============================================================================
   App shell
   ============================================================================= */

.nx-appbar {
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid var(--nx-ring);
    backdrop-filter: saturate(180%) blur(10px);
}

/* The drawer runs full height and carries the brand, so the logo sits on the
   dark field rather than floating in the app bar above it. */
.nx-drawer {
    background: linear-gradient(180deg, var(--nx-nav) 0%, var(--nx-nav-deep) 100%) !important;
    border-right: none !important;
    color: var(--nx-nav-text);
}

.nx-nav-brand {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0 1rem; height: 60px; flex: 0 0 auto;
    border-bottom: 1px solid var(--nx-nav-line);
    color: #fff; font-weight: 640; font-size: 0.9375rem; letter-spacing: -0.014em;
}
.nx-brand-mark {
    width: 30px; height: 30px; border-radius: 8px; display: block; flex: 0 0 auto;
    box-shadow: 0 2px 10px rgba(91, 63, 224, 0.5);
}
.nx-brand-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; }
.nx-brand-360 { background: linear-gradient(90deg, #A5A4FF, #C58BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nx-brand-sub { font-size: 0.6875rem; font-weight: 500; color: var(--nx-nav-text-dim); letter-spacing: 0; }

.nx-nav-section {
    padding: 1.25rem 1.25rem 0.375rem;
    font-size: 0.6563rem; font-weight: 650; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--nx-nav-text-dim);
}

.nx-drawer .mud-nav-link {
    position: relative;
    border-radius: var(--nx-r-sm);
    margin: 2px 10px; padding: 0.5rem 0.75rem;
    font-size: 0.8594rem; min-height: 38px; font-weight: 460;
    color: var(--nx-nav-text);
    transition: background .13s ease, color .13s ease;
}
.nx-drawer .mud-nav-link .mud-icon-root { color: var(--nx-nav-text); opacity: .82; font-size: 1.15rem; }
.nx-drawer .mud-nav-link:hover { background: var(--nx-nav-hover); color: #fff; }
.nx-drawer .mud-nav-link:hover .mud-icon-root { opacity: 1; }
.nx-drawer .mud-nav-link.active {
    background: var(--nx-nav-active); color: #fff; font-weight: 570;
}
.nx-drawer .mud-nav-link.active .mud-icon-root { color: var(--nx-300); opacity: 1; }
/* MudBlazor's own active marker is a left border in the theme's primary — replaced
   with a rounded rail so it reads on the dark field. */
.nx-drawer .mud-nav-link.active::before { display: none; }
.nx-drawer .mud-nav-link.active::after {
    content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--nx-400);
}

.nx-nav-foot {
    margin-top: auto; padding: 0.875rem 1rem;
    border-top: 1px solid var(--nx-nav-line);
    font-size: 0.6875rem; color: var(--nx-nav-text-dim);
}

.nx-user-chip {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: 999px; border: 1px solid var(--nx-ring);
    background: var(--nx-surface);
    transition: border-color .13s ease, box-shadow .13s ease;
    cursor: pointer;
}
.nx-user-chip:hover { border-color: var(--nx-ring-strong); box-shadow: var(--nx-sh-1); }

/* =============================================================================
   Page furniture
   ============================================================================= */

.nx-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.nx-page-title { display: flex; align-items: center; gap: 0.75rem; }
.nx-page-icon {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--nx-accent-soft); color: var(--nx-accent);
}
.nx-page-sub { color: var(--nx-ink-2); font-size: 0.8594rem; margin-top: 0.1875rem; }

.nx-card {
    background: var(--nx-surface);
    border: 1px solid var(--nx-ring);
    border-radius: var(--nx-r);
    box-shadow: var(--nx-sh-1);
}
.nx-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--nx-ring);
}
.nx-card-title { font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.012em; }
.nx-card-note { font-size: 0.75rem; color: var(--nx-muted); margin-top: 1px; }

/* =============================================================================
   Stat tiles

   A tile is a hero figure, not a chart: proportional figures (never tabular),
   a tinted icon chip for scanning, and a top accent rule that ties the tile to
   the thing it measures.
   ============================================================================= */

.nx-stats {
    display: grid; gap: 0.875rem; margin-bottom: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}
.nx-stat {
    position: relative; overflow: hidden;
    background: var(--nx-surface);
    border: 1px solid var(--nx-ring);
    border-radius: var(--nx-r);
    padding: 1rem 1.125rem 1.0625rem;
    box-shadow: var(--nx-sh-1);
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.nx-stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--nx-tint, var(--nx-accent)); opacity: .9;
}
.nx-stat:hover { box-shadow: var(--nx-sh-2); transform: translateY(-1px); border-color: var(--nx-ring-strong); }
.nx-stat-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.nx-stat-icon {
    width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
    display: grid; place-items: center;
}
.nx-stat-label { font-size: 0.75rem; color: var(--nx-ink-2); font-weight: 530; letter-spacing: -0.005em; }
.nx-stat-value {
    font-size: 1.875rem; font-weight: 660; letter-spacing: -0.03em; line-height: 1.05;
    color: var(--nx-ink);
}
.nx-stat-context { font-size: 0.75rem; color: var(--nx-muted); margin-top: 0.3125rem; }
.nx-stat-context.is-alert { color: #A32222; font-weight: 520; }

/* Tints double as the tile's accent rule and its icon chip. */
.nx-tint-indigo { background: var(--nx-accent-soft); color: var(--nx-700); }
.nx-tint-sky    { background: #E0F2FE; color: #0369A1; }
.nx-tint-green  { background: #DCFCE7; color: #15803D; }
.nx-tint-amber  { background: #FEF3C7; color: #A16207; }
.nx-tint-red    { background: #FEE2E2; color: #B91C1C; }
.nx-tint-violet { background: #EDE9FE; color: #6D28D9; }
.nx-tint-teal   { background: #CCFBF1; color: #0F766E; }

.nx-stat:has(.nx-tint-indigo) { --nx-tint: var(--nx-600); }
.nx-stat:has(.nx-tint-sky)    { --nx-tint: #0EA5E9; }
.nx-stat:has(.nx-tint-green)  { --nx-tint: #16A34A; }
.nx-stat:has(.nx-tint-amber)  { --nx-tint: #F59E0B; }
.nx-stat:has(.nx-tint-red)    { --nx-tint: #EF4444; }
.nx-stat:has(.nx-tint-violet) { --nx-tint: #7C3AED; }
.nx-stat:has(.nx-tint-teal)   { --nx-tint: #14B8A6; }

/* =============================================================================
   Tabs (scope switcher)
   ============================================================================= */

.scope-tabs {
    display: flex; gap: 0.125rem; margin-bottom: 1rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--nx-ring);
}
.scope-tab {
    position: relative; background: none; border: none; cursor: pointer;
    padding: 0.625rem 0.875rem; margin-bottom: -1px;
    font: inherit; font-size: 0.8594rem; font-weight: 520;
    color: var(--nx-ink-2); border-bottom: 2px solid transparent;
    transition: color .13s ease, border-color .13s ease;
}
.scope-tab:hover { color: var(--nx-ink); }
.scope-tab.active { color: var(--nx-accent); border-bottom-color: var(--nx-accent); font-weight: 600; }
.scope-tab .count {
    display: inline-block; margin-left: 0.4375rem; padding: 1px 6px;
    border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2);
    font-size: 0.6875rem; font-weight: 600;
}
.scope-tab.active .count { background: var(--nx-accent-soft-2); color: var(--nx-800); }

/* =============================================================================
   Tables
   ============================================================================= */

.nx-table thead th {
    background: var(--nx-surface-2);
    font-size: 0.6875rem !important; font-weight: 650 !important;
    letter-spacing: 0.055em; text-transform: uppercase;
    color: var(--nx-ink-2) !important;
    border-bottom: 1px solid var(--nx-ring) !important;
    white-space: nowrap; padding-top: 0.625rem !important; padding-bottom: 0.625rem !important;
}
.nx-table tbody td {
    font-size: 0.8594rem;
    border-bottom: 1px solid var(--nx-line, #F0F1F7) !important;
    padding-top: 0.6875rem !important; padding-bottom: 0.6875rem !important;
}
.nx-table tbody tr { transition: background .1s ease; }
.nx-table tbody tr:hover { background: var(--nx-soft, #FAFAFE) !important; }
.nx-table tbody tr:last-child td { border-bottom: none !important; }

.project-code {
    font-family: var(--nx-mono); font-size: 0.6875rem; font-weight: 550;
    color: var(--nx-ink-2); background: var(--nx-surface-3);
    padding: 2px 7px; border-radius: var(--nx-r-xs); white-space: nowrap;
}
.project-name { font-weight: 560; color: var(--nx-ink); letter-spacing: -0.008em; }
.nx-cell-name { max-width: 320px; }
.nx-cell-num { text-align: right; }
.nx-cell-date { color: var(--nx-ink-2); white-space: nowrap; }
.nx-cell-person { display: flex; align-items: center; gap: 0.5rem; }

.muted-pill {
    font-size: 0.7188rem; color: var(--nx-muted);
    background: var(--nx-surface-3); padding: 2px 9px; border-radius: 999px;
}
.count-open { font-weight: 640; font-variant-numeric: tabular-nums; }
.count-total { color: var(--nx-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cursor-pointer { cursor: pointer; }
.overdue-chip { color: #A32222; font-weight: 560; font-size: 0.75rem; }

.nx-tagline { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.nx-tag {
    font-size: 0.6875rem; font-weight: 500; padding: 1px 8px; border-radius: var(--nx-r-xs);
    background: var(--nx-accent-soft); color: var(--nx-800);
}

/* =============================================================================
   Status pills — dot plus word, never colour alone
   ============================================================================= */

.nx-status {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 2px 9px 2px 7px; border-radius: 999px;
    font-size: 0.7188rem; font-weight: 570; white-space: nowrap;
    border: 1px solid transparent;
}
.nx-status .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.nx-status.is-good     { background: rgba(12,163,12,.10);  color: #067306; border-color: rgba(12,163,12,.22); }
.nx-status.is-good .dot     { background: var(--nx-good); }
.nx-status.is-warning  { background: rgba(250,178,25,.15); color: #8A5A00; border-color: rgba(250,178,25,.34); }
.nx-status.is-warning .dot  { background: var(--nx-warning); }
.nx-status.is-serious  { background: rgba(236,131,90,.14); color: #A64B21; border-color: rgba(236,131,90,.32); }
.nx-status.is-serious .dot  { background: var(--nx-serious); }
.nx-status.is-critical { background: rgba(208,59,59,.10);  color: #A32222; border-color: rgba(208,59,59,.24); }
.nx-status.is-critical .dot { background: var(--nx-critical); }
.nx-status.is-neutral  { background: rgba(20,22,56,.05);   color: var(--nx-ink-2); border-color: rgba(20,22,56,.10); }
.nx-status.is-neutral .dot  { background: #98A2B3; }
.nx-status.is-info     { background: var(--nx-accent-soft); color: var(--nx-800); border-color: rgba(99,102,241,.26); }
.nx-status.is-info .dot     { background: var(--nx-500); }

/* =============================================================================
   Data marks

   Thin marks, rounded data-ends, a recessive track, and a direct label beside
   every bar — the ordinal ramp's lightest step is deliberately allowed to be
   quiet because the number carries the value.
   ============================================================================= */

.nx-ring-chart {
    --pct: 0; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--ring-color, var(--nx-ord-2)) calc(var(--pct) * 1%), #E7E9F2 0);
}
.nx-ring-chart span {
    width: 26px; height: 26px; border-radius: 50%; background: var(--nx-surface);
    display: grid; place-items: center;
    font-size: 0.625rem; font-weight: 660; font-variant-numeric: tabular-nums; color: var(--nx-ink-2);
}

.nx-avatar {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.625rem; font-weight: 660; color: #fff; flex: 0 0 auto; letter-spacing: 0.01em;
    box-shadow: 0 0 0 2px var(--nx-surface);
}

.nx-bars { display: flex; flex-direction: column; gap: 0.75rem; }
.nx-bar-row { display: flex; align-items: center; gap: 0.75rem; }
.nx-bar-label { flex: 0 0 auto; min-width: 0; font-size: 0.8125rem; }
.nx-bar-track {
    flex: 1 1 auto; height: 7px; border-radius: 999px;
    background: var(--nx-surface-3); overflow: hidden; min-width: 40px;
}
.nx-bar-fill { height: 100%; border-radius: 999px; background: var(--nx-ord-2); transition: width .3s ease; }
.nx-ord-fill-1 { background: var(--nx-ord-1); }
.nx-ord-fill-2 { background: var(--nx-ord-2); }
.nx-ord-fill-3 { background: var(--nx-ord-3); }
.nx-ord-fill-4 { background: var(--nx-ord-4); }
.nx-bar-value {
    flex: 0 0 auto; font-size: 0.75rem; font-weight: 570; color: var(--nx-ink-2);
    font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}

.nx-burndown { display: flex; align-items: flex-end; gap: 4px; height: 148px; padding-top: 0.5rem; }
.nx-burndown-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.nx-burndown-fill { background: var(--nx-ord-2); border-radius: 4px 4px 0 0; min-height: 2px; }
.nx-burndown-ideal { border-top: 2px dashed var(--nx-baseline); }

/* =============================================================================
   Empty states
   ============================================================================= */

.nx-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 3.5rem 1.5rem;
    background: var(--nx-surface); border: 1px solid var(--nx-ring);
    border-radius: var(--nx-r); box-shadow: var(--nx-sh-1);
}
.nx-empty-icon {
    width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1rem;
    display: grid; place-items: center;
    background: var(--nx-accent-soft); color: var(--nx-500);
}

/* =============================================================================
   Side panel (New / Edit)
   ============================================================================= */

.side-panel-scrim {
    position: fixed; inset: 0; background: rgba(16, 19, 48, 0.42);
    backdrop-filter: blur(2px); z-index: 1300;
}
.side-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
    background: var(--nx-surface); z-index: 1301;
    display: flex; flex-direction: column;
    box-shadow: var(--nx-sh-pop);
}
/* EditForm renders a <form> between the panel and its children, so the flex
   column has to continue through it — otherwise the body never gets a bounded
   height and the footer is pushed off the bottom of the viewport. */
.side-panel > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.side-panel-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--nx-ring); flex: 0 0 auto;
}
.side-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.375rem; }
/* Used as a section HEADING inside the panel, not as a container. */
.side-panel-section {
    font-size: 0.6875rem; font-weight: 660; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--nx-ink-2); margin: 1.75rem 0 0.875rem;
    padding-bottom: 0.4375rem; border-bottom: 1px solid var(--nx-ring);
}
.side-panel-body > .side-panel-section:first-child { margin-top: 0; }
.side-panel-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem;
    padding: 1rem 1.375rem; border-top: 1px solid var(--nx-ring);
    background: var(--nx-surface-2); flex: 0 0 auto;
}

.confirm-card { padding: 1.5rem; max-width: 420px; }

/* =============================================================================
   Kanban
   ============================================================================= */

.kanban-column {
    background: var(--nx-surface-3); border-radius: var(--nx-r);
    padding: 0.75rem; min-width: 272px; flex: 1 1 272px;
}
.kanban-card {
    background: var(--nx-surface); border: 1px solid var(--nx-ring);
    border-radius: var(--nx-r-sm); padding: 0.75rem; margin-bottom: 0.625rem;
    box-shadow: var(--nx-sh-1); transition: box-shadow .14s ease, transform .14s ease;
}
.kanban-card:hover { box-shadow: var(--nx-sh-2); transform: translateY(-1px); }

/* =============================================================================
   Login
   ============================================================================= */

/* Split-screen sign-in: brand panel on the left, form on the right. */
.lg-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); background: var(--nx-surface); }

.lg-art {
    position: relative; overflow: hidden; color: #fff; padding: 2.5rem 3rem 2rem;
    display: flex; flex-direction: column; gap: 1.75rem;
    background: linear-gradient(150deg, #14122F 0%, #2A2480 48%, #4338CA 100%);
}
.lg-blob { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.lg-blob-1 { width: 460px; height: 460px; right: -140px; top: -120px; background: radial-gradient(circle at 30% 30%, rgba(129,140,248,.55), rgba(129,140,248,0) 68%); }
.lg-blob-2 { width: 420px; height: 420px; left: -150px; bottom: -150px; background: radial-gradient(circle at 60% 40%, rgba(56,189,248,.35), rgba(56,189,248,0) 70%); }
.lg-blob-3 { width: 240px; height: 240px; left: 42%; top: 38%; background: radial-gradient(circle, rgba(167,139,250,.28), rgba(167,139,250,0) 70%); }
.lg-art > :not(.lg-blob) { position: relative; z-index: 1; }

.lg-logo { display: block; width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; box-shadow: 0 8px 22px rgba(30,20,120,.5); }
.lg-360 { background: linear-gradient(90deg, #B7B6FF, #D9A6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-brand { display: flex; align-items: center; gap: 0.75rem; }
.lg-brand-name { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; display: flex; flex-direction: column; line-height: 1.15; }
.lg-brand-name small { font-weight: 450; font-size: 0.75rem; opacity: .7; }

.lg-hero h2 { margin: 0.5rem 0 0.625rem; font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 680; }
.lg-hero p { margin: 0; max-width: 30rem; font-size: 0.9688rem; line-height: 1.55; color: rgba(255,255,255,.78); }

/* A little scene of mock cards. */
.lg-stage { position: relative; flex: 1 1 auto; min-height: 270px; }
.lg-card-mock {
    position: absolute; background: rgba(255,255,255,.96); color: #14162E; border-radius: 14px; padding: 0.875rem 1rem;
    box-shadow: 0 22px 50px rgba(8,6,40,.38), 0 2px 6px rgba(8,6,40,.2);
}
.lg-mock-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 650; color: #3B3F5C; margin-bottom: 0.625rem; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: #6366F1; display: inline-block; }
.lg-dot-green { background: #16A34A; }
.lg-mock-tasks { left: 0; top: 4px; width: 292px; transform: rotate(-2deg); }
.lg-mock-task { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0; border-top: 1px solid #ECEDF5; }
.lg-check { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #C7CAE0; flex: 0 0 auto; }
.is-done .lg-check { background: #16A34A; border-color: #16A34A; box-shadow: inset 0 0 0 3px #fff; }
.lg-mock-task b { flex: 1 1 auto; height: 8px; border-radius: 4px; background: #E3E5F1; }
.lg-mock-task b.w70 { flex: 0 0 38%; } .lg-mock-task b.w55 { flex: 0 0 30%; }
.is-done b { background: #D5F0DE; }
.lg-mock-task em { margin-left: auto; font-style: normal; font-size: 0.6563rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #E3F5E8; color: #167A3A; }
.lg-mock-task em.warn { background: #FDF0CC; color: #8A5A00; }
.lg-mock-task em.info { background: #DDF0FB; color: #0B6EA5; }

.lg-mock-pay { left: 250px; top: 166px; width: 214px; transform: rotate(1.5deg); }
.lg-bars { display: flex; align-items: flex-end; gap: 7px; height: 74px; }
.lg-bars span { flex: 1 1 0; border-radius: 5px 5px 2px 2px; background: #C9CCF5; }
.lg-bars span.hi { background: linear-gradient(180deg, #6366F1, #4338CA); }
.lg-mock-foot { margin-top: 0.5rem; font-size: 0.75rem; color: #5A5E7C; }
.lg-mock-foot b { color: #14162E; font-size: 0.9375rem; }

.lg-mock-ring { left: 26px; top: 196px; width: 132px; text-align: center; transform: rotate(-1deg); }
.lg-ring {
    --pct: 68; width: 76px; height: 76px; margin: 0.125rem auto 0; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(#6366F1 calc(var(--pct) * 1%), #E3E5F1 0);
}
.lg-ring span { width: 58px; height: 58px; border-radius: 50%; background: var(--nx-surface, #fff); display: grid; place-items: center; font-weight: 700; font-size: 0.9375rem; }

.lg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,.86); }
.lg-points li { display: flex; align-items: center; gap: 0.625rem; }
.lg-points svg { fill: #A5F3C4; flex: 0 0 auto; }

.lg-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem 1.25rem; background: var(--nx-bg, #F7F8FC); }
.lg-form-card {
    width: 100%; max-width: 410px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 18px;
    padding: 2.25rem 2rem 1.75rem; box-shadow: 0 18px 50px rgba(32,30,90,.10), 0 2px 6px rgba(32,30,90,.06);
}
.lg-form-logo { display: none; margin-bottom: 1rem; }
.lg-form-card h1 { margin: 0; font-size: 1.625rem; font-weight: 680; letter-spacing: -0.03em; color: var(--nx-ink); }
.lg-sub { margin: 0.25rem 0 1.5rem; color: var(--nx-ink-2); font-size: 0.9063rem; }

.lg-field { margin-bottom: 1.0625rem; }
.lg-field label { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 580; color: var(--nx-ink-2); }
.lg-input-wrap { position: relative; display: flex; align-items: center; }
.lg-input-wrap > svg { position: absolute; left: 0.8125rem; fill: #9498B5; pointer-events: none; }
.lg-input {
    width: 100%; padding: 0.7188rem 2.75rem 0.7188rem 2.5rem; font: inherit; font-size: 0.9375rem;
    border: 1px solid var(--nx-ring-strong); border-radius: 10px; background: var(--nx-soft, #FBFBFE); color: var(--nx-ink);
    transition: border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
.lg-input::placeholder { color: #696D82; }
.lg-input:focus { outline: none; background: var(--nx-surface, #fff); border-color: var(--nx-accent); box-shadow: 0 0 0 4px var(--nx-accent-soft); }
.lg-eye {
    position: absolute; right: 0.375rem; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
    border: 0; border-radius: 8px; background: transparent;
}
.lg-eye svg { fill: #9498B5; }
.lg-eye:hover svg, .lg-eye.is-on svg { fill: var(--nx-accent); }
.lg-eye:focus-visible { outline: 2px solid var(--nx-accent); }
.lg-validation, .lg-field .validation-message { color: #B42318; font-size: 0.75rem; margin-top: 0.25rem; display: block; }

.lg-row { display: flex; align-items: center; justify-content: space-between; margin: 0.25rem 0 1.25rem; }
.lg-check-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8438rem; color: var(--nx-ink-2); user-select: none; }
.lg-check-label input { width: 17px; height: 17px; accent-color: var(--nx-accent); cursor: pointer; margin: 0; }

.lg-submit {
    width: 100%; padding: 0.8125rem 1rem; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 0.9688rem; font-weight: 620;
    color: #fff; background: linear-gradient(135deg, #5B5FEF, #4338CA); box-shadow: 0 8px 20px rgba(67,56,202,.32);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.lg-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(67,56,202,.38); filter: brightness(1.05); }
.lg-submit:active { transform: translateY(0); }
.lg-submit:focus-visible { outline: 3px solid var(--nx-accent-soft); outline-offset: 2px; }

.lg-error { margin-bottom: 1rem; padding: 0.625rem 0.8125rem; border-radius: 10px; font-size: 0.8438rem; color: #8F1D14; background: #FEECEA; border: 1px solid #F8C9C4; }
.lg-help { margin: 1.25rem 0 0; font-size: 0.7813rem; line-height: 1.55; color: var(--nx-muted); text-align: center; }
.lg-help span { display: inline-block; margin-top: 0.25rem; }
.lg-foot { margin-top: 1.25rem; font-size: 0.7188rem; color: var(--nx-muted); }

@media (max-width: 960px) {
    .lg-shell { grid-template-columns: 1fr; }
    .lg-art { display: none; }
    .lg-panel { min-height: 100vh; justify-content: flex-start; padding-top: 12vh; background: linear-gradient(180deg, #ECEBFB 0%, var(--nx-bg, #F7F8FC) 38%); }
    .lg-form-logo { display: block; }
}
@media (max-width: 420px) { .lg-form-card { padding: 1.75rem 1.25rem 1.5rem; border-radius: 16px; } }

/* =============================================================================
   MudBlazor overrides — keep the framework's widgets on our type and shape
   ============================================================================= */

.mud-button-root { text-transform: none; letter-spacing: -0.006em; font-weight: 560; }
.mud-button-filled { box-shadow: var(--nx-sh-1); }
.mud-button-filled:hover { box-shadow: var(--nx-sh-2); }
.mud-input-outlined .mud-input-outlined-border { border-color: var(--nx-ring-strong); }
.mud-paper { background-color: var(--nx-surface); }
.mud-popover { border-radius: var(--nx-r) !important; box-shadow: var(--nx-sh-pop) !important; }
.mud-list-item { font-size: 0.8594rem; }
.mud-tooltip { font-size: 0.75rem; border-radius: var(--nx-r-xs); }
.mud-progress-linear { border-radius: 999px; }

/* =============================================================================
   Payment schedule
   ============================================================================= */

.pay-grid-scroll { overflow: auto; max-height: calc(100vh - 230px); border-radius: var(--nx-r); scroll-behavior: smooth; }
/* Newly added column: flash so it's obvious where it went. */
.pay-grid .is-new { animation: payNew 1.6s ease-out 1; }
@keyframes payNew { 0% { background: rgba(99,102,241,.28); } 100% { background: transparent; } }

.pay-grid {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 0.8125rem; background: var(--nx-surface);
}
.pay-grid th, .pay-grid td {
    padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--nx-line, #F0F1F7);
    text-align: left; vertical-align: middle; white-space: nowrap;
}
.pay-grid thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--nx-surface-2); font-weight: 650; font-size: 0.6563rem;
    letter-spacing: 0.055em; text-transform: uppercase; color: var(--nx-ink-2);
    border-bottom: 1px solid var(--nx-ring);
}
.pay-grid td.num, .pay-grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pay-grid tbody tr:hover td { background: var(--nx-soft, #FAFAFE); }

/* Frozen left columns. The left offsets are the widths above them, so these
   values and the min-widths below have to move together. */
.pay-grid .stick-1, .pay-grid .stick-2 { position: sticky; z-index: 2; background: var(--nx-surface); }
.pay-grid .stick-1 { left: 0; min-width: 210px; max-width: 210px; white-space: normal; }
.pay-grid .stick-2 { left: 210px; min-width: 160px; box-shadow: 1px 0 0 var(--nx-ring); }
.pay-grid thead .stick-1, .pay-grid thead .stick-2 { z-index: 4; background: var(--nx-surface-2); }
.pay-grid tbody tr:hover .stick-1, .pay-grid tbody tr:hover .stick-2 { background: var(--nx-soft, #FAFAFE); }

.pay-project { font-weight: 580; color: var(--nx-ink); text-decoration: none; }
.pay-project:hover { color: var(--nx-accent); text-decoration: underline; }
.pay-code { font-size: 0.6875rem; color: var(--nx-muted); font-variant-numeric: tabular-nums; }
.pay-date { color: var(--nx-ink-2); font-variant-numeric: tabular-nums; }

.pay-cell { min-width: 132px; }
/* The figure and its status pill are stacked. Without this the MudMenu wrapper
   sits inline beside the input and the pill spills over the next column. */
.pay-cell-in { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pay-input {
    width: 100%; max-width: 116px; text-align: right; font-variant-numeric: tabular-nums;
    font-size: 0.8125rem; font-family: inherit; color: var(--nx-ink);
    padding: 3px 6px; border: 1px solid transparent; border-radius: var(--nx-r-xs);
    background: transparent; transition: border-color .12s, background .12s, box-shadow .12s;
}
.pay-input:hover { border-color: var(--nx-ring); background: var(--nx-surface, #fff); }
.pay-input:focus {
    outline: none; border-color: var(--nx-accent); background: var(--nx-surface, #fff);
    box-shadow: 0 0 0 3px var(--nx-accent-soft);
}
.pay-input.is-contract { font-weight: 580; }
/* Spinners steal width in a column this narrow and nobody nudges a contract by 1. */
.pay-input::-webkit-outer-spin-button, .pay-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pay-input { -moz-appearance: textfield; appearance: textfield; }

.pay-status-btn { background: none; border: none; padding: 0; cursor: pointer; display: block; }
.pay-menu-row { display: flex; align-items: center; gap: 0.625rem; }
.pay-menu-note { font-size: 0.75rem; color: var(--nx-ink-2); white-space: normal; max-width: 320px; }

/* Cell tints track the four stages. The pill inside each cell carries the
   meaning — the tint only groups the column at a glance. */
.pay-cell.tone-good    { background: rgba(12,163,12,.07); }
.pay-cell.tone-info    { background: rgba(99,102,241,.07); }
.pay-cell.tone-warning { background: rgba(250,178,25,.09); }
.pay-cell.tone-neutral { background: rgba(20,22,56,.025); }
.pay-grid tbody tr:hover .pay-cell.tone-good    { background: rgba(12,163,12,.11); }
.pay-grid tbody tr:hover .pay-cell.tone-info    { background: rgba(99,102,241,.11); }
.pay-grid tbody tr:hover .pay-cell.tone-warning { background: rgba(250,178,25,.13); }

.pay-warn { font-size: 0.6563rem; color: #A64B21; margin-top: 2px; }

/* The three calculated columns are frozen to the right edge: they are the
   answer the page exists to give, and on a six-instalment portfolio they would
   otherwise sit permanently off-screen. The right offsets are the widths of the
   columns to their right, so these four numbers move together. */
.pay-grid .calc {
    position: sticky; z-index: 2; background: var(--nx-soft, #F6F7FC); font-weight: 580;
    min-width: 124px; max-width: 124px;
}
.pay-grid .calc-1 { right: 248px; box-shadow: -1px 0 0 var(--nx-ring); }
.pay-grid .calc-2 { right: 124px; }
.pay-grid .calc-3 { right: 0; }
.pay-grid thead th.calc { background: var(--nx-soft, #EDEFF8); z-index: 5; }
.pay-grid tbody tr:hover .calc { background: #EFF1F9; }
.pay-grid td.calc.good { color: #067306; }
.pay-grid td.calc.due { color: #A32222; }

.pay-pct { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pay-pct-bar { width: 52px; height: 5px; border-radius: 999px; background: #E2E5F0; overflow: hidden; }
.pay-pct-bar i { display: block; height: 100%; background: var(--nx-ord-2); border-radius: 999px; }

.pay-grid tfoot td {
    position: sticky; bottom: 0; z-index: 3;
    background: var(--nx-soft, #EFF1F8); font-weight: 660; border-top: 1px solid var(--nx-ring); border-bottom: none;
}
.pay-grid tfoot td.stick-1, .pay-grid tfoot td.stick-2, .pay-grid tfoot td.calc { z-index: 4; background: var(--nx-soft, #EFF1F8); }

.pay-legend { display: grid; gap: 0.625rem; }
.pay-legend-item { display: flex; align-items: center; gap: 0.75rem; }
.pay-legend-text { font-size: 0.8125rem; color: var(--nx-ink-2); }
.pay-legend-note { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--nx-ring); font-size: 0.8125rem; color: var(--nx-ink-2); }

.pay-hint { margin-top: 0.75rem; font-size: 0.75rem; color: var(--nx-muted); }

/* Long names were wrapping to three lines and tripling the row height. */
.nx-owner-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 130px; display: inline-block; vertical-align: middle;
}
.muted-pill { white-space: nowrap; display: inline-block; }

/* MudBlazor paints .mud-nav-link.active from the theme primary with enough
   specificity to beat the drawer rules above, which leaves the active item in
   indigo-on-navy. The rail is dark, so the active label has to be white. */
.nx-drawer .mud-nav-link.active,
.nx-drawer .mud-nav-link.active:hover { color: #FFFFFF !important; }
.nx-drawer .mud-nav-link.active .mud-nav-link-text { color: #FFFFFF !important; }

/* =============================================================================
   Task module — list, kanban and gantt share one bar and one detail panel
   ============================================================================= */

.tb-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.tb-views {
    display: inline-flex; background: var(--nx-surface-3); padding: 3px;
    border-radius: 10px; gap: 2px;
}
/* A tab bar wider than the screen (a phone, or many tabs) scrolls sideways inside itself instead of widening the page. */
.tb-views { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tb-views::-webkit-scrollbar { display: none; }
.tb-view {
    display: inline-flex; align-items: center; gap: 0.375rem;
    border: none; background: none; cursor: pointer; font: inherit;
    font-size: 0.8125rem; font-weight: 540; color: var(--nx-ink-2);
    padding: 0.375rem 0.75rem; border-radius: 7px;
    transition: background .13s ease, color .13s ease, box-shadow .13s ease;
}
.tb-view:hover { color: var(--nx-ink); }
.tb-view.active { background: var(--nx-surface); color: var(--nx-accent); box-shadow: var(--nx-sh-1); font-weight: 600; }

.tb-bar-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tb-search {
    font: inherit; font-size: 0.8125rem; padding: 0.4375rem 0.75rem;
    border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm);
    background: var(--nx-surface); color: var(--nx-ink); width: 190px;
}
.tb-search:focus { outline: none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.tb-select { min-width: 150px; max-width: 170px; }
.tb-select-sm { min-width: 110px; max-width: 120px; }
.tb-toggle {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.8125rem; color: var(--nx-ink-2); cursor: pointer; white-space: nowrap;
}
.tb-loading { display: grid; place-items: center; padding: 3rem; }
.tb-surface { overflow: hidden; }

/* --- List -------------------------------------------------------------------- */
.tb-list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8594rem; }
.tb-list thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--nx-surface-2); text-align: left;
    font-size: 0.6563rem; font-weight: 650; letter-spacing: 0.055em; text-transform: uppercase;
    color: var(--nx-ink-2); padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--nx-ring); white-space: nowrap;
}
.tb-list td { padding: 0.5625rem 0.75rem; border-bottom: 1px solid var(--nx-line, #F2F3F9); vertical-align: middle; }
.tb-list .w-id { width: 118px; }
.tb-list .w-owner { width: 168px; }
.tb-list .w-status { width: 128px; }
.tb-list .w-pri { width: 96px; }
.tb-list .w-date { width: 118px; white-space: nowrap; }
.tb-list .w-dur { width: 84px; white-space: nowrap; }

.tb-group td { background: var(--nx-surface-2); padding: 0.4375rem 0.75rem; }
.tb-group-toggle {
    display: inline-flex; align-items: center; gap: 0.375rem;
    background: none; border: none; cursor: pointer; font: inherit; padding: 0; color: var(--nx-ink);
}
.tb-group-name { font-weight: 620; font-size: 0.8594rem; letter-spacing: -0.008em; }
.tb-group-count {
    display: inline-block; margin-left: 0.375rem; padding: 0 7px;
    border-radius: 999px; background: var(--nx-accent-soft-2); color: var(--nx-800);
    font-size: 0.6875rem; font-weight: 650;
}
.tb-group-meta { margin-left: 0.75rem; font-size: 0.75rem; color: var(--nx-muted); }
.tb-group-late { color: #A32222; font-weight: 550; }

.tb-row { cursor: pointer; transition: background .1s ease; }
.tb-row:hover { background: var(--nx-soft, #FAFAFE); }
.tb-title { display: flex; align-items: center; gap: 0.375rem; font-weight: 500; }
.tb-title .is-done { text-decoration: line-through; color: var(--nx-muted); }
.tb-sub-icon { color: var(--nx-muted); }
.is-late { color: #A32222 !important; font-weight: 550; }

.tb-pri { font-size: 0.7188rem; font-weight: 570; }
.pri-low      { color: var(--nx-muted); }
.pri-medium   { color: var(--nx-ink-2); }
.pri-high     { color: #A64B21; }
.pri-urgent   { color: #A32222; }

.tb-add td { background: var(--nx-surface); padding: 0.25rem 0.75rem 0.5rem; }
.tb-add-input {
    width: 100%; font: inherit; font-size: 0.8125rem; color: var(--nx-ink);
    border: 1px dashed transparent; border-radius: var(--nx-r-xs);
    padding: 0.3125rem 0.5rem; background: transparent;
}
.tb-add-input::placeholder { color: var(--nx-muted); }
.tb-add-input:hover { border-color: var(--nx-ring-strong); }
.tb-add-input:focus { outline: none; border-style: solid; border-color: var(--nx-accent); background: var(--nx-surface, #fff); }

/* --- Kanban ------------------------------------------------------------------ */
.tb-kanban { display: flex; gap: 0.875rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: flex-start; }
.kanban-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; padding: 0 2px; }
.kanban-count { font-size: 0.75rem; font-weight: 650; color: var(--nx-ink-2); }
.kanban-card { cursor: pointer; border-left: 3px solid var(--nx-ord-1); }
.kanban-card.tone-good     { border-left-color: var(--nx-good); }
.kanban-card.tone-warning  { border-left-color: var(--nx-warning); }
.kanban-card.tone-info     { border-left-color: var(--nx-500); }
.kanban-card.tone-neutral  { border-left-color: #B6BCD0; }
.kanban-code { font-family: var(--nx-mono); font-size: 0.6563rem; color: var(--nx-muted); }
.kanban-title { font-size: 0.8438rem; font-weight: 560; line-height: 1.35; margin: 2px 0 6px; }
.kanban-list { display: flex; align-items: center; gap: 4px; font-size: 0.7188rem; color: var(--nx-muted); }
.kanban-foot {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.625rem;
    padding-top: 0.5rem; border-top: 1px solid var(--nx-line, #F2F3F9);
}
.kanban-foot .spacer { flex: 1 1 auto; }
.kanban-due { font-size: 0.7188rem; color: var(--nx-ink-2); font-variant-numeric: tabular-nums; }
.kanban-meta { display: inline-flex; align-items: center; gap: 2px; font-size: 0.7188rem; color: var(--nx-muted); }
.kanban-empty {
    border: 1px dashed var(--nx-ring-strong); border-radius: var(--nx-r-sm);
    padding: 1.25rem 0.75rem; text-align: center; font-size: 0.75rem; color: var(--nx-muted);
}

/* --- Gantt -------------------------------------------------------------------
   Two panes side by side: a fixed tree on the left and a scrolling timeline on
   the right. Every row is exactly --gantt-row tall in both panes, which is what
   keeps a bar on the same line as its task name. */
.gantt { --gantt-row: 34px; --gantt-lane: 30px; display: flex; overflow: hidden; }
.gantt-tree { flex: 0 0 var(--gantt-tree-w, var(--gantt-tree-def, 300px)); max-width: 70%; min-width: 0; position: relative;
    border-inline-end: 1px solid var(--nx-ring); background: var(--nx-surface); }
/* The task column's edge (GanttResizer.razor): drag it, or focus it and use the arrow keys; double-click or Enter folds the column away.
   js/nx-gantt.js keeps the width in this browser as --gantt-tree-w on the page, so every Gantt and timeline uses it. */
.gantt-resizer { position: absolute; top: 0; bottom: 0; inset-inline-end: -5px; width: 10px; z-index: 6; cursor: col-resize; touch-action: none; }
.gantt-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 4px; width: 2px; background: transparent; transition: background .15s; }
.gantt-resizer:hover::after, .gantt-resizer:focus-visible::after, .gantt-resizer.is-dragging::after { background: var(--nx-accent); }
.gantt-resizer:focus-visible { outline: none; }
html.nx-gantt-resizing, html.nx-gantt-resizing * { cursor: col-resize !important; user-select: none; }
html.nx-gantt-folded .gantt-tree { flex-basis: 24px; }
html.nx-gantt-folded .gantt-tree > :not(.gantt-resizer) { visibility: hidden; }
/* The timeline part scrolls sideways; focusing it (Tab) lets the arrow keys scroll it too. */
.gantt-time:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.gantt-tree-head {
    height: 46px; display: flex; align-items: center; padding: 0 0.875rem;
    background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring);
    font-size: 0.6563rem; font-weight: 650; letter-spacing: 0.055em; text-transform: uppercase; color: var(--nx-ink-2);
}
.gantt-lane-name {
    height: var(--gantt-lane); display: flex; align-items: center; gap: 0.375rem;
    padding: 0 0.875rem; background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-line, #F2F3F9);
}
.gantt-row-name {
    height: var(--gantt-row); display: flex; align-items: center; gap: 0.5rem;
    padding: 0 0.875rem; border-bottom: 1px solid var(--nx-line, #F2F3F9); cursor: pointer;
    font-size: 0.8125rem; overflow: hidden;
}
.gantt-row-name:hover { background: var(--nx-soft, #FAFAFE); }
.gantt-row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gantt-time { flex: 1 1 auto; overflow-x: auto; min-width: 0; }
/* --gantt-min is set from GanttChartDto.MinWidthPx: enough room per day for the header to stay readable, so a long plan scrolls sideways. */
.gantt-head {
    display: grid; height: 46px; min-width: var(--gantt-min, 760px);
    background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring);
}
.gantt-col-head {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    border-left: 1px solid var(--nx-ring); font-size: 0.6875rem;
}
.gantt-col-head:first-child { border-left: none; }
.gantt-col-label { font-weight: 650; color: var(--nx-ink-2); }
.gantt-col-sub { font-size: 0.625rem; color: var(--nx-muted); }

.gantt-body { position: relative; min-width: var(--gantt-min, 760px); }
@media (max-width: 640px) {
    .gantt { --gantt-tree-def: 140px; }
    .gantt-tree { max-width: 55%; }
    .gantt-row-name, .gantt-lane-name, .gantt-tree-head { padding: 0 .5rem; }
}
.gantt-grid { position: absolute; inset: 0; display: grid; pointer-events: none; }
.gantt-grid-col { border-left: 1px solid var(--nx-line, #F0F1F7); }
.gantt-grid-col.is-weekend { background: #FAFAFC; }
.gantt-today {
    position: absolute; top: 0; bottom: 0; width: 0;
    border-left: 2px dashed var(--nx-critical); pointer-events: none; z-index: 2;
}

.gantt-lane-track { position: relative; height: var(--gantt-lane); border-bottom: 1px solid var(--nx-line, #F2F3F9); background: rgba(20,22,56,.015); }
.gantt-lane-bar {
    position: absolute; top: 12px; height: 6px; border-radius: 3px;
    background: var(--nx-900); opacity: .35;
}
.gantt-track { position: relative; height: var(--gantt-row); border-bottom: 1px solid var(--nx-line, #F2F3F9); cursor: pointer; }
.gantt-track:hover { background: rgba(99,102,241,.05); }
.gantt-bar {
    position: absolute; top: 7px; height: 20px; border-radius: 5px;
    background: var(--nx-ord-1); overflow: hidden; min-width: 6px;
    display: flex; align-items: center;
    box-shadow: 0 1px 2px rgba(16,19,48,.12);
}
.gantt-bar.is-late { background: #E8A08A; }
.gantt-bar.is-done { background: #9FD79F; }
.gantt-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--nx-ord-3); opacity: .85; }
.gantt-bar.is-late .gantt-bar-fill { background: var(--nx-critical); }
.gantt-bar.is-done .gantt-bar-fill { background: var(--nx-good); }
/* Late: an open task past its due date runs on to today in red (TaskBoard.razor); its planned part keeps its colour and joins the red without a gap. */
.gantt-bar-late { position: absolute; top: 7px; height: 20px; min-width: 4px; background: var(--nx-critical);
    border-radius: 0 5px 5px 0; box-shadow: 0 1px 2px rgba(16,19,48,.12); }
.gantt-bar.has-late { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gantt-bar-label {
    position: relative; z-index: 1; padding: 0 0.5rem;
    font-size: 0.6875rem; font-weight: 560; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.gantt-foot { padding: 0.75rem 1rem; font-size: 0.75rem; color: var(--nx-muted); border-top: 1px solid var(--nx-ring); }

/* =============================================================================
   Task detail panel
   ============================================================================= */

.task-panel { width: min(680px, 100vw); }
.task-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem 0.75rem 1.25rem; border-bottom: 1px solid var(--nx-ring);
    background: var(--nx-surface-2); flex: 0 0 auto;
}
.task-chip {
    background: var(--nx-accent); color: #fff; font-size: 0.6875rem; font-weight: 620;
    padding: 2px 9px; border-radius: var(--nx-r-xs);
}
.task-code { font-family: var(--nx-mono); font-size: 0.75rem; color: var(--nx-ink-2); }

.task-panel-title { padding: 1rem 1.25rem 0.875rem; border-bottom: 1px solid var(--nx-ring); flex: 0 0 auto; }
.task-title-input {
    width: 100%; font: inherit; font-size: 1.125rem; font-weight: 620; letter-spacing: -0.018em;
    color: var(--nx-ink); border: 1px solid transparent; border-radius: var(--nx-r-sm);
    padding: 0.25rem 0.5rem; margin-left: -0.5rem; background: transparent;
}
.task-title-input:hover { border-color: var(--nx-ring); }
.task-title-input:focus { outline: none; border-color: var(--nx-accent); background: var(--nx-surface, #fff); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.task-byline { font-size: 0.75rem; color: var(--nx-muted); margin-top: 0.25rem; }

.task-status-band {
    display: flex; align-items: center; gap: 0.75rem;
    border: 1px solid var(--nx-ring); border-radius: var(--nx-r);
    padding: 0.5rem 0.875rem; margin-bottom: 1.25rem; background: var(--nx-surface-2);
}
.task-status-band.tone-good    { background: rgba(12,163,12,.07);  border-color: rgba(12,163,12,.22); }
.task-status-band.tone-warning { background: rgba(250,178,25,.10); border-color: rgba(250,178,25,.30); }
.task-status-band.tone-info    { background: var(--nx-accent-soft); border-color: rgba(99,102,241,.24); }
.task-status-select { max-width: 200px; }
.task-band-label {
    margin-left: auto; font-size: 0.6563rem; font-weight: 650;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-muted);
}

.task-section { margin-bottom: 1.5rem; }
.task-section-head {
    font-size: 0.6875rem; font-weight: 660; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--nx-ink-2); margin-bottom: 0.625rem;
}
.task-textarea, .comment-compose textarea {
    width: 100%; font: inherit; font-size: 0.8594rem; color: var(--nx-ink); resize: vertical;
    border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm);
    padding: 0.5rem 0.625rem; background: var(--nx-surface);
}
.task-textarea:focus, .comment-compose textarea:focus {
    outline: none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft);
}

.task-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.task-field {
    display: grid; grid-template-columns: 104px 1fr; align-items: center;
    gap: 0.5rem; padding: 0.3125rem 0; border-bottom: 1px solid #F4F5FA; min-height: 40px;
}
.task-field label { font-size: 0.8125rem; color: var(--nx-ink-2); }
.task-field-static { font-size: 0.8594rem; color: var(--nx-ink); }
.task-inline-input {
    font: inherit; font-size: 0.8594rem; color: var(--nx-ink); width: 100%;
    border: 1px solid transparent; border-radius: var(--nx-r-xs); padding: 0.25rem 0.375rem; background: transparent;
}
.task-inline-input:hover { border-color: var(--nx-ring); background: var(--nx-surface, #fff); }
.task-inline-input:focus { outline: none; border-color: var(--nx-accent); background: var(--nx-surface, #fff); box-shadow: 0 0 0 3px var(--nx-accent-soft); }

.task-pct { display: flex; align-items: center; gap: 0.5rem; }
.task-pct input[type=range] { flex: 1 1 auto; accent-color: var(--nx-accent); min-width: 0; }
.task-pct > span:not(.task-pct-unit) { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

.task-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 0.875rem; }
.tag-x { background: none; border: none; cursor: pointer; padding: 0 0 0 4px; color: inherit; opacity: .55; font: inherit; }
.tag-x:hover { opacity: 1; }
.tag-add {
    font: inherit; font-size: 0.6875rem; width: 74px; padding: 2px 7px;
    border: 1px dashed var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: transparent; color: var(--nx-ink-2);
}
.tag-add:focus { outline: none; border-style: solid; border-color: var(--nx-accent); background: var(--nx-surface, #fff); }

.task-tabs {
    display: flex; gap: 0.125rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--nx-ring); margin-bottom: 1rem;
}
.task-tab {
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: 0.8125rem; font-weight: 520; color: var(--nx-ink-2);
    padding: 0.5rem 0.75rem; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.task-tab:hover { color: var(--nx-ink); }
.task-tab.active { color: var(--nx-accent); border-bottom-color: var(--nx-accent); font-weight: 620; }
.task-tab .count {
    display: inline-block; margin-left: 0.3125rem; padding: 0 6px; border-radius: 999px;
    background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: 0.6563rem; font-weight: 650;
}
.task-tab.active .count { background: var(--nx-accent-soft-2); color: var(--nx-800); }
.task-tab-body { padding-bottom: 1.5rem; }
.task-tab-empty {
    padding: 1.5rem; text-align: center; font-size: 0.8125rem; color: var(--nx-muted);
    background: var(--nx-surface-2); border-radius: var(--nx-r);
}

.comment-compose { display: flex; gap: 0.625rem; margin-bottom: 0.625rem; }
.comment { display: flex; gap: 0.625rem; padding: 0.625rem 0; border-top: 1px solid var(--nx-line, #F2F3F9); }
.comment-meta { font-size: 0.75rem; color: var(--nx-muted); }
.comment-body { font-size: 0.8594rem; margin-top: 2px; white-space: pre-wrap; }

.subtask-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--nx-line, #F2F3F9); font-size: 0.8594rem;
}
.subtask-row .spacer { flex: 1 1 auto; }
.subtask-row .is-done { text-decoration: line-through; color: var(--nx-muted); }
.task-hours-total {
    background: var(--nx-accent-soft); border-radius: var(--nx-r);
    padding: 0.625rem 0.875rem; font-size: 0.8594rem; margin-bottom: 0.75rem;
}

.task-timeline { padding-left: 0.375rem; }
.tl-row { display: flex; gap: 0.75rem; padding: 0.5rem 0; position: relative; }
.tl-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--nx-400);
    margin-top: 5px; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--nx-accent-soft);
}
.tl-dot.is-late { background: var(--nx-critical); box-shadow: 0 0 0 3px rgba(208,59,59,.14); }
.tl-when { font-size: 0.75rem; color: var(--nx-muted); }
.task-head-id { display: flex; align-items: center; gap: 0.5rem; }

/* =============================================================================
   Schedule — month calendar and the resource-load grid
   ============================================================================= */

.sched-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sched-period { font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.012em; min-width: 190px; }

/* --- Month calendar ----------------------------------------------------------- */
.cal { --cal-wk: 46px; }
.cal-head, .cal-week { display: grid; grid-template-columns: var(--cal-wk) repeat(7, minmax(0, 1fr)); }
.cal-week { position: relative; }
.cal-head { background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring); }
.cal-dow, .cal-wk {
    padding: 0.5rem; text-align: center;
    font-size: 0.6563rem; font-weight: 650; letter-spacing: 0.055em; text-transform: uppercase;
    color: var(--nx-ink-2);
}
.cal-week .cal-wk {
    display: flex; align-items: center; justify-content: center;
    background: var(--nx-surface-2); border-right: 1px solid var(--nx-ring);
    border-bottom: 1px solid var(--nx-ring); color: var(--nx-muted);
}
.cal-day {
    min-height: max(116px, calc(40px + var(--lanes, 0) * 24px + 22px)); padding: 0.375rem;
    border-right: 1px solid var(--nx-line, #F2F3F9); border-bottom: 1px solid var(--nx-line, #F2F3F9);
    display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cal-day.is-outside { background: var(--nx-soft, #FBFBFE); }
.cal-day.is-outside .cal-daynum { color: var(--nx-muted); }
.cal-day.is-weekend { background: #FAFAFD; }
.cal-day.is-today { background: var(--nx-accent-soft); box-shadow: inset 0 0 0 2px var(--nx-400); }
.cal-daynum {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 0.75rem; font-weight: 620; color: var(--nx-ink-2); margin-bottom: 2px;
}
.cal-day.is-today .cal-daynum { color: var(--nx-800); }
.cal-more { font-size: 0.6563rem; font-weight: 550; color: var(--nx-muted); }

/* A chip is the task; the left rail carries priority, which is the thing you scan a
   month grid for. Overdue overrides it, because that is more urgent than priority. */
.cal-chip {
    border-radius: 5px; padding: 3px 6px; background: var(--nx-surface);
    border: 1px solid var(--nx-ring); border-left: 3px solid var(--nx-ord-1);
    font-size: 0.6875rem; line-height: 1.25; overflow: hidden; cursor: default;
}
.cal-chip.pri-low     { border-left-color: #B6BCD0; }
.cal-chip.pri-medium  { border-left-color: var(--nx-ord-1); }
.cal-chip.pri-high    { border-left-color: var(--nx-serious); }
.cal-chip.pri-urgent  { border-left-color: var(--nx-critical); }
.cal-chip.is-late { background: rgba(208,59,59,.07); border-color: rgba(208,59,59,.22); }
.cal-chip-title {
    display: block; font-weight: 550; color: var(--nx-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip-project { display: block; font-size: 0.625rem; color: var(--nx-muted); font-family: var(--nx-mono); }

/* --- Resource load ------------------------------------------------------------ */
.load-scroll { overflow-x: auto; }
.load-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.75rem; }
.load-grid th, .load-grid td {
    border-right: 1px solid #EFF0F7; border-bottom: 1px solid #EFF0F7;
    vertical-align: top; padding: 0.375rem;
}
.load-grid thead th {
    position: sticky; top: 0; z-index: 3; text-align: center;
    background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring);
}
.load-dow { font-size: 0.625rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nx-ink-2); }
.load-date { font-size: 0.6875rem; color: var(--nx-muted); font-variant-numeric: tabular-nums; }

/* The name column stays put while the days scroll past it. */
.load-res {
    position: sticky; left: 0; z-index: 2; background: var(--nx-surface);
    min-width: 172px; max-width: 172px; box-shadow: 1px 0 0 var(--nx-ring);
}
.load-grid thead .load-res { z-index: 4; background: var(--nx-surface-2); }
.load-name { font-weight: 600; font-size: 0.8125rem; }
.load-sub { font-size: 0.6563rem; color: var(--nx-muted); }

.load-day { min-width: 132px; }
.load-day.is-weekend, .load-cell.is-weekend { background: var(--nx-soft, #F4F5FA); }
.load-cell { min-width: 132px; max-width: 168px; }
.load-off {
    display: block; text-align: center; padding: 0.75rem 0;
    font-size: 0.625rem; font-weight: 650; letter-spacing: 0.08em; color: var(--nx-muted);
}

/* Cell tint is the load signal; the hour figure under it is what actually carries the
   number, so the colour never has to be read on its own. */
.load-cell.tone-ok   { background: rgba(99,102,241,.06); }
.load-cell.tone-full { background: rgba(250,178,25,.12); }
.load-cell.tone-over { background: rgba(208,59,59,.10); }

.load-item {
    background: var(--nx-surface); border: 1px solid var(--nx-ring);
    border-radius: 5px; padding: 3px 5px; margin-bottom: 3px; line-height: 1.3;
}
.load-item-proj { display: block; font-size: 0.625rem; font-weight: 640; color: var(--nx-800); }
.load-item-task {
    display: block; font-size: 0.6875rem; color: var(--nx-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.load-item-h { font-size: 0.625rem; font-weight: 640; color: var(--nx-ink-2); font-variant-numeric: tabular-nums; }
.load-cell-total {
    text-align: right; font-size: 0.6563rem; font-weight: 680;
    color: var(--nx-ink-2); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.load-total {
    position: sticky; right: 0; z-index: 2; background: var(--nx-soft, #F6F7FC);
    text-align: right; white-space: nowrap; min-width: 74px;
    font-variant-numeric: tabular-nums; box-shadow: -1px 0 0 var(--nx-ring);
}
.load-grid thead .load-total { z-index: 4; background: var(--nx-soft, #EDEFF8); }

.load-legend {
    display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap;
    padding: 0.75rem 1rem; border-top: 1px solid var(--nx-ring);
    font-size: 0.75rem; color: var(--nx-ink-2);
}
.load-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.load-legend .sw.ok   { background: rgba(99,102,241,.22); }
.load-legend .sw.full { background: rgba(250,178,25,.40); }
.load-legend .sw.over { background: rgba(208,59,59,.32); }
.load-note { margin-left: auto; color: var(--nx-muted); }
.load-more {
    font: inherit; font-size: 0.6563rem; font-weight: 600; color: var(--nx-accent);
    padding: 2px 4px; cursor: pointer; background: none; border: 0; border-radius: 4px; text-align: left;
}
.load-more:hover { background: var(--nx-accent-soft); text-decoration: underline; }

/* =============================================================================
   Documents and project users
   ============================================================================= */

.doc-upload { margin-bottom: 0.25rem; }
/* The real input is hidden and driven by the label, so the drop zone can be styled
   — a bare file input can't be. */
.doc-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.doc-drop {
    display: flex; align-items: center; gap: 0.875rem; cursor: pointer;
    border: 1.5px dashed var(--nx-ring-strong); border-radius: var(--nx-r);
    padding: 1rem 1.25rem; background: var(--nx-surface);
    transition: border-color .14s ease, background .14s ease;
}
.doc-drop:hover { border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.doc-drop .mud-icon-root { color: var(--nx-accent); font-size: 1.75rem; }
.doc-drop-note { font-size: 0.75rem; color: var(--nx-muted); margin-top: 2px; }
/* Links to files in Google Drive, OneDrive, Dropbox... (#480) */
.cl-wrap { margin-top: .5rem; }
.cl-open { display: inline-flex; align-items: center; gap: .375rem; border: 0; background: transparent; color: var(--nx-accent); font: inherit; font-size: .8125rem; font-weight: 600; padding: .25rem 0; cursor: pointer; }
.cl-open:hover { text-decoration: underline; }
.cl-open:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; border-radius: 4px; }
.cl-form { display: flex; flex-direction: column; gap: .375rem; padding: .75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface); }
.cl-form label { font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); }
.cl-form .set-input { width: 100%; max-width: 560px; }
.cl-detected { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--nx-ink-2); }
.cl-icon { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--nx-muted); }
.cl-google-drive { color: #1A73E8; }
.cl-onedrive, .cl-sharepoint { color: #0364B8; }
.cl-dropbox { color: #0061FE; }
.cl-box { color: #0061D5; }
html[data-theme="dark"] .cl-google-drive, html[data-theme="dark"] .cl-onedrive, html[data-theme="dark"] .cl-sharepoint, html[data-theme="dark"] .cl-dropbox, html[data-theme="dark"] .cl-box { filter: brightness(1.5); }
/* GitHub and GitLab (#481): the Code tab of a task, and the connection steps under Settings, Integrations */
.code-row { flex-wrap: wrap; row-gap: 2px; }
.code-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.code-meta { font-size: .75rem; color: var(--nx-muted); overflow-wrap: anywhere; }
.code-meta code { font-size: .75rem; }
.cc-made { margin: .5rem 0 1rem; }
.cc-steps { margin: .25rem 0 .75rem; padding-inline-start: 1.25rem; font-size: .8125rem; color: var(--nx-ink-2); }
.cc-steps li { margin-bottom: .25rem; }
.cc-label { display: block; font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); margin-top: .5rem; }
.doc-input:focus-visible + .doc-drop { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }

.doc-table td { vertical-align: middle; }
.doc-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 540; }
.doc-name a { color: var(--nx-ink); text-decoration: none; }
.doc-name a:hover { color: var(--nx-accent); text-decoration: underline; }
.doc-name .mud-icon-root { color: var(--nx-muted); }
.doc-desc { font-size: 0.75rem; color: var(--nx-muted); margin-top: 1px; }
.doc-task { font-weight: 540; }

.pu-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.pu-owner { font-size: 0.6875rem; font-weight: 600; color: var(--nx-accent); }
.pu-role { max-width: 150px; }

/* Row actions: the edit button sits beside the overflow menu rather than inside it. */
.nx-row-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.nx-row-actions .mud-icon-button { color: var(--nx-muted); }
.nx-row-actions .mud-icon-button:hover { color: var(--nx-accent); background: var(--nx-accent-soft); }
.nx-cell-actions { text-align: right; }

/* The project table is wider than most screens, and the actions are the point of the
   row — pin them to the right edge so Edit is never scrolled out of reach. */
.nx-table .nx-sticky-actions {
    position: sticky; right: 0; z-index: 2;
    background: var(--nx-surface); box-shadow: -1px 0 0 var(--nx-ring);
}
.nx-table thead .nx-sticky-actions { z-index: 4; background: var(--nx-surface-2); }
.nx-table tbody tr:hover .nx-sticky-actions { background: var(--nx-soft, #FAFAFE); }

/* --- Task list: selection, bulk bar, row menu -------------------------------- */
.tb-list .w-check { width: 34px; }
.tb-list .w-menu { width: 40px; text-align: right; }
.tb-list input[type=checkbox] { accent-color: var(--nx-accent); cursor: pointer; }
.tb-row.is-picked { background: var(--nx-accent-soft) !important; }
.tb-row.is-picked td { border-bottom-color: var(--nx-accent-soft-2); }

.tb-bulk {
    display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
    padding: 0.5rem 0.75rem; background: var(--nx-accent-soft);
    border-bottom: 1px solid var(--nx-accent-soft-2);
    position: sticky; top: 0; z-index: 5;
}
.tb-bulk .spacer { flex: 1 1 auto; }
.tb-bulk-x {
    background: none; border: none; cursor: pointer; font-size: 1.125rem; line-height: 1;
    color: var(--nx-ink-2); padding: 0 0.25rem;
}
.tb-bulk-count { font-size: 0.8125rem; font-weight: 640; color: var(--nx-800); margin-right: 0.375rem; }
.tb-bulk-btn {
    background: var(--nx-surface); border: 1px solid var(--nx-ring-strong); cursor: pointer;
    font: inherit; font-size: 0.75rem; font-weight: 550; color: var(--nx-ink);
    padding: 0.25rem 0.625rem; border-radius: 999px;
}
.tb-bulk-btn:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.tb-bulk-btn.is-danger { color: #A32222; border-color: rgba(208,59,59,.32); }
.tb-bulk-btn.is-danger:hover { background: rgba(208,59,59,.08); border-color: var(--nx-critical); color: #A32222; }
.tb-bulk-tag input {
    font: inherit; font-size: 0.75rem; width: 92px; padding: 0.25rem 0.5rem;
    border: 1px dashed var(--nx-ring-strong); border-radius: 999px; background: transparent;
}
.tb-bulk-tag input:focus { outline: none; border-style: solid; border-color: var(--nx-accent); background: var(--nx-surface, #fff); }

.tb-insert td { background: var(--nx-accent-soft); padding: 0.25rem 0.75rem; }
.tb-add-input.is-list { font-weight: 560; color: var(--nx-accent); }

/* Project list: tags get their own column, and the table runs tighter so more
   projects fit on a screen — the reference portal shows ~25 rows, we showed 8. */
.nx-tagline.is-inline { margin-top: 0; }
.nx-tag.is-group { background: var(--nx-surface-3); color: var(--nx-ink-2); }
.nx-tag-empty { color: var(--nx-muted); }
.nx-tag-more {
    font-size: 0.6875rem; font-weight: 600; padding: 1px 6px; border-radius: var(--nx-r-xs);
    background: var(--nx-surface-3); color: var(--nx-ink-2); cursor: default;
}
/* Dense mode targets the reference portal's row rhythm: the whole point of a portfolio
   list is seeing the portfolio, and 8 rows a screen defeats it. Everything that sets the
   row's height is trimmed together — padding, avatar, ring and the group chip. */
.nx-table.is-dense tbody td { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.nx-table.is-dense thead th { padding-top: 0.4375rem !important; padding-bottom: 0.4375rem !important; }
.nx-table.is-dense .nx-avatar { width: 20px; height: 20px; font-size: 0.5rem; box-shadow: none; }
.nx-table.is-dense .nx-ring-chart { width: 24px; height: 24px; }
.nx-table.is-dense .nx-ring-chart span { width: 18px; height: 18px; font-size: 0.5rem; }
.nx-table.is-dense .project-name { font-size: 0.8125rem; }
.nx-table.is-dense .nx-status { padding: 1px 8px 1px 6px; font-size: 0.6875rem; }
.nx-table.is-dense .nx-tag, .nx-table.is-dense .nx-tag-more { font-size: 0.6563rem; padding: 0 6px; }
.nx-table.is-dense .mud-progress-linear { height: 5px !important; }
.nx-table.is-dense .mud-icon-button { padding: 4px; }
/* The group chip sits on the name line rather than wrapping under it. */
.nx-table.is-dense .nx-cell-name .nx-tagline { display: inline-flex; margin: 0 0 0 0.375rem; vertical-align: middle; }
/* MudBlazor icon buttons carry a 40px+ hit area, which was the real floor under the
   dense row height. Shrunk here only — full-size elsewhere. */
.nx-table.is-dense .nx-row-actions .mud-icon-button {
    min-width: 0; min-height: 0; width: 26px; height: 26px; padding: 3px;
}
.nx-table.is-dense .nx-row-actions .mud-icon-root { font-size: 1.05rem; }
.nx-table.is-dense tbody td { line-height: 1.35; }
/* Tags and the task rollup were each wrapping to a second line and, being the tallest
   cell in the row, setting the height of the whole table. Both stay on one line; the
   tag column ellipsises and the overflow count carries the rest in its tooltip. */
.nx-table.is-dense .nx-tagline.is-inline {
    flex-wrap: nowrap; max-width: 150px; overflow: hidden;
}
.nx-table.is-dense .nx-tagline.is-inline .nx-tag {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px;
}
.nx-table.is-dense td .d-flex { flex-wrap: nowrap; }
/* Single-line project names, as in the reference portal: a four-line name was setting the
   height of its whole row. The full name stays available as the cell's tooltip. */
.nx-table.is-dense .nx-cell-name { max-width: 300px; }
.nx-table.is-dense .project-name {
    display: inline-block; max-width: 230px; vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The overdue chip was butting against the total count. */
.nx-table.is-dense .overdue-chip { margin-left: 0.375rem; white-space: nowrap; }

/* =============================================================================
   Filter panel
   ============================================================================= */

.filter-panel { width: min(400px, 100vw); }
.filter-search {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1rem; border-bottom: 1px solid var(--nx-ring); flex: 0 0 auto;
}
.filter-search .mud-icon-root { color: var(--nx-muted); }
.filter-search input {
    flex: 1 1 auto; font: inherit; font-size: 0.8594rem; border: none; outline: none;
    background: transparent; color: var(--nx-ink);
}
.filter-body { padding: 0; }

.filter-field { border-bottom: 1px solid var(--nx-line, #F2F3F9); }
.filter-field-head {
    width: 100%; display: flex; align-items: center; gap: 0.5rem;
    background: none; border: none; cursor: pointer; font: inherit;
    padding: 0.6875rem 1rem; text-align: left; color: var(--nx-ink);
}
.filter-field-head:hover { background: var(--nx-surface-2); }
.filter-field-label { flex: 1 1 auto; font-size: 0.8594rem; }
.filter-field.is-set .filter-field-label { color: var(--nx-accent); font-weight: 580; }
.filter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nx-accent); flex: 0 0 auto; }
.filter-field-body { padding: 0 1rem 0.875rem; }

.filter-input {
    width: 100%; font: inherit; font-size: 0.8125rem; color: var(--nx-ink);
    border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm);
    padding: 0.375rem 0.5rem; background: var(--nx-surface);
}
.filter-input:focus { outline: none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.filter-pair { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--nx-muted); }
.filter-choices { display: grid; gap: 0.3125rem; max-height: 190px; overflow-y: auto; }
.filter-choice {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; cursor: pointer; color: var(--nx-ink);
}
.filter-choice input { accent-color: var(--nx-accent); }

.filter-match {
    display: flex; gap: 1.25rem; padding: 0.75rem 1rem;
    border-top: 1px solid var(--nx-ring); background: var(--nx-surface-2); flex: 0 0 auto;
}
.filter-match label {
    display: flex; align-items: center; gap: 0.375rem;
    font-size: 0.8125rem; color: var(--nx-ink-2); cursor: pointer;
}
.filter-match input { accent-color: var(--nx-accent); }

.nx-filter-btn { position: relative; }
.nx-filter-btn .count {
    position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px;
    border-radius: 999px; background: var(--nx-accent); color: #fff;
    font-size: 0.625rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}

/* =============================================================================
   Modern pass

   Appended last so it wins over the rules above. Three things were making the
   app read as an old admin template, and each is undone here:

     1. Material's outlined inputs with notched floating labels. Replaced with a
        plain bordered field and a quiet focus ring.
     2. Borders doubled with drop shadows on every surface, plus uppercase
        micro-headers everywhere. Structure now comes from one hairline.
     3. A cool blue cast over every grey. The neutrals above are true greys, so
        the one accent actually reads as an accent.
   ============================================================================= */

/* --- Shell -------------------------------------------------------------------- */
.nx-drawer {
    background: var(--nx-nav) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}
.nx-nav-brand { border-bottom-color: var(--nx-nav-line); height: 56px; }
.nx-nav-section {
    padding: 1.125rem 1.125rem 0.3125rem;
    font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em;
    text-transform: none; color: var(--nx-nav-text-dim);
}
.nx-drawer .mud-nav-link {
    margin: 1px 8px; padding: 0.4375rem 0.625rem; min-height: 34px;
    font-size: 0.8438rem; font-weight: 450; border-radius: var(--nx-r-sm);
}
.nx-drawer .mud-nav-link .mud-icon-root { font-size: 1.0625rem; opacity: .7; }
.nx-drawer .mud-nav-link.active { background: var(--nx-nav-active); font-weight: 520; }
.nx-drawer .mud-nav-link.active .mud-icon-root { color: #fff; opacity: 1; }
/* The rail marker went with the flat treatment — the fill alone reads as selected. */
.nx-drawer .mud-nav-link.active::after { display: none; }
.nx-nav-foot { border-top-color: var(--nx-nav-line); font-size: 0.6563rem; }

.nx-appbar {
    background: rgba(255, 255, 255, 0.72) !important;
    border-bottom: 1px solid var(--nx-ring);
    backdrop-filter: saturate(160%) blur(12px);
}

/* --- Page furniture ------------------------------------------------------------ */
h1 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.021em; }
.nx-page-head { margin-bottom: 1.125rem; }
.nx-page-icon { width: 34px; height: 34px; border-radius: 9px; }
.nx-page-sub { font-size: 0.8125rem; color: var(--nx-muted); }

.nx-card { box-shadow: none; border-radius: var(--nx-r); }
.nx-card-head { padding: 0.875rem 1.125rem; }
.nx-card-title { font-size: 0.875rem; font-weight: 600; }

/* --- Stat tiles ----------------------------------------------------------------
   The coloured rule across the top of each tile was pure dashboard-template. The
   tint now lives only in the icon chip, and the figure carries the tile. */
.nx-stat { box-shadow: none; padding: 0.875rem 1rem 1rem; border-radius: var(--nx-r); }
.nx-stat::before { display: none; }
.nx-stat:hover { transform: none; box-shadow: none; border-color: var(--nx-ring-strong); }
.nx-stat-icon { width: 26px; height: 26px; border-radius: 7px; }
.nx-stat-label { font-size: 0.75rem; color: var(--nx-muted); font-weight: 450; }
.nx-stat-value { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.028em; }
.nx-stat-context { font-size: 0.7188rem; }
.nx-stats { gap: 0.75rem; }

/* --- Tables ---------------------------------------------------------------------
   No uppercase micro-caps, no vertical rules, one hairline between rows. */
.nx-table thead th, .tb-list thead th, .pay-grid thead th, .load-grid thead th {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--nx-muted) !important;
    background: transparent !important;
}
.nx-table thead th, .tb-list thead th {
    border-bottom: 1px solid var(--nx-ring) !important;
}
.nx-table tbody td, .tb-list td { border-bottom: 1px solid rgba(0, 0, 0, 0.045) !important; }
.nx-table tbody tr:hover, .tb-row:hover { background: var(--nx-soft, #FAFAFA) !important; }
.project-code, .kanban-code, .task-code {
    font-family: var(--nx-font); font-size: 0.7188rem; letter-spacing: -0.005em;
    background: transparent; color: var(--nx-muted); padding: 0;
}
.project-name { font-weight: 500; }

/* --- Pills and tags -------------------------------------------------------------
   Borderless. A border, a fill and a dot on one small chip is two signals too many. */
.nx-status {
    border: none; font-weight: 500; font-size: 0.7188rem; padding: 2px 8px 2px 6px;
}
.nx-tag, .nx-tag-more, .muted-pill {
    border-radius: var(--nx-r-xs); font-weight: 450;
    background: var(--nx-surface-3); color: var(--nx-ink-2);
}
.nx-tag { background: var(--nx-accent-soft); color: var(--nx-700); }

/* --- Tabs ------------------------------------------------------------------------ */
.scope-tab, .task-tab { font-weight: 450; font-size: 0.8438rem; }
.scope-tab.active, .task-tab.active { font-weight: 550; }
.scope-tab .count, .task-tab .count, .tb-group-count {
    background: var(--nx-surface-3); color: var(--nx-ink-2); font-weight: 550;
}
.mud-tabs .mud-tab { text-transform: none; font-size: 0.875rem; font-weight: 450; letter-spacing: 0; }
.mud-tabs .mud-tab.mud-tab-active { font-weight: 570; }

/* --- Buttons ---------------------------------------------------------------------
   One solid button per screen; everything else is quiet. */
.mud-button-root { border-radius: var(--nx-r-sm); font-weight: 500; font-size: 0.8125rem; }
.mud-button-filled { box-shadow: none !important; }
.mud-button-filled:hover { box-shadow: none !important; filter: brightness(1.06); }
.mud-button-outlined { border-color: var(--nx-ring-strong); color: var(--nx-ink); }
.mud-button-outlined:hover { background: var(--nx-surface-3); border-color: var(--nx-ring-strong); }

/* --- Inputs ----------------------------------------------------------------------
   MudBlazor's outlined variant draws a notched legend around a floating label —
   the single most dated thing on the screen. The notch and the floating label are
   removed and the control is drawn as a plain field with a soft focus ring. */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--nx-r-sm); border-color: var(--nx-ring-strong);
    /* Kills the notch cut for the floating label. */
    legend { display: none !important; max-width: 0 !important; }
}
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--nx-ring-strong); }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px !important; border-color: var(--nx-accent) !important;
    box-shadow: 0 0 0 3px var(--nx-accent-soft);
}
.mud-input-root { font-size: 0.8438rem; }
.mud-input-label-outlined.mud-input-label-inputcontrol { font-size: 0.8438rem; }
/* A label that has floated up sits above the field rather than inside its border. */
.mud-input-label.mud-input-label-outlined.mud-input-label-margin-dense[data-shrink=true],
.mud-input-label.mud-input-label-outlined[data-shrink=true] {
    transform: translate(2px, -22px) scale(0.86);
    color: var(--nx-muted);
    background: transparent; padding: 0;
}
.mud-input-control { margin-top: 0.375rem; }

.tb-search, .filter-input, .tb-add-input, .pay-input, .task-inline-input {
    border-radius: var(--nx-r-sm);
}
.tb-search:focus, .filter-input:focus {
    box-shadow: 0 0 0 3px var(--nx-accent-soft); border-color: var(--nx-accent);
}

/* --- Menus and panels ------------------------------------------------------------ */
.mud-popover { border: 1px solid var(--nx-ring); border-radius: var(--nx-r) !important; }
.mud-list-item { font-size: 0.8438rem; border-radius: var(--nx-r-xs); margin: 1px 5px; }
.mud-list-item:hover { background: var(--nx-surface-3); }
.side-panel { box-shadow: var(--nx-sh-pop); }
.side-panel-scrim { background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(1px); }
.side-panel-section {
    text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 600;
    color: var(--nx-ink); border-bottom: none; padding-bottom: 0; margin-bottom: 0.625rem;
}

/* --- Task list ------------------------------------------------------------------- */
.tb-views { background: var(--nx-surface-3); padding: 2px; border-radius: var(--nx-r-sm); }
.tb-view { border-radius: var(--nx-r-xs); font-weight: 450; }
.tb-view.active { box-shadow: none; background: var(--nx-surface); font-weight: 550; }
.tb-group td { background: transparent; border-bottom: 1px solid var(--nx-ring) !important; }
.tb-group-name { font-weight: 570; }

/* Add Task / Add Task List, at the foot of every group as in the reference portal. */
.tb-add td { background: transparent; padding: 0.3125rem 0.75rem 0.5rem !important; }
.tb-add.is-foot td { padding-top: 0.625rem !important; padding-bottom: 0.75rem !important; }
.tb-add-actions { display: flex; align-items: center; gap: 0.625rem; }
.tb-add-link {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: 0.8125rem; color: var(--nx-muted); padding: 0.1875rem 0;
    transition: color .12s ease;
}
.tb-add-link:hover { color: var(--nx-accent); }
.tb-add-link .mud-icon-root { font-size: 0.9375rem; }
.tb-add-sep { width: 1px; height: 13px; background: var(--nx-ring-strong); }
.tb-add-input.is-open {
    border: 1px solid var(--nx-accent); background: var(--nx-surface, #fff);
    box-shadow: 0 0 0 3px var(--nx-accent-soft); max-width: 420px;
}

/* --- Kanban ---------------------------------------------------------------------- */
.kanban-column { background: var(--nx-surface-2); border: 1px solid var(--nx-ring); }
.kanban-card { box-shadow: none; }
.kanban-card:hover { box-shadow: var(--nx-sh-2); transform: none; border-color: var(--nx-ring-strong); }

/* --- Empty states ----------------------------------------------------------------- */
.nx-empty { box-shadow: none; }
.nx-empty-icon { background: var(--nx-surface-3); color: var(--nx-muted); border-radius: 12px; }

/* The transparent table-head rule above also stripped the background from the sticky
   cells, which then let rows scroll through them. Sticky cells must stay opaque. */
.nx-table thead .nx-sticky-actions,
.pay-grid thead .stick-1, .pay-grid thead .stick-2, .pay-grid thead th.calc,
.load-grid thead .load-res, .load-grid thead .load-total,
.tb-list thead th {
    background: var(--nx-surface) !important;
}
.nx-table tbody .nx-sticky-actions { background: var(--nx-surface); }
.nx-table tbody tr:hover .nx-sticky-actions { background: var(--nx-soft, #FAFAFA); }
.pay-grid thead th.calc { background: var(--nx-soft, #F4F4F6) !important; }
.pay-grid .calc { background: var(--nx-soft, #FAFAFA); }
.pay-grid tfoot td { background: var(--nx-soft, #F4F4F6); }
.load-grid thead .load-total { background: var(--nx-soft, #F4F4F6) !important; }
.load-total { background: var(--nx-soft, #FAFAFA); }


/* ── Ported from the parallel build: dashboard widgets, the project activity feed,
   the task-detail helpers and the new top-bar furniture. Tokens below are this
   sheet's own, so the ported rules inherit the flat neutral palette. ── */

.project-dashboard-toolbar, .project-log-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }

.project-widget-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:0.75rem; }

.project-widget { position:relative; min-height:132px; padding:1rem; border:1px solid var(--nx-ring); border-radius:var(--nx-r-md); background:var(--nx-surface); }

.project-widget-icon { position:absolute; right:0.875rem; top:0.875rem; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; }

.project-widget-label { max-width:135px; color:var(--nx-muted); font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.035em; }

.project-widget-value { margin-top:1.1rem; font-size:1.65rem; line-height:1; font-weight:680; color:var(--nx-ink); letter-spacing:-.03em; }

.project-widget-caption { margin-top:0.55rem; color:var(--nx-muted); font-size:0.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.activity-feed { padding:0.75rem 1rem; }

.activity-row { position:relative; display:flex; gap:0.75rem; padding:0.75rem 0; border-bottom:1px solid var(--nx-ring); font-size:0.82rem; }

.activity-row:last-child { border-bottom:0; }

.activity-dot { width:8px; height:8px; margin-top:0.35rem; border-radius:50%; background:var(--nx-accent); flex:0 0 auto; }

.nx-menu-button {
    width:40px; height:40px; margin-right:.85rem !important;
    border:1px solid var(--nx-ring); border-radius:12px !important; background:var(--nx-surface, #fff);
}

.nx-topbar-title { display:flex; flex-direction:column; line-height:1.15; font-size:.92rem; font-weight:650; color:var(--nx-ink); }

.nx-topbar-eyebrow { margin-bottom:3px; font-size:.64rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--nx-muted); }

.nx-command-hint {
    width:min(330px, 30vw); height:40px; display:flex; align-items:center; gap:.55rem;
    margin-right:1rem; padding:0 .55rem 0 .8rem; border:1px solid var(--nx-ring);
    border-radius:12px; background:var(--nx-surface-3); color:var(--nx-muted); font-size:.78rem;
}

.nx-command-hint span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.nx-command-hint kbd { margin-left:auto; padding:2px 7px; border:1px solid var(--nx-ring); border-bottom-color:#D0D5DD; border-radius:6px; background:var(--nx-surface, #fff); color:#667085; font:600 .68rem var(--nx-font); }

.nx-top-action { margin-right:.75rem !important; border-radius:11px !important; color:#667085 !important; }

.nx-nav-foot-dot { width:8px; height:8px; border-radius:50%; background:#12B76A; box-shadow:0 0 0 4px #D1FADF; flex:0 0 auto; }

.nx-main-canvas { max-width:1560px; margin:0 auto; padding:2rem clamp(1.25rem,2.5vw,2.75rem) 3rem; }

.nx-project-hero {
    position:relative; overflow:hidden; margin:-.15rem 0 1.1rem; padding:1.35rem 1.5rem;
    border:1px solid rgba(91,92,240,.14); border-radius:20px;
    background:linear-gradient(115deg,#FFFFFF 0%,var(--nx-surface-2) 58%,var(--nx-accent-soft) 100%);
    box-shadow:0 10px 30px -20px rgba(74,68,212,.34);
}

.nx-project-hero::after { content:""; position:absolute; width:220px; height:220px; right:-85px; top:-120px; border-radius:50%; background:linear-gradient(135deg,rgba(122,90,248,.13),rgba(46,144,250,.04)); pointer-events:none; }

.nx-project-hero .nx-ring-chart { width:48px; height:48px; box-shadow:0 0 0 5px rgba(255,255,255,.82); }

.nx-project-hero .nx-ring-chart span { width:38px; height:38px; font-size:.7rem; }

.nx-project-hero .project-code { background:var(--nx-accent-soft); color:#4B4BD8; }

.project-dashboard-toolbar { margin:.15rem 0 1.1rem; }

.project-dashboard-toolbar .mud-typography-h6,
.project-log-head .mud-typography-h6 { color:#101828; font-size:1.08rem; font-weight:680; letter-spacing:-.015em; }

.project-widget-grid { grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:.9rem; }

.project-widget {
    min-height:150px; padding:1.15rem; overflow:hidden; border:1px solid var(--nx-ring);
    border-radius:17px; background:linear-gradient(145deg,#FFFFFF,var(--nx-plane));
    box-shadow:0 1px 2px rgba(16,24,40,.035); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.project-widget::after { content:""; position:absolute; width:80px; height:80px; right:-40px; bottom:-46px; border-radius:50%; background:rgba(91,92,240,.045); }

.project-widget:hover { transform:translateY(-3px); border-color:#D9D6FE; box-shadow:0 12px 25px -14px rgba(74,68,212,.28); }

.project-widget-icon { width:38px; height:38px; right:1rem; top:1rem; border-radius:11px; }

.project-widget-label { font-size:.67rem; color:#667085; letter-spacing:.065em; }

.project-widget-value { margin-top:1.45rem; font-size:1.78rem; font-weight:730; letter-spacing:-.045em; }

.project-widget-caption { margin-top:.6rem; color:var(--nx-muted); }

/* Tabs become a clean segmented sub-navigation instead of a boxed strip. */
.nx-project-tabs > .mud-tabs-tabbar { padding:5px; border:1px solid var(--nx-ring); border-radius:15px; background:rgba(255,255,255,.88); box-shadow:var(--nx-sh-1); }

.nx-project-tabs .mud-tab { min-height:42px; border-radius:10px; color:#667085; font-size:.75rem; font-weight:620; letter-spacing:.01em; }

.nx-project-tabs .mud-tab.mud-tab-active { color:#4B4BD8; background:var(--nx-accent-soft); }

.nx-project-tabs .mud-tabs-slider { display:none; }

/* The project has many tabs (up to 18). MudBlazor's sliding tab bar could scroll past them all and leave an empty bar after a far tab
   was opened (from a link or a click), so the project tabs never slide: on wide screens they wrap onto a second row, all visible;
   on phones they scroll sideways like any list, by finger. */
.nx-project-tabs .mud-tabs-tabbar-wrapper { transform: none !important; flex-wrap: wrap; width: auto !important; }
.nx-project-tabs .mud-tabs-scroll-button, .nx-project-tabs .mud-tab-slider { display: none !important; }
.nx-project-tabs .mud-tab { min-width: 0 !important; flex: 0 0 auto; padding-inline: 1rem; }
@media (max-width: 700px) {
    .nx-project-tabs .mud-tabs-tabbar-content { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .nx-project-tabs .mud-tabs-tabbar-content::-webkit-scrollbar { display: none; }
    .nx-project-tabs .mud-tabs-tabbar-wrapper { flex-wrap: nowrap; }
    .nx-project-tabs .mud-tab { white-space: nowrap; }
}

.nx-project-tabs > .mud-tabs-panels { padding-top:1.1rem; background:transparent !important; }

.task-inline-form {
    display: grid; grid-template-columns: minmax(150px, 1fr) minmax(110px, .55fr) auto;
    gap: .625rem; align-items: center; padding: .75rem;
    margin-bottom: .875rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r);
    background: var(--nx-surface-2);
}

.task-inline-form > .mud-input-control:nth-last-child(2):not(:nth-child(2)) { grid-column: 1 / -1; }

.task-dependency-form { grid-template-columns: minmax(220px, 1fr) minmax(170px, .7fr) auto; }

.task-related-row { color: inherit; text-decoration: none; cursor: pointer; border-radius: var(--nx-r-xs); }

.task-related-row:hover { background: var(--nx-surface-2); }

.task-link-button {
    border: 0; background: var(--nx-accent-soft); color: var(--nx-accent); cursor: pointer;
    border-radius: var(--nx-r-xs); padding: 2px 7px; font: 600 .72rem var(--nx-mono);
}

.task-link-button:hover { background: var(--nx-accent-soft-2); }

.task-icon-action {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: var(--nx-ink-2); cursor: pointer;
}

.task-icon-action:hover { background: var(--nx-surface-3); color: var(--nx-ink); }

.task-activity-stream { display: flex; flex-direction: column; }

.activity-entry {
    display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0;
    border-bottom: 1px solid var(--nx-surface-3); font-size: .8125rem;
}

.cal-add {
    width: 20px; height: 20px; margin-left: auto; padding: 0;
    display: inline-grid; place-items: center;
    border: 1px solid transparent; border-radius: 5px; background: transparent;
    color: var(--nx-muted); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}

.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }

.cal-add:hover, .cal-add:focus-visible {
    color: var(--nx-700); background: var(--nx-accent-soft-2); border-color: var(--nx-ring-strong); outline: none;
}

/* Time-log row actions — inline, revealed on hover so the grid stays quiet. */
.tl-act { white-space: nowrap; text-align: right; }

.tl-act-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--nx-muted);
    border-radius: var(--nx-r-xs);
    width: 24px; height: 24px;
    line-height: 1;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}

.tl-table tr:hover .tl-act-btn,
.tl-act-btn:focus-visible { opacity: 1; }

.tl-act-btn:hover { background: var(--nx-surface-3); color: var(--nx-ink); }
.tl-act-btn.is-ok:hover { background: var(--nx-ok-soft, #E7F6EC); color: #12B76A; }
.tl-act-btn.is-bad:hover,
.tl-act-btn.is-del:hover { background: var(--nx-bad-soft, #FEF0EF); color: #F04438; }

/* Time-log entry form — native controls, dressed to match the rest of the sheet. */
.tl-form { padding: 16px; margin-bottom: 14px; }
.tl-form-title { margin-bottom: 10px; }

.tl-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    align-items: end;
}

.tl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tl-field > span { font-size: 11.5px; color: var(--nx-ink-2); }

.tl-field input[type="date"],
.tl-field input[type="number"],
.tl-field select,
.tl-field textarea {
    width: 100%;
    font: inherit;
    font-size: 13px;
    color: var(--nx-ink);
    background: var(--nx-plane);
    border: 1px solid var(--nx-ring-strong);
    border-radius: var(--nx-r-xs);
    padding: 7px 9px;
}

.tl-field textarea { resize: vertical; }

.tl-field input:focus,
.tl-field select:focus,
.tl-field textarea:focus {
    outline: none;
    border-color: var(--nx-accent);
    box-shadow: 0 0 0 3px var(--nx-accent-soft);
}

.tl-field-check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 8px; }
.tl-field-check > span { font-size: 13px; color: var(--nx-ink); }
.tl-field-notes { margin-top: 12px; }

.tl-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

@media (max-width: 900px) {
    .tl-form-grid { grid-template-columns: 1fr 1fr; }
}

/* Plain buttons for the native forms, matching MudBlazor's filled/text pair. */
.nx-btn {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 9px 16px;
    border-radius: var(--nx-r-xs);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.nx-btn.is-primary { background: var(--nx-accent); color: #fff; }
.nx-btn.is-primary:hover { background: var(--nx-700); }

.nx-btn.is-ghost { background: transparent; color: var(--nx-ink-2); }
.nx-btn.is-ghost:hover { background: var(--nx-surface-3); color: var(--nx-ink); }

.nx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-soft); }

/* Nav foot: the status dot and its two lines sit on one row, the label above the caption. */
.nx-nav-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.35;
}

.nx-nav-foot > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.nx-nav-foot strong { font-weight: 550; color: var(--nx-nav-text, #E6E6EA); }
.nx-nav-foot span { display: block; color: var(--nx-nav-text-dim); }

/* ── Project → Time Logs ──────────────────────────────────────────────────────── */
.tl-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.tl-head-main h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.5rem; }

.tl-week-nav { display: flex; align-items: center; gap: 0.375rem; }

.tl-nav-btn {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
    color: var(--nx-ink-2);
    background: var(--nx-plane);
    border: 1px solid var(--nx-ring-strong);
    border-radius: var(--nx-r-xs);
    cursor: pointer;
}

.tl-nav-btn:hover { background: var(--nx-surface-3); color: var(--nx-ink); }

.tl-week-label { font-size: 0.8125rem; font-weight: 500; color: var(--nx-ink); min-width: 13.5rem; text-align: center; }

.tl-today {
    font-size: 0.75rem; color: var(--nx-accent);
    background: none; border: 0; cursor: pointer; padding: 0 0.25rem;
}

.tl-today:hover { text-decoration: underline; }

.tl-head-side { display: flex; align-items: center; gap: 1.25rem; }
.tl-total { display: flex; align-items: baseline; gap: 0.3rem; }
.tl-total-num { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.tl-total-cap { font-size: 0.75rem; color: var(--nx-muted); }

.tl-split { display: flex; flex-direction: column; font-size: 0.75rem; color: var(--nx-ink-2); line-height: 1.5; }
.tl-split strong { font-weight: 600; color: var(--nx-ink); }

/* one block per day */
.tl-day { margin-bottom: 1.125rem; }

.tl-day-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 0 0.125rem 0.375rem;
    border-bottom: 1px solid var(--nx-ring);
    margin-bottom: 0.25rem;
}

.tl-day-date { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: var(--nx-ink-2); }
.tl-day-hours { font-size: 0.75rem; font-weight: 600; color: var(--nx-ink); }

.tl-table { width: 100%; border-collapse: collapse; }
.tl-table td { padding: 0.4375rem 0.625rem; font-size: 0.8125rem; border-bottom: 1px solid var(--nx-ring); vertical-align: middle; }
.tl-table tr:last-child td { border-bottom: 0; }
.tl-table tr:hover td { background: var(--nx-surface-2); }

.tl-who     { width: 13rem; font-weight: 500; }
.tl-against { width: 20rem; color: var(--nx-ink-2); }
.tl-notes   { color: var(--nx-muted); }
.tl-bill    { width: 8.5rem; }
.tl-appr    { width: 7.5rem; color: var(--nx-ink-2); white-space: nowrap; }
.tl-hours   { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tl-act     { width: 7rem; }

.tl-bill .nx-pill {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 500;
}

.nx-pill.is-bill    { background: var(--nx-accent-soft); color: var(--nx-700); }
.nx-pill.is-nonbill { background: var(--nx-surface-3);   color: var(--nx-muted); }

.tl-appr .nx-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    margin-right: 0.4375rem; vertical-align: middle;
}

.nx-dot.is-ok   { background: #12B76A; }
.nx-dot.is-bad  { background: #F04438; }
.nx-dot.is-wait { background: #B0B0BA; }

/* ═══ Task list: the working surface ═══════════════════════════════════════
   Denser rows, a real header, subtasks indented under their parent, and every
   visible cell editable where it sits. Built to be stared at for hours. */

.tb-tools {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--nx-ring);
}

.tb-tool {
    display: inline-flex; align-items: center; gap: 5px;
    font: inherit; font-size: 12.5px;
    color: var(--nx-ink-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--nx-r-xs);
    padding: 4px 8px;
    cursor: pointer;
}

.tb-tool:hover { background: var(--nx-surface-3); color: var(--nx-ink); }

.tb-colpick { position: relative; }
.tb-colscrim { position: fixed; inset: 0; z-index: 40; }

.tb-colmenu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 41;
    min-width: 190px; padding: 6px;
    background: var(--nx-surface, #fff);
    border: 1px solid var(--nx-ring-strong);
    border-radius: var(--nx-r);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.25);
}

.tb-colrow {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: var(--nx-r-xs);
    font-size: 13px; cursor: pointer;
}

.tb-colrow:hover { background: var(--nx-surface-3); }

/* ── the grid itself ─────────────────────────────────────────────────── */
.tb-list.is-dense thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--nx-surface-2);
    font-size: 11.5px; font-weight: 600;
    color: var(--nx-ink-2);
    letter-spacing: 0.005em;
    padding: 7px 10px;
    border-bottom: 1px solid var(--nx-ring-strong);
    white-space: nowrap;
    text-align: left;
}

.tb-list.is-dense td {
    padding: 5px 10px;
    font-size: 13px;
    border-bottom: 1px solid var(--nx-line-soft, var(--nx-ring));
    vertical-align: middle;
}

.tb-list.is-dense .tb-row { height: 34px; }
.tb-list.is-dense .tb-row:hover td { background: var(--nx-surface-2); }
.tb-list.is-dense .tb-row.is-current td { background: var(--nx-accent-soft); }

.tb-row.is-child td { background: color-mix(in srgb, var(--nx-surface-3) 45%, transparent); }
.tb-row.is-child:hover td { background: var(--nx-surface-3); }

.w-num   { width: 82px; text-align: right; font-variant-numeric: tabular-nums; }
.w-files { width: 58px; text-align: center; }

/* ── the name cell: twisty, title, subtask count ─────────────────────── */
/* One line per task, like All tasks: a long name is cut with "…" (the full name shows on hover and in the task),
   so every row keeps the same height. The column keeps a sensible width; the table scrolls sideways if it must. */
.tb-name-cell { min-width: 260px; max-width: 520px; }
.tb-name-cell .nx-tagline { flex-wrap: nowrap; overflow: hidden; }

.tb-title { display: flex; align-items: center; gap: 6px; min-width: 0; }

.tb-twisty {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; padding: 0;
    color: var(--nx-muted); cursor: pointer;
    border-radius: 4px;
}

.tb-twisty:hover { background: var(--nx-surface-3); color: var(--nx-ink); }
.tb-twisty.is-leaf { cursor: default; }
.tb-twisty.is-leaf::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--nx-ring-strong); }

.tb-name { cursor: text; border-radius: 3px; padding: 1px 3px; margin-left: -3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-name:hover { background: var(--nx-accent-soft); }
.tb-name.is-done { text-decoration: line-through; color: var(--nx-muted); }

.tb-subcount {
    flex: 0 0 auto;
    font-size: 10.5px; font-weight: 600;
    color: var(--nx-ink-2);
    background: var(--nx-surface-3);
    border-radius: 99px;
    padding: 0 6px; line-height: 16px;
}

/* ── editable cells ──────────────────────────────────────────────────── */
.nx-edit { cursor: pointer; }
.nx-edit > span, .nx-edit > div { border-radius: 4px; }
.nx-edit:hover { box-shadow: inset 0 0 0 1px var(--nx-ring-strong); }

.tb-inline {
    font: inherit; font-size: 13px;
    width: 100%; min-width: 0;
    color: var(--nx-ink);
    background: var(--nx-plane);
    border: 1px solid var(--nx-accent);
    border-radius: var(--nx-r-xs);
    padding: 3px 6px;
    box-shadow: 0 0 0 3px var(--nx-accent-soft);
}

.tb-inline-title { font-weight: 500; }

/* ── completion, attachments ─────────────────────────────────────────── */
.tb-pct { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; width: 100%; }

.tb-pct-bar {
    flex: 1 1 auto; min-width: 26px; max-width: 48px;
    height: 4px; border-radius: 99px;
    background: var(--nx-surface-3);
    overflow: hidden;
}

.tb-pct-bar > span { display: block; height: 100%; background: var(--nx-accent); border-radius: 99px; }
.tb-pct-num { font-size: 12px; color: var(--nx-ink-2); min-width: 32px; text-align: right; }

.tb-files {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 12px; color: var(--nx-ink-2);
    font-variant-numeric: tabular-nums;
}

/* ── group bar and the empty case ────────────────────────────────────── */
.tb-list.is-dense .tb-group td {
    background: var(--nx-surface-3);
    padding: 6px 10px;
    border-bottom: 1px solid var(--nx-ring-strong);
}

.tb-none td {
    color: var(--nx-muted);
    font-size: 12.5px;
    font-style: italic;
    padding: 10px 14px 10px 34px;
}

/* --- Kanban: status-driven columns -------------------------------------------------
   Each column carries its status colour as --col: a thin top edge and the drop highlight.
   Dropped cards "pop" into place so the move reads as a move, not a page redraw. */
.tb-kanban .kanban-column {
    border-top: 3px solid var(--col, #64748B);
    transition: background-color .15s ease, box-shadow .15s ease, outline-color .15s ease;
    outline: 2px dashed transparent; outline-offset: -4px;
    max-width: 320px;
}
.tb-kanban .kanban-column.is-over {
    background: color-mix(in srgb, var(--col, #6366F1) 9%, var(--nx-surface-2));
    outline-color: color-mix(in srgb, var(--col, #6366F1) 55%, transparent);
}
.tb-kanban .kanban-column.is-hidden-status { opacity: .85; border-top-style: dashed; }
.kanban-hidden-note { font-size: .6875rem; color: var(--nx-muted); margin: -4px 2px 8px; }
.kanban-head-name { cursor: default; }
.kanban-rename {
    width: 100%; font: inherit; font-size: .8125rem; padding: 5px 8px;
    border: 1px solid var(--nx-accent); border-radius: var(--nx-r-xs); background: var(--nx-surface, #fff);
    box-shadow: 0 0 0 3px var(--nx-accent-soft); outline: none;
}
.kanban-card { border-left: 3px solid var(--col, #B6BCD0) !important; }
.kanban-card.is-dragging { opacity: .35; transform: scale(.98); }
.kanban-card.just-dropped { animation: kanban-pop .55s cubic-bezier(.2,.9,.3,1.25); }
@keyframes kanban-pop {
    0%   { transform: scale(.92) translateY(-6px); box-shadow: 0 10px 24px rgba(20,22,56,.18); }
    60%  { transform: scale(1.02); }
    100% { transform: none; box-shadow: none; }
}
.kanban-title-input {
    width: 100%; font: inherit; font-size: .8438rem; font-weight: 560; margin: 2px 0 6px; padding: 3px 6px;
    border: 1px solid var(--nx-accent); border-radius: var(--nx-r-xs); outline: none;
}
.kanban-owner { border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.kanban-owner:hover .nx-avatar { box-shadow: 0 0 0 2px var(--nx-accent-soft); }
.nx-avatar.is-empty { background: var(--nx-surface-3); color: var(--nx-muted); display: inline-flex; align-items: center; justify-content: center; }
.kanban-owner-select { max-width: 150px; font-size: .75rem; }
.kanban-add-column { min-width: 240px; flex: 0 0 240px; display: flex; flex-direction: column; gap: .5rem; }
.kanban-add-btn {
    display: flex; align-items: center; justify-content: center; gap: .375rem; width: 100%;
    padding: .75rem; border: 1.5px dashed var(--nx-ring-strong); border-radius: var(--nx-r);
    background: transparent; color: var(--nx-ink-2); font: inherit; font-size: .8125rem; font-weight: 560; cursor: pointer;
}
.kanban-add-btn:hover { border-color: var(--nx-accent); color: var(--nx-accent); background: var(--nx-accent-soft); }
.kanban-manage { font-size: .75rem; color: var(--nx-muted); text-align: center; }
.kanban-manage:hover { color: var(--nx-accent); }
.kanban-add-form {
    display: flex; flex-direction: column; gap: .5rem; padding: .75rem;
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r);
}
.kanban-add-label { font-size: .6875rem; font-weight: 600; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .04em; }
.kanban-add-actions { display: flex; gap: .375rem; }
.kanban-add-hint { font-size: .6875rem; color: var(--nx-muted); line-height: 1.4; }

/* Board lanes and card limits (#479). Lanes are rows of the same columns; the whole set scrolls sideways together. */
.kb-lanes { overflow-x: auto; padding-bottom: .5rem; }
.kb-lanes .tb-kanban { overflow: visible; min-width: max-content; padding-bottom: 0; }
.kb-lane { margin-bottom: .875rem; min-width: max-content; }
.kb-lane-head { display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: var(--nx-ink); font: inherit; font-weight: 650; font-size: .875rem; padding: .375rem .25rem; margin-bottom: .375rem; cursor: pointer; border-radius: var(--nx-r-xs); position: sticky; left: 0; }
.kb-lane-head:hover { background: var(--nx-surface-3); }
.kb-lane-head:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.kb-lane-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.kb-lane-name { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-lane .kanban-column { min-height: 72px; }
.tb-lanes-pick { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--nx-ink-2); }
.tb-kanban .kanban-column.is-over-limit { border-top-color: var(--nx-warning); background: color-mix(in srgb, var(--nx-warning) 8%, var(--nx-surface-3)); }
.kanban-column.is-over-limit .kanban-limit { color: color-mix(in srgb, var(--nx-warning) 55%, var(--nx-ink)); font-weight: 750; }
.kanban-head { gap: .375rem; }
.kanban-head > .kanban-head-name { flex: 1 1 auto; min-width: 0; }
.kanban-limit { white-space: nowrap; direction: ltr /*rtl:ignore*/; unicode-bidi: isolate; }
.kanban-limit-btn { opacity: 0; transition: opacity .12s ease; }
.kanban-head:hover .kanban-limit-btn, .kanban-limit-btn:focus-visible { opacity: 1; }
@media (hover: none) { .kanban-limit-btn { opacity: 1; } }
.kanban-limit-form { display: flex; flex-direction: column; gap: .375rem; margin: 0 0 .625rem; padding: .5rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); }
.kanban-limit-form label { font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); }
.nx-status-custom { border: 1px solid; }

/* Task status band: tinted with the status's own colour. */
.task-status-band[style*="--band"] {
    background: color-mix(in srgb, var(--band) 8%, var(--nx-surface));
    border-color: color-mix(in srgb, var(--band) 30%, var(--nx-ring));
}
.task-band-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--band, #64748B); flex: 0 0 auto; }
.task-status-native {
    font: inherit; font-size: .9375rem; font-weight: 560; color: var(--nx-ink);
    border: none; background: transparent; padding: 4px 22px 4px 2px; cursor: pointer; min-width: 160px;
}
.task-status-native:focus { outline: 2px solid var(--nx-accent-soft); border-radius: 6px; }

/* =============================================================================
   Settings
   ============================================================================= */
.set-crumbs { font-size: .75rem; color: var(--nx-muted); margin-bottom: .5rem; }
.set-crumbs a { color: var(--nx-ink-2); }
.set-crumbs a:hover { color: var(--nx-accent); }
.set-crumbs span { margin: 0 .25rem; opacity: .6; }
.set-section { margin-bottom: 1.5rem; }
.set-section-title { font-size: .6875rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-muted); margin: 0 0 .625rem 2px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .75rem; }
.set-card {
    display: flex; align-items: flex-start; gap: .875rem; padding: 1rem 1.125rem;
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r);
    color: inherit; text-decoration: none; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.set-card:hover { border-color: var(--nx-accent); box-shadow: var(--nx-sh-2); transform: translateY(-1px); }
.set-card-icon {
    width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--nx-accent-soft); color: var(--nx-accent);
}
.set-card-body { flex: 1 1 auto; min-width: 0; }
.set-card-name { font-weight: 620; font-size: .9063rem; }
.set-card-desc { font-size: .7813rem; color: var(--nx-ink-2); margin-top: 2px; line-height: 1.45; }
.set-card-meta { font-size: .7188rem; color: var(--nx-muted); margin-top: .5rem; }
.set-card-go { color: var(--nx-muted); align-self: center; }
.set-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.set-table th {
    text-align: left; font-size: .6875rem; font-weight: 620; letter-spacing: .04em; text-transform: uppercase;
    color: var(--nx-muted); padding: .625rem .875rem; border-bottom: 1px solid var(--nx-ring); background: var(--nx-surface-2);
}
.set-table td { padding: .5rem .875rem; border-bottom: 1px solid var(--nx-ring); vertical-align: middle; }
/* Number columns: the heading sits over its right-aligned figures (the plain th rule above would pull it left). */
.set-table th.bg-r, .set-table td.bg-r { text-align: right; }
.set-table tr:last-child td { border-bottom: none; }
.set-table tr:hover td { background: var(--nx-surface-2); }
.set-table tr.is-retired td { opacity: .6; }
.set-table .w-order { width: 76px; white-space: nowrap; }
.set-table .w-num { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.set-table .w-act { width: 70px; text-align: right; }
.set-move { border: 1px solid var(--nx-ring); background: var(--nx-surface); border-radius: 6px; width: 26px; height: 24px; padding: 0; cursor: pointer; color: var(--nx-ink-2); display: inline-flex; align-items: center; justify-content: center; }
.set-move:hover:not(:disabled) { border-color: var(--nx-accent); color: var(--nx-accent); }
.set-move:disabled { opacity: .3; cursor: default; }
.set-row-link { text-decoration: none; }
.set-edit { font-size: .75rem; font-weight: 560; }
.set-badge { font-size: .625rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); border: 1px solid var(--nx-ring); border-radius: 4px; padding: 1px 5px; margin-left: .375rem; }
.set-badge.is-default { color: var(--nx-accent); border-color: rgba(99,102,241,.35); }
.set-cat { font-size: .7188rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.set-cat.cat-open { background: rgba(100,116,139,.12); color: #475569; }
.set-cat.cat-inprogress { background: rgba(14,165,233,.12); color: #0369A1; }
.set-cat.cat-inreview { background: rgba(139,92,246,.12); color: #6D28D9; }
.set-cat.cat-closed { background: rgba(22,163,74,.12); color: #15803D; }
.set-foot { padding: .75rem .875rem; font-size: .75rem; color: var(--nx-muted); border-top: 1px solid var(--nx-ring); background: var(--nx-surface-2); }
.set-form { padding: 1.25rem 1.375rem; max-width: 760px; margin-bottom: 1rem; }
.set-field { margin-bottom: 1.125rem; }
.set-field > label { display: block; font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); margin-bottom: .375rem; }
.set-input { width: 100%; max-width: 420px; font: inherit; font-size: .875rem; padding: .5rem .625rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: var(--nx-surface, #fff); }
.set-input:focus { outline: none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.set-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; }
.set-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--nx-ring); cursor: pointer; padding: 0; }
.set-swatch.is-on { box-shadow: 0 0 0 2px var(--nx-ink); }
.set-color { width: 32px; height: 28px; border: 1px solid var(--nx-ring); border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.set-preview { margin-left: .75rem; }
.set-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .5rem; }
.set-cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; text-align: left; padding: .625rem .75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface); cursor: pointer; font: inherit; }
.set-cat-card:hover { border-color: var(--nx-ring-strong); }
.set-cat-card.is-on { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.set-cat-desc { font-size: .7188rem; color: var(--nx-ink-2); line-height: 1.4; }
.set-warn { margin-top: .5rem; font-size: .75rem; color: #8A5A00; background: rgba(250,178,25,.12); border: 1px solid rgba(250,178,25,.3); padding: .375rem .625rem; border-radius: 6px; }
.set-checks { display: flex; flex-direction: column; gap: .5rem; }
.set-actions { display: flex; justify-content: flex-end; gap: .5rem; border-top: 1px solid var(--nx-ring); padding-top: 1rem; margin-top: .5rem; }
.set-danger { border-color: rgba(208,59,59,.28); }
.set-danger-title { font-weight: 620; color: #A32222; margin-bottom: .625rem; font-size: .875rem; }
.set-danger-note { font-size: .8125rem; color: var(--nx-ink-2); margin: 0 0 .75rem; }

/* Timeline drag: the bar lifts while it's moving and shows its new dates above it. */
.gantt-bar[data-id] { cursor: grab; touch-action: none; user-select: none; }
.gantt-bar.is-dragging { cursor: grabbing; box-shadow: 0 6px 16px rgba(20,22,56,.22); z-index: 5; transition: none; outline: 2px solid var(--nx-accent); }
.gantt-bar.is-saving { opacity: .6; }
.gantt-bar[data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--nx-ink); color: #fff; font-size: .6875rem; font-weight: 600; white-space: nowrap;
    padding: 3px 7px; border-radius: 5px; pointer-events: none;
}
.gantt-bar.is-dragging { overflow: visible; }

/* Schedule drag-and-drop: the target under the pointer lights up; the source dims. */
.cal-day.is-over, .load-cell.is-over {
    background: color-mix(in srgb, var(--nx-accent) 10%, var(--nx-surface)) !important;
    box-shadow: inset 0 0 0 2px var(--nx-accent);
}
.load-cell.can-drop { transition: background-color .12s ease; }
.load-item[draggable="true"] { cursor: grab; }
.load-item.is-dragging, .cal-chip.is-dragging { opacity: .35; }
button.cal-more { border: none; background: none; padding: 0 2px; font: inherit; font-size: .6563rem; color: var(--nx-accent); cursor: pointer; font-weight: 600; }
button.cal-more:hover { text-decoration: underline; }

/* =============================================================================
   Global search (top bar)
   ============================================================================= */
.gs { position: relative; margin-right: 1rem; }
.gs-box {
    width: min(380px, 32vw); height: 40px; display: flex; align-items: center; gap: .55rem;
    padding: 0 .55rem 0 .8rem; border: 1px solid var(--nx-ring); border-radius: 12px;
    background: var(--nx-surface-3); color: var(--nx-muted); transition: border-color .12s, box-shadow .12s, background .12s;
}
.gs-box:focus-within { background: var(--nx-surface, #fff); border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.gs-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: .8125rem; color: var(--nx-ink); }
.gs-input::placeholder { color: var(--nx-muted); }
.gs-box kbd { padding: 2px 7px; border: 1px solid var(--nx-ring); border-radius: 6px; background: var(--nx-surface, #fff); color: #667085; font: 600 .68rem var(--nx-font); }
.gs-pop {
    position: absolute; top: calc(100% + 6px); right: 0; width: min(520px, 90vw); max-height: 70vh; overflow-y: auto; z-index: 1400;
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 12px; box-shadow: 0 16px 40px rgba(16,19,48,.16); padding: .375rem;
}
.gs-group { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--nx-muted); padding: .5rem .625rem .25rem; }
.gs-group-all { font-size: .6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--nx-accent); text-decoration: none; }
.gs-group-all:hover { text-decoration: underline; }
.gs-hit-snip { font-size: .7188rem; color: var(--nx-ink-2, var(--nx-muted)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-top: 1px; }
/* a word that matched the search (top-bar search, results page) */
.nx-mark { background: #FDE68A; color: inherit; border-radius: 3px; padding: 0 1px; }
html[data-theme="dark"] .nx-mark { background: rgba(250, 204, 21, .32); color: #FFF7D6; }
.gs-hit { display: flex; gap: .625rem; align-items: flex-start; padding: .45rem .625rem; border-radius: 8px; color: var(--nx-ink); text-decoration: none; }
.gs-hit:hover, .gs-hit.is-active { background: var(--nx-accent-soft); }
.gs-hit-icon { color: var(--nx-muted); margin-top: 1px; }
.gs-hit-body { display: flex; flex-direction: column; min-width: 0; }
.gs-hit-title { font-size: .8125rem; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-hit-sub { font-size: .7188rem; color: var(--nx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-code { font-family: var(--nx-mono); font-size: .6875rem; color: var(--nx-accent); margin-inline-end: .375rem; }
.gs-empty { padding: .875rem; font-size: .8125rem; color: var(--nx-muted); }
.gs-all { display: flex; justify-content: space-between; margin-top: .25rem; padding: .55rem .625rem; border-top: 1px solid var(--nx-ring); font-size: .75rem; font-weight: 600; color: var(--nx-accent); text-decoration: none; }
.sr-group { padding: .375rem 0; margin-bottom: 1rem; }
.sr-head { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; font-weight: 620; font-size: .8125rem; border-bottom: 1px solid var(--nx-ring); }
.sr-head span { margin-left: auto; color: var(--nx-muted); font-weight: 500; }
.sr-hit { display: flex; flex-direction: column; padding: .55rem 1rem; text-decoration: none; color: var(--nx-ink); border-bottom: 1px solid var(--nx-ring); }
.sr-hit:last-child { border-bottom: none; }
.sr-hit:hover { background: var(--nx-surface-2); }
.sr-title { font-size: .8438rem; font-weight: 560; }
.sr-sub { font-size: .75rem; color: var(--nx-muted); }
.sr-snip { font-size: .78rem; color: var(--nx-ink-2, var(--nx-muted)); margin-top: 2px; overflow-wrap: anywhere; }
.sr-head .sr-all { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--nx-accent); text-decoration: none; }
.sr-head .sr-all + span { margin-left: .5rem; }
.sr-head .sr-all:hover { text-decoration: underline; }
.sr-hint { display: flex; align-items: center; gap: .375rem; font-size: .78rem; color: var(--nx-muted); margin: -.25rem 0 .75rem; }
.sr-back { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; color: var(--nx-accent); text-decoration: none; margin-bottom: .75rem; }

/* =============================================================================
   Notifications
   ============================================================================= */
.nb { position: relative; margin-right: .75rem; outline: none; }
.nb-btn { position: relative; width: 40px; height: 40px; border: none; background: transparent; border-radius: 11px; color: #667085; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nb-btn:hover { background: var(--nx-surface-3); }
.nb-count {
    position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: #E5484D; color: #fff; font-size: .625rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--nx-surface);
}
.nb-pop {
    position: absolute; top: calc(100% + 6px); right: 0; width: min(420px, 92vw); z-index: 1400;
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 12px; box-shadow: 0 16px 40px rgba(16,19,48,.16);
}
.nb-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--nx-ring); font-weight: 620; font-size: .875rem; }
.nb-head a, .nb-link { font-size: .75rem; font-weight: 600; }
.nb-head-links { display: flex; align-items: center; gap: .75rem; }
/* The bell's filters (#notifications): All, Unread and Mentions, as small tabs under the heading */
.nb-filters { display: flex; gap: .25rem; padding: .5rem 1rem; border-bottom: 1px solid var(--nx-ring); }
.nb-filter { border: 0; background: transparent; padding: .25rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--nx-muted); cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.nb-filter:hover { background: var(--nx-surface-2, #F2F4F7); }
.nb-filter.active { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.nb-filter:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.nb-filter-n { font-size: .65rem; padding: 0 .375rem; border-radius: 999px; background: var(--mud-palette-error); color: #fff; }
.nb-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--nx-brand, #4f46e5); }
.nb-link:hover { text-decoration: underline; }
.nb-page-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.nb-list { max-height: 62vh; overflow-y: auto; }
.nb-empty { padding: 1.25rem 1rem; font-size: .8125rem; color: var(--nx-muted); }
.nb-page { padding: 0; }
.nb-more { display: flex; justify-content: center; padding: .5rem; }
.nr { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border-bottom: 1px solid var(--nx-ring); color: var(--nx-ink); text-decoration: none; position: relative; }
.nr:last-child { border-bottom: none; }
.nr:hover { background: var(--nx-surface-2); }
.nr.is-unread { background: color-mix(in srgb, var(--nx-accent) 5%, var(--nx-surface)); }
.nr-icon { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--nx-surface-3); color: var(--nx-ink-2); }
.nr-taskassigned { background: rgba(99,102,241,.12); color: #4F46E5; }
.nr-taskclosed { background: rgba(22,163,74,.12); color: #15803D; }
.nr-taskreopened, .nr-duedatechanged { background: rgba(245,158,11,.14); color: #B45309; }
.nr-commentadded { background: rgba(14,165,233,.12); color: #0369A1; }
.nr-taskdeleted, .nr-taskunassigned { background: rgba(229,72,77,.10); color: #B42318; }
.nr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.nr-text { font-size: .8125rem; line-height: 1.4; }
.nr-task { font-size: .78rem; font-weight: 600; color: var(--nx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-meta { font-size: .6875rem; color: var(--nx-muted); }
.nr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-accent); flex: 0 0 auto; margin-top: 6px; }

/* Teams */
.team-name { font-weight: 620; color: var(--nx-ink); }
.team-desc { font-size: .75rem; color: var(--nx-muted); }
.team-faces { display: flex; }
.team-faces .nx-avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--nx-surface); }
.team-more { margin-left: 12px; font-size: .75rem; color: var(--nx-muted); align-self: center; }
.team-count { font-weight: 500; color: var(--nx-muted); margin-left: .375rem; }
.team-filter { margin-bottom: .5rem; }
.team-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .375rem; max-height: 420px; overflow-y: auto; }
.team-pick { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--nx-ring); border-radius: 8px; cursor: pointer; font-size: .8125rem; }
.team-pick.is-on { border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.team-pick-name { display: flex; flex-direction: column; min-width: 0; }
.team-pick-name small { color: var(--nx-muted); font-size: .6875rem; overflow: hidden; text-overflow: ellipsis; }

/* Profile */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; align-items: start; }
.pf-title { font-weight: 640; font-size: .9375rem; margin-bottom: 1rem; }
.pf-static { font-size: .875rem; color: var(--nx-ink); padding: .25rem 0; }
.pf-hint { font-size: .7188rem; color: var(--nx-muted); margin-top: .25rem; }
.pf-btn { font: inherit; font-size: .8125rem; font-weight: 600; color: #fff; background: var(--nx-accent); border: none; border-radius: 8px; padding: .55rem 1rem; cursor: pointer; }
.pf-btn:hover { filter: brightness(1.06); }
.pf-link-btn { display: inline-block; text-decoration: none; }
.pf-single { grid-template-columns: minmax(min(340px, 100%), 520px); }
.pf-cancel { font-size: .8125rem; font-weight: 600; color: var(--nx-muted); text-decoration: none; padding: .55rem 1rem; }
.pf-cancel:hover { color: var(--nx-ink, #17153b); }
.pf-msg { margin-bottom: 1rem; padding: .625rem .875rem; border-radius: 8px; font-size: .8125rem; background: rgba(22,163,74,.10); color: #15803D; border: 1px solid rgba(22,163,74,.25); }
.pf-msg.is-error { background: rgba(229,72,77,.08); color: #B42318; border-color: rgba(229,72,77,.25); }
.pw-code { font-family: var(--nx-mono); font-size: .875rem; background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 4px; }
.set-form .validation-message { color: #B42318; font-size: .7188rem; margin-top: .25rem; }


/* ---- Side menu toggle (driven by js/nx-gantt.js) ---------------------------------------- */
.nx-menu-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: -8px; margin-right: 6px;
    border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer;
}
.nx-menu-button:hover { background: rgba(23, 21, 59, .07); }
.nx-menu-button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

@media (min-width: 960px) {
    html.nx-nav-collapsed .nx-drawer { display: none !important; }
    html.nx-nav-collapsed .mud-layout .mud-appbar { margin-left: 0 !important; width: 100% !important; }
    html.nx-nav-collapsed .mud-layout .mud-main-content { margin-left: 0 !important; }
}
.nx-nav-backdrop { display: none; }
@media (max-width: 959px) {
    /* Needs to out-rank MudBlazor's own "hide on small screens" rule, hence the long selector. */
    html.nx-nav-open .mud-drawer.mud-drawer-responsive.mud-drawer-md.mud-drawer--initial.nx-drawer {
        display: flex !important; visibility: visible !important;
        width: 252px !important; left: 0 !important; transform: none !important;
        z-index: calc(var(--mud-zindex-appbar) + 3) !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }
    html.nx-nav-open .nx-nav-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(15, 14, 40, .45);
        z-index: calc(var(--mud-zindex-appbar) + 2);
    }
}

/* ---- User menu (plain <details>, no live connection needed) ----------------------------- */
.nx-user-menu { position: relative; }
.nx-user-menu > summary { list-style: none; cursor: pointer; border-radius: 12px; padding: 4px 6px; }
.nx-user-menu > summary::-webkit-details-marker { display: none; }
.nx-user-menu > summary:hover, .nx-user-menu[open] > summary { background: rgba(23, 21, 59, .06); }
.nx-user-caret { font-size: 1.2rem !important; opacity: .6; }
.nx-user-pop {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; z-index: 1400;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary);
    border: 1px solid rgba(23, 21, 59, .1); border-radius: 12px; padding: 6px;
    box-shadow: 0 12px 32px rgba(23, 21, 59, .16);
}
.nx-user-pop-id { display: flex; gap: 10px; align-items: center; padding: 8px 10px; font-size: .82rem; opacity: .65; word-break: break-all; }
.nx-user-pop-item {
    display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px;
    border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: .9rem;
    text-decoration: none; cursor: pointer; text-align: left;
}
.nx-user-pop-item:hover { background: rgba(23, 21, 59, .06); }
.nx-user-pop-item .mud-icon-root, .nx-user-pop-id .mud-icon-root { font-size: 1.15rem; }
.nx-user-pop-sep { height: 1px; margin: 4px 6px; background: rgba(23, 21, 59, .08); }
.nx-user-pop form { margin: 0; }
@media (max-width: 600px) { .nx-user-name { display: none; } }
/* The menu never runs off the screen: it is never wider than the window, and on phones it opens as a panel under the top bar,
   inside the screen edges, scrolling if it is taller than the screen. */
.nx-user-pop { max-width: calc(100vw - 16px); max-height: calc(100dvh - var(--mud-appbar-height, 64px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 600px) {
    /* Drop-downs from the top bar (profile, notifications, search results) sit inside the screen on a phone, under the bar, never off its edge. */
    .nx-user-pop, .nb-pop, .gs-pop {
        position: fixed; left: 8px; right: 8px; top: calc(var(--mud-appbar-height, 64px) - 4px); width: auto;
        min-width: 0; max-width: none; max-height: calc(100dvh - var(--mud-appbar-height, 64px) - 12px);
        overflow-y: auto; overscroll-behavior: contain;
    }
    .nb-pop .nb-list { max-height: none; }
}


/* ---- Completion as a typed number --------------------------------------------------------- */
.task-pct .task-pct-input {
    width: 62px; flex: 0 0 auto; padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums;
    border: 1px solid rgba(23, 21, 59, .18) !important; border-radius: 6px; background: var(--mud-palette-surface, #fff);
}
.task-pct .task-pct-input:hover { border-color: rgba(23, 21, 59, .35) !important; }
.task-pct .task-pct-input:focus { border-color: var(--nx-accent, #5b5bd6) !important; outline: 2px solid rgba(91, 91, 214, .2); outline-offset: 0; }
.task-pct .task-pct-unit { font-size: 0.85rem; font-weight: 600; color: var(--nx-ink-3, #6b6f8a); margin-left: -2px; }
.task-pct-bar { flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 99px; background: rgba(23, 21, 59, .08); overflow: hidden; }
.task-pct-bar > div { height: 100%; border-radius: 99px; background: var(--nx-accent, #5b5bd6); transition: width .25s ease; }

/* ---- @-mentions -------------------------------------------------------------------------- */
.mention-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.mention-wrap textarea { flex: 1 1 auto; width: 100%; }
.mention-list {
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 1500; width: min(340px, 100%);
    max-height: 290px; overflow-y: auto; padding: 4px;
    background: var(--mud-palette-surface, #fff); border: 1px solid rgba(23, 21, 59, .12);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 21, 59, .18);
}
.mention-option {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
    border: 0; border-radius: 7px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mention-option.is-active { background: rgba(91, 91, 214, .12); }
/* The list that opens while typing @ in a text box (KM-12): placed at the cursor. */
.mention-list.nx-mention-pop { position: fixed; top: 0; left: 0; }
.nx-mention-pop .mention-option { justify-content: flex-start; text-align: start; }
.mention-option .nx-avatar { width: 24px; height: 24px; font-size: .62rem; flex: 0 0 auto; }
.mention-name { font-size: .86rem; font-weight: 600; white-space: nowrap; }
.mention-email { font-size: .74rem; opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.comment-body .mention { color: var(--nx-accent, #4f46e5); background: rgba(91, 91, 214, .1); border-radius: 4px; padding: 0 3px; font-weight: 600; }


/* ---- Real save-health indicator --------------------------------------------------------- */
.nx-nav-foot.is-bad .nx-nav-foot-dot { background: #F04438; box-shadow: 0 0 0 4px #FEE4E2; }
.nx-nav-foot.is-bad strong { color: #FDA29B; }
.nx-health-banner {
    margin: 16px 24px 0; padding: 12px 16px; border-radius: 10px;
    background: #FEF3F2; color: #912018; border: 1px solid #FECDCA; font-size: .875rem; line-height: 1.45;
}
/* A warning that is not yet a problem (storage nearly full): amber rather than red. */
.nx-health-banner.is-soft { background: #FFFAEB; color: #93370D; border-color: #FEDF89; }

/* ---- Read-only task note ---------------------------------------------------------------- */
.task-readonly-note {
    display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; padding: 10px 12px;
    border-radius: 10px; background: var(--nx-soft, #F4F5FA); color: #4B4F6B; font-size: .8125rem; line-height: 1.4;
}
.task-panel :disabled { cursor: not-allowed; }

/* ---- Native date fields in the task panel ------------------------------------------------ */
.task-date-input { width: 100%; min-width: 0; padding: 4px 6px; border: 1px solid transparent !important; border-radius: 6px; font: inherit; color: inherit; background: transparent; }
.task-date-input:hover:not(:disabled) { border-color: rgba(23, 21, 59, .18) !important; }
.task-date-input:focus { border-color: var(--nx-accent, #5b5bd6) !important; outline: 2px solid rgba(91, 91, 214, .2); }
.task-del-confirm { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #912018; }
.task-del-yes, .task-del-no { border: 0; border-radius: 6px; padding: 3px 9px; font: inherit; font-weight: 600; cursor: pointer; }
.task-del-yes { background: #D92D20; color: #fff; }
.task-del-no { background: #F2F4F7; color: #344054; }
.nx-noaccess { max-width: 560px; margin: 48px auto; }
.nx-noaccess p { color: #4B4F6B; line-height: 1.5; }

/* ---- Centred confirmation dialog -------------------------------------------------------- */
.nx-dialog-backdrop {
    position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(16, 19, 48, 0.45); backdrop-filter: blur(2px);
}
.nx-dialog {
    width: 100%; max-width: 440px; padding: 24px; border-radius: 14px;
    background: var(--mud-palette-surface, #fff); box-shadow: 0 24px 64px rgba(16, 19, 48, .28);
}
.tb-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.tb-empty-input { min-width: 280px; max-width: 420px; }


/* ---- Status dots on the Schedule (calendar chips and Employee Workload items) ------------------ */
.nx-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 0 0 2.5px rgba(23,21,59,.12); }
.cal-chip { display: flex; align-items: center; gap: 0; }
.cal-chip .cal-chip-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.load-item-proj { display: flex; align-items: center; }
.nx-status-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 16px; font-size: .75rem; color: #4B4F6B; }
.nx-status-legend-title { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--nx-muted); }
.nx-status-legend-item { display: inline-flex; align-items: center; }
.cal-chip .cal-chip-project { flex: 0 0 auto; white-space: nowrap; margin-left: 4px; }

/* ---- Task bars on the month calendar: one bar from the start day to the due day, split at each week ---- */
.cal-bars {
    position: absolute; top: 32px; left: var(--cal-wk); right: 0; pointer-events: none;
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 22px; row-gap: 2px;
}
.cal-bar {
    pointer-events: auto; display: flex; align-items: center; min-width: 0; margin: 0 3px; padding: 0 6px; cursor: grab;
    background: color-mix(in srgb, var(--bar-c, #64748B) 16%, #fff);
    border: 1px solid color-mix(in srgb, var(--bar-c, #64748B) 38%, #fff); border-left: 3px solid var(--nx-ord-1);
    border-radius: 5px; font-size: 0.6875rem; line-height: 1.25; overflow: hidden;
}
.cal-bar:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
.cal-bar.pri-low    { border-left-color: #B6BCD0; }
.cal-bar.pri-medium { border-left-color: var(--nx-ord-1); }
.cal-bar.pri-high   { border-left-color: var(--nx-serious); }
.cal-bar.pri-urgent { border-left-color: var(--nx-critical); }
.cal-bar.is-late { box-shadow: inset 0 0 0 1px rgba(208,59,59,.45); }
.cal-bar.cont-before { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 1px; border-left-color: color-mix(in srgb, var(--bar-c, #64748B) 38%, #fff); }
.cal-bar.cont-after { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.cal-bar-title { min-width: 2ch; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; color: var(--nx-ink); }
.cal-bar-owners { min-width: 0; flex: 1 1 0; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.625rem; color: var(--nx-ink-2); }
.cal-bar-owners::before { content: "· "; }
.cal-bar-project { flex: 0 0 auto; margin-left: 4px; font-size: 0.625rem; color: var(--nx-muted); font-family: var(--nx-mono); white-space: nowrap; }
.cal-bar.is-dragging { opacity: .35; }
/* While a task is being dragged the bars let the day underneath receive the drop. */
.cal.is-dragging .cal-bar { pointer-events: none; }
.cal-more { align-self: flex-start; margin-top: auto; background: none; border: 0; padding: 0 2px; cursor: pointer; }
.cal-more:hover { color: var(--nx-700); text-decoration: underline; }
.cal-less { position: absolute; right: 8px; bottom: 3px; font-size: 0.6563rem; font-weight: 550; color: var(--nx-muted); background: none; border: 0; cursor: pointer; }
.cal-less:hover { color: var(--nx-700); text-decoration: underline; }

/* ---- Projects page toolbar: one even row (search, three pickers, filter icon) ---------------- */
.pl-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.pl-tool { flex: 0 1 180px; min-width: 150px; }
.pl-tool.pl-search { flex: 1 1 260px; max-width: 360px; }
.pl-tool.pl-wide { flex-basis: 220px; }
.pl-tool .mud-input-control { margin: 0 !important; }
.pl-tool .mud-input.mud-input-outlined { background: var(--nx-surface, #fff); height: 38px; }
.pl-tool .mud-input-slot { padding-top: 0 !important; padding-bottom: 0 !important; height: 38px; line-height: 38px; }
.pl-tool .mud-select .mud-input-slot { display: flex; align-items: center; }
.pl-tool .mud-input-adornment { margin-top: 0 !important; }
.pl-filter-icon { position: relative; height: 38px; width: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--nx-ring); border-radius: 8px; background: var(--nx-surface, #fff); color: var(--nx-muted); cursor: pointer; }
.pl-filter-icon:hover, .pl-filter-icon.is-on { color: var(--nx-accent); border-color: var(--nx-accent); }
.pl-filter-icon .count { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  background: var(--nx-accent); color: #fff; font-size: .625rem; font-weight: 700; line-height: 16px; text-align: center; }
.pl-count { margin-left: auto; font-size: .75rem; color: var(--nx-muted); white-space: nowrap; }
.pl-table { border: 1px solid var(--nx-ring); border-radius: 12px; overflow: hidden; }
.pl-table .mud-table-container { max-height: calc(100vh - 270px); }

/* ---- Project logo --------------------------------------------------------------------- */
.pf-logo-row { display: flex; align-items: center; gap: .875rem; margin-bottom: 1rem; }
.pf-logo-box { width: 64px; height: 64px; border-radius: 12px; border: 1px dashed var(--nx-ring); background: var(--nx-surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--nx-muted); flex: none; }
.pf-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.pf-logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pf-logo-pick { position: relative; overflow: hidden; cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--nx-accent);
  border: 1px solid var(--nx-accent); border-radius: 8px; padding: .35rem .75rem; }
.pf-logo-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pf-logo-remove { font: inherit; font-size: .8125rem; color: var(--nx-muted); background: none; border: none; cursor: pointer; }
.pf-logo-remove:hover { color: #c62828; }
.pf-logo-hint { flex-basis: 100%; font-size: .7188rem; color: var(--nx-muted); }
.pf-logo-error { flex-basis: 100%; font-size: .75rem; color: #c62828; }
.nx-proj-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: var(--nx-surface, #fff); border: 1px solid var(--nx-ring); flex: none; }
.nx-proj-logo-lg { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: var(--nx-surface, #fff); border: 1px solid var(--nx-ring); flex: none; }
.pl-name-cell { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }

/* ---- Full-page forms (New task, CRM records) ------------------------------------------ */
.nf-form { max-width: 980px; }
.nf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); column-gap: 1.25rem; }
.nf-grid .set-input, .nf-full { max-width: none; }
.nf-req { color: #B42318; }
.nf-form textarea.set-input { resize: vertical; min-height: 96px; }

/* ---- Sales (CRM) and Contracts ---------------------------------------------------------- */
.usr-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .875rem 1rem; border-bottom: 1px solid var(--nx-ring); }
.usr-search { flex: 1 1 260px; max-width: 420px; }
.usr-select { flex: 0 1 190px; }
.crm-search { flex: 1 1 240px; max-width: 360px; height: 38px; }
.crm-filter { flex: 0 1 180px; height: 38px; }
.crm-table-wrap { overflow-x: auto; }
.crm-table td, .crm-table th { white-space: nowrap; }
.crm-table td:nth-child(2) { white-space: normal; }
.crm-strong { font-weight: 600; color: var(--nx-ink); }
a.crm-strong:hover { color: var(--nx-accent); }
.crm-late { color: #B42318; font-weight: 600; }
.crm-stage { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; }
.crm-stage i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.crm-pill { display: inline-block; font-size: .6875rem; font-weight: 650; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.crm-pill.is-grey { background: #F1F1F3; color: #555; }
.crm-pill.is-blue { background: #E8EFFF; color: #1D4ED8; }
.crm-pill.is-amber { background: #FEF3C7; color: #92400E; }
.crm-pill.is-green { background: #DCFCE7; color: #166534; }
.crm-pill.is-red { background: #FEE2E2; color: #B42318; }
.crm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin-bottom: .875rem; }
.crm-kpi { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 10px; padding: .5rem .875rem; min-width: 0; }
.crm-kpi span { display: block; font-size: .6875rem; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.crm-kpi strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.crm-detail-grid { display: grid; grid-template-columns: minmax(min(280px, 100%), 380px) 1fr; gap: 1rem; align-items: start; margin-bottom: 1rem; }
@media (max-width: 960px) { .crm-detail-grid { grid-template-columns: 1fr; } }
.crm-info, .crm-section { padding: 1.125rem 1.25rem; margin-bottom: 1rem; }
.crm-section-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.crm-section-head .pf-title { margin-bottom: 0; }
.crm-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--nx-surface-3); color: var(--nx-muted); font-size: .6875rem; font-weight: 650; text-align: center; margin-left: 4px; }
.crm-dl { display: grid; grid-template-columns: 120px 1fr; gap: .45rem .75rem; margin: 0; font-size: .8438rem; }
.crm-dl dt { color: var(--nx-muted); font-weight: 500; }
.crm-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.crm-big { font-size: 1.0625rem; font-weight: 700; }
.crm-pre { white-space: pre-line; }
.crm-notes { white-space: pre-line; font-size: .8438rem; color: var(--nx-ink-2); background: var(--nx-surface-2); border-radius: 8px; padding: .625rem .75rem; margin-top: .75rem; }
.crm-empty { font-size: .8125rem; color: var(--nx-muted); padding: .75rem 0; }
.crm-row-actions { white-space: nowrap; }
.crm-inline-form { background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: 10px; padding: .875rem 1rem .25rem; margin-bottom: .75rem; }
.crm-confirm { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; background: #FEF3F2; border: 1px solid #FECDCA; color: #7A271A; border-radius: 10px; padding: .625rem .875rem; margin-bottom: 1rem; font-size: .8438rem; }
.crm-banner { display: flex; align-items: center; gap: .75rem; border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; }
.crm-banner > div { flex: 1 1 auto; }
.crm-banner.is-won { background: #ECFDF3; border: 1px solid #ABEFC6; color: #054F31; }
.crm-banner.is-lost { background: #FEF3F2; border: 1px solid #FECDCA; color: #7A271A; }
.crm-money-input { display: flex; gap: .375rem; }
.crm-money-input select { flex: 0 0 82px; }
.crm-file-ic { vertical-align: middle; margin-right: 4px; color: var(--nx-muted); }

/* Zoho-style stage path */
.crm-path { display: flex; gap: 3px; margin: 0 0 1rem; overflow-x: auto; padding-bottom: 2px; }
.crm-path-step { flex: 1 1 0; min-width: 110px; border: 0; font: inherit; font-size: .75rem; font-weight: 600; padding: .55rem 1rem .55rem 1.25rem; cursor: pointer;
  background: var(--nx-surface-3); color: var(--nx-ink-2); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
  white-space: normal; line-height: 1.15; min-height: 42px; display: flex; align-items: center; justify-content: center; text-align: center; }
.crm-path-step:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.crm-path-step:hover:not(:disabled) { background: var(--nx-accent-soft); color: var(--nx-accent); }
.crm-path-step.is-done { background: #DDE3FF; color: #3730A3; }
.crm-path-step.is-current { background: var(--stage, var(--nx-accent)); color: #fff; }
.crm-path-step:disabled { cursor: default; }

/* Pipeline (kanban) */
.crm-pipeline { display: flex; gap: .625rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.crm-col { flex: 0 0 240px; background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: 12px; min-height: 240px; }
.crm-col.is-over { border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.crm-col-head { border-top: 3px solid; border-radius: 12px 12px 0 0; padding: .625rem .75rem; background: var(--nx-surface); border-bottom: 1px solid var(--nx-ring); }
.crm-col-name { font-weight: 650; font-size: .8125rem; display: flex; justify-content: space-between; }
.crm-col-name span { color: var(--nx-muted); font-weight: 600; }
.crm-col-sum { font-size: .7188rem; color: var(--nx-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* Tall enough for about ten cards (more in Compact) before a column scrolls; on a tall screen it uses the whole height. */
.crm-col-body { padding: .5rem; display: flex; flex-direction: column; gap: .5rem; max-height: max(calc(100vh - 330px), 1600px); overflow-y: auto; }
.crm-col-empty { font-size: .75rem; color: var(--nx-muted); text-align: center; padding: 1.5rem .5rem; border: 1px dashed var(--nx-ring); border-radius: 8px; }
.crm-card { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 10px; padding: .625rem .75rem; cursor: pointer; box-shadow: var(--nx-sh-1); }
.crm-card:hover { border-color: var(--nx-accent); }
.crm-card[draggable=true] { cursor: grab; }
.crm-card-name { font-weight: 600; font-size: .8125rem; line-height: 1.3; }
.crm-card-co { font-size: .75rem; color: var(--nx-muted); margin-top: 2px; }
.crm-card-foot { display: flex; justify-content: space-between; font-size: .75rem; margin-top: .5rem; }
.crm-card-amt { font-weight: 650; font-variant-numeric: tabular-nums; }
.crm-card-owner { font-size: .6875rem; color: var(--nx-muted); margin-top: .25rem; }

/* Quotation payment terms editor */
.crm-terms { border: 1px solid var(--nx-ring); border-radius: 12px; padding: .875rem 1rem; margin-bottom: 1.125rem; }
.crm-terms-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.crm-terms-head .pf-title { margin: 0; }
.crm-presets { font-size: .75rem; color: var(--nx-muted); display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.crm-presets button { font: inherit; font-size: .75rem; border: 1px solid var(--nx-ring); background: var(--nx-surface); border-radius: 999px; padding: 2px 10px; cursor: pointer; color: var(--nx-ink-2); }
.crm-presets button:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.crm-terms-table td { padding: .375rem .5rem; }
.crm-terms-table .set-input { max-width: none; }
.crm-terms-table .term-amt { text-align: right; }
.crm-add-term { font: inherit; font-size: .8125rem; font-weight: 600; color: var(--nx-accent); background: none; border: none; cursor: pointer; padding: 0; }
.crm-term-total { font-weight: 650; font-variant-numeric: tabular-nums; }
.crm-term-total.is-off { color: #B42318; }
.crm-term-warn { font-size: .75rem; color: #B42318; margin-top: .375rem; }

/* Dialogs placed next to (not inside) their backdrop */
.nx-dialog-backdrop + .nx-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1501;
  width: calc(100% - 32px); max-height: 90vh; overflow-y: auto; }
.nx-dialog h3 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.nx-dialog p { font-size: .8438rem; color: var(--nx-ink-2); }
.crm-sign-dialog { max-width: 640px !important; }
.crm-member-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 1rem; max-height: 200px; overflow-y: auto;
  border: 1px solid var(--nx-ring); border-radius: 8px; padding: .5rem .75rem; margin-top: .375rem; }
.crm-member { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; padding: 3px 0; cursor: pointer; }
.st-color { height: 38px; padding: 2px; }

/* ---- Searchable dropdowns (nx-select-search.js) --------------------------------------- */
.nx-dd-search { position: sticky; top: 0; z-index: 2; background: var(--mud-palette-surface, #fff); padding: 6px 8px; border-bottom: 1px solid var(--nx-ring); }
.nx-dd-search input, .nx-dd-input { width: 100%; font: inherit; font-size: .8125rem; padding: .4rem .55rem; border: 1px solid var(--nx-ring-strong, #d0d0d8); border-radius: 6px; outline: none; background: var(--nx-surface, #fff); }
.nx-dd-search input:focus, .nx-dd-input:focus { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.nx-dd-empty { font-size: .8125rem; color: var(--nx-muted); padding: .625rem .75rem; }
.nx-dd-panel { position: fixed; z-index: 2000; background: var(--nx-surface, #fff); border: 1px solid var(--nx-ring); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,19,48,.18);
  padding: 6px; max-width: min(460px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: 4px; }
.nx-dd-list { max-height: 260px; overflow-y: auto; }
.nx-dd-opt { font-size: .8438rem; padding: .4rem .6rem; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-dd-opt:hover, .nx-dd-opt.is-active { background: var(--nx-accent-soft); color: var(--nx-accent); }
.nx-dd-opt.is-selected { font-weight: 650; }
.nx-dd-opt.is-disabled { color: var(--nx-muted); cursor: default; background: none; }

.crm-dropbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1400; display: flex; gap: .75rem; }
.crm-drop { min-width: 220px; text-align: center; font-weight: 700; font-size: .875rem; padding: 1.1rem 1.5rem; border-radius: 12px; border: 2px dashed; box-shadow: 0 12px 32px rgba(16,19,48,.18); }
.crm-drop.is-won { background: #ECFDF3; color: #067647; border-color: #47CD89; }
.crm-drop.is-lost { background: #FEF3F2; color: #B42318; border-color: #F97066; }
.crm-drop.is-over { transform: scale(1.05); border-style: solid; }
.nf-grid .set-input, .crm-money-input .set-input { height: 38px; }

/* ---- Task detail: wide two-column panel and full-page view ------------------------------ */
.task-panel { width: min(1180px, 94vw); }
.task-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.task-main { min-width: 0; }
.task-side { position: sticky; top: 0; background: var(--nx-surface-2); border: 1px solid var(--nx-ring);
  border-radius: var(--nx-r); padding: 1rem 1rem .5rem; }
.task-side .task-status-band { background: var(--nx-surface); margin-bottom: 1rem; }
.task-side .task-fields { grid-template-columns: 1fr; }
.task-side .task-field { grid-template-columns: 112px minmax(0, 1fr); border-bottom-color: var(--nx-ring); }
.task-side .task-section { margin-bottom: .75rem; }
.task-desc { min-height: 15rem; max-height: 62vh; field-sizing: content; line-height: 1.6; font-size: .9063rem;
  padding: .75rem .875rem; }
.task-main .task-tabs { margin-top: .25rem; }
@media (max-width: 900px) {
  .task-layout { grid-template-columns: 1fr; }
  .task-side { position: static; order: -1; }
}
/* Full page: the same record, laid out on the page instead of over it. */
.task-page { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 14px; box-shadow: var(--nx-sh-1); overflow: hidden; }
.task-page .side-panel-body { padding: 1.5rem; overflow: visible; }
.task-page .task-panel-title { padding: 1.25rem 1.5rem 1rem; }
.task-page .task-title-input { font-size: 1.375rem; }
.task-page .task-side { top: 76px; }
.task-side .task-band-label { display: none; }

/* ---- Task owners (several per task) ------------------------------------------------------ */
.task-owners-field { align-items: start; }
.task-owners { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; padding: .25rem 0; }
.task-owner-chip { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; background: var(--nx-surface);
  border: 1px solid var(--nx-ring); border-radius: 999px; padding: 2px 8px 2px 2px; }
.task-owner-chip .nx-avatar { width: 22px; height: 22px; font-size: .5625rem; }
.task-owner-x { border: 0; background: none; cursor: pointer; color: var(--nx-muted); font-size: 1rem; line-height: 1; padding: 0 2px; }
.task-owner-x:hover { color: #B42318; }
.task-owner-none { font-size: .8125rem; color: var(--nx-muted); }
.task-owner-add { font: inherit; font-size: .8125rem; color: var(--nx-accent); border: 1px dashed var(--nx-ring-strong, #ccc); border-radius: 999px;
  padding: 2px 8px; background: transparent; cursor: pointer; max-width: 150px; }
.nx-avatar-stack { display: inline-flex; }
.nx-avatar-stack .nx-avatar { margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.nx-avatar-stack .nx-avatar:first-child { margin-left: 0; }
.task-main .task-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .task-main .task-tab { white-space: nowrap; }

/* ---- Quick-create popups in Sales (company / contact / deal / quotation) ------------------ */
.nx-dialog.qc-dialog { max-width: 560px; }
.qc-dialog .set-field { margin-bottom: .75rem; }
.qc-dialog .set-actions { margin-top: 1rem; }
.qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .875rem; }
@media (max-width: 560px) { .qc-grid { grid-template-columns: 1fr; } }
.qc-with-new { display: flex; gap: 6px; align-items: stretch; }
.qc-with-new > select, .qc-with-new > .set-input { flex: 1 1 auto; min-width: 0; }
.qc-new-btn { flex: 0 0 auto; padding: 0 12px; border-radius: 8px; border: 1px dashed #A5A8F5; background: #F4F4FF;
    color: #4338CA; font-weight: 600; font-size: .8125rem; cursor: pointer; white-space: nowrap; }
.qc-new-btn:hover:not(:disabled) { background: #E8E8FF; border-style: solid; }
.qc-new-btn:disabled { opacity: .45; cursor: not-allowed; }

/* =============================================================================
   Project-manager dashboards (portfolio on "/", single project on its Dashboard tab)
   ============================================================================= */
.pm-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
a.pm-kpi { color: inherit; text-decoration: none; display: block; }
.nx-stat-value small { font-size: .875rem; font-weight: 520; color: var(--nx-muted); letter-spacing: 0; }
.pm-health-split { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .75rem; color: var(--nx-ink-2); margin-top: .3125rem; }
.pm-health-split .pm-dot { margin-left: 6px; }
.pm-health-split .pm-dot:first-child { margin-left: 0; }
.pm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-right: 4px; }
.pm-dot.is-good { background: var(--nx-good); } .pm-dot.is-warning { background: var(--nx-warning); } .pm-dot.is-critical { background: var(--nx-critical); }

.pm-card { padding: 1rem 1.125rem 1.125rem; margin-bottom: 1rem; min-width: 0; }
.pm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: .75rem; flex-wrap: wrap; }
.pm-card-head h2 { margin: 0; font-size: .9688rem; font-weight: 650; letter-spacing: -.01em; }
.pm-card-sub { font-size: .75rem; color: var(--nx-muted); margin-top: 2px; }
.pm-h3 { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-ink-2); margin: 1rem 0 .375rem; }
.pm-link { font-size: .8125rem; font-weight: 550; color: var(--nx-accent); text-decoration: none; white-space: nowrap; }
.pm-link:hover { text-decoration: underline; }
.pm-count { min-width: 28px; padding: 2px 9px; border-radius: 999px; background: #FEE2E2; color: #B91C1C; font-weight: 650; font-size: .8125rem; text-align: center; }
.pm-empty { padding: 1.25rem 0; text-align: center; color: var(--nx-muted); font-size: .8438rem; }
.pm-more { font-size: .75rem; color: var(--nx-muted); padding-top: .5rem; }
.pm-sub { font-size: .7188rem; color: var(--nx-muted); line-height: 1.35; margin-top: 2px; }
.pm-bad { color: #B42318; font-weight: 650; }
.pm-zero { color: var(--nx-muted); }

.pm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 1rem; align-items: start; }
.pm-span-4 { grid-column: span 4; } .pm-span-5 { grid-column: span 5; } .pm-span-7 { grid-column: span 7; }
.pm-span-8 { grid-column: span 8; } .pm-span-12 { grid-column: span 12; }
@media (max-width: 1100px) { .pm-grid > .pm-card { grid-column: span 12; } }

.pm-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-chip { border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); border-radius: 999px; padding: 4px 10px;
    font: inherit; font-size: .75rem; font-weight: 550; color: var(--nx-ink-2); cursor: pointer; }
.pm-chip span { margin-left: 4px; color: var(--nx-muted); font-weight: 600; }
.pm-chip.is-on { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.pm-chip.is-on span { color: rgba(255,255,255,.8); }

.pm-table-wrap { overflow-x: auto; margin: 0 -4px; }
.pm-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.pm-table th { text-align: left; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted);
    padding: 6px 8px; border-bottom: 1px solid var(--nx-ring); white-space: nowrap; }
.pm-table td { padding: 9px 8px; border-bottom: 1px solid var(--nx-ring); vertical-align: top; }
.pm-table tr:last-child td { border-bottom: none; }
.pm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pm-table tbody tr:hover { background: var(--nx-surface-2); }
.pm-col-bar { min-width: 180px; }
.pm-col-money { min-width: 160px; }
.pm-proj { display: flex; align-items: center; gap: 8px; color: var(--nx-ink); text-decoration: none; font-weight: 600; }
.pm-proj:hover .pm-proj-name { color: var(--nx-accent); text-decoration: underline; }
.pm-proj-name { overflow: hidden; text-overflow: ellipsis; }
.pm-reasons { font-size: .7031rem; color: var(--nx-ink-2); margin-top: 4px; max-width: 240px; line-height: 1.35; }
.pm-ms-name { font-weight: 550; }

.pm-progress { display: flex; align-items: center; gap: 8px; }
.pm-progress-track { position: relative; flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--nx-surface-3); }
.pm-progress-fill { height: 100%; border-radius: 999px; background: var(--nx-500); }
.pm-progress-fill.is-good { background: #22A55B; } .pm-progress-fill.is-warning { background: #F2A516; }
.pm-progress-fill.is-critical { background: #D64545; } .pm-progress-fill.is-neutral { background: #98A2B3; }
.pm-progress-now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--nx-ink); border-radius: 1px; }
.pm-progress-now::after { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 3px; border-radius: 2px; background: var(--nx-ink); }
.pm-progress-num { font-size: .75rem; font-weight: 650; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.pm-progress-lg { height: 14px; }

.pm-money-bar { display: flex; height: 8px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; margin-top: 4px; }
.pm-money-bar span, .pm-stack span { display: block; height: 100%; }
.is-rec { background: #16A34A; } .is-col { background: #F59E0B; } .is-wait { background: #A5B4FC; } .is-none { background: var(--nx-surface-3); border: 1px solid var(--nx-ring-strong); }
.pm-stack { display: flex; height: 16px; border-radius: 8px; background: var(--nx-surface-3); overflow: hidden; margin: .25rem 0 .625rem; }
.pm-stack-status .is-neutral { background: #CBD2DC; } .pm-stack-status .is-info { background: var(--nx-500); }
.pm-stack-status .is-warning { background: #F59E0B; } .pm-stack-status .is-good { background: #16A34A; }
.pm-stack-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .75rem; color: var(--nx-ink-2); }
.pm-stack-legend > div { display: flex; align-items: center; gap: 6px; }
.pm-stack-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.pm-stack-legend b { color: var(--nx-ink); font-weight: 650; margin-left: 2px; font-variant-numeric: tabular-nums; }
.pm-stack-total { margin-left: auto; }

.pm-list { list-style: none; margin: 0; padding: 0; }
.pm-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--nx-ring); min-width: 0; }
.pm-row:last-child { border-bottom: none; }
.pm-click { cursor: pointer; border-radius: 6px; }
.pm-click:hover { background: var(--nx-surface-2); }
.pm-row-main { flex: 1 1 auto; min-width: 0; }
.pm-row-title { font-size: .8125rem; font-weight: 560; color: var(--nx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row-title a { color: inherit; text-decoration: none; }
.pm-row-title a:hover { color: var(--nx-accent); text-decoration: underline; }
.pm-row-text { font-size: .8125rem; color: var(--nx-ink); line-height: 1.35; }
.pm-row .pm-sub .project-code { font-size: .625rem; padding: 1px 5px; margin-right: 4px; }
.pm-late { flex: 0 0 auto; min-width: 44px; text-align: center; padding: 3px 6px; border-radius: 6px; background: #FEE2E2; color: #B42318; font-weight: 650; font-size: .75rem; font-variant-numeric: tabular-nums; }
.pm-due { flex: 0 0 auto; font-size: .75rem; color: var(--nx-ink-2); white-space: nowrap; }
.pm-due.is-late { color: #B42318; font-weight: 600; }
.pm-amount { flex: 0 0 auto; font-weight: 650; font-size: .8125rem; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.pm-ms-date { flex: 0 0 auto; width: 42px; text-align: center; line-height: 1.05; font-weight: 700; font-size: 1rem; color: var(--nx-ink);
    border: 1px solid var(--nx-ring-strong); border-radius: 8px; padding: 4px 0; }
.pm-ms-date small { display: block; font-size: .625rem; font-weight: 600; text-transform: uppercase; color: var(--nx-muted); }
.pm-ms-date.is-late { border-color: rgba(208,59,59,.4); background: #FEF2F2; color: #B42318; }
.pm-tabs { margin-bottom: .25rem; }

.pm-person { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; white-space: nowrap; }
.pm-person .nx-avatar, .pm-row > .nx-avatar { width: 26px; height: 26px; font-size: .625rem; flex: 0 0 auto; }
.pm-hours { display: flex; flex-direction: column; gap: 3px; }
.pm-hours-track { position: relative; height: 10px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; }
.pm-hours-track span { position: absolute; left: 0; border-radius: 999px; }
.pm-hours-track .is-plan { top: 0; bottom: 0; background: #A5B4FC; }
.pm-hours-track .is-plan.is-over { background: #F87171; }
.pm-hours-track .is-log { top: 3px; bottom: 3px; background: var(--nx-700); }
.pm-legend { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: .7031rem; color: var(--nx-muted); margin-top: .5rem; }
.pm-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -8px; }
.pm-legend .is-plan { background: #A5B4FC; } .pm-legend .is-log { background: var(--nx-700); } .pm-legend .is-over { background: #F87171; }
.pm-team-bar { height: 5px; border-radius: 999px; background: var(--nx-surface-3); margin: 4px 0 2px; overflow: hidden; }
.pm-team-bar span { display: block; height: 100%; background: var(--nx-500); border-radius: 999px; }

.pm-stage { display: grid; grid-template-columns: minmax(110px, 160px) 1fr 64px; align-items: center; gap: 10px; padding: 5px 0; font-size: .8125rem; }
.pm-stage-name { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-stage-name small { margin-left: 6px; color: var(--nx-muted); font-weight: 600; }
.pm-stage-bar { height: 10px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; }
.pm-stage-bar span { display: block; height: 100%; border-radius: 999px; opacity: .85; }
.pm-stage-amt { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.pm-sales-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: .75rem; }
.pm-sales-facts > div { background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: 10px; padding: 8px 10px; font-size: .75rem; color: var(--nx-ink-2); }
.pm-sales-facts b { display: block; font-size: 1.125rem; color: var(--nx-ink); }
.pm-sales-facts small { display: block; color: var(--nx-muted); margin-top: 2px; }

.pm-count-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 12px; }
.pm-count-grid > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.pm-count-grid b { font-variant-numeric: tabular-nums; }

.pm-hero { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px; align-items: center; }
@media (max-width: 800px) { .pm-hero { grid-template-columns: 1fr; } }
.pm-hero-health .nx-status { font-size: .875rem; padding: 4px 12px; }
.pm-hero-reasons { margin: 8px 0 0; padding-left: 18px; font-size: .8125rem; color: var(--nx-ink-2); line-height: 1.5; }
.pm-hero-label, .pm-hero-dates { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--nx-ink-2); }
.pm-hero-label { margin-bottom: 8px; }
.pm-hero-label b { font-size: 1.25rem; color: var(--nx-ink); }
.pm-hero-dates { margin-top: 8px; font-size: .75rem; color: var(--nx-muted); }
.pm-show-all { display: block; width: 100%; margin-top: .5rem; padding: 8px; border: 1px dashed var(--nx-ring-strong); border-radius: 8px;
    background: none; font: inherit; font-size: .8125rem; font-weight: 550; color: var(--nx-accent); cursor: pointer; }
.pm-show-all:hover { background: var(--nx-surface-2); }
.pm-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pm-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 1rem; align-items: start; }
.pm-col { min-width: 0; }
@media (max-width: 1100px) { .pm-cols { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================================
   Roles & rights
   ============================================================================= */
.role-meter { display: inline-block; vertical-align: middle; width: 120px; height: 6px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; margin-right: 8px; }
.role-meter > div { height: 100%; background: var(--nx-600); border-radius: 999px; }
.role-link { border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); border-radius: 999px; padding: 3px 11px;
    font: inherit; font-size: .75rem; font-weight: 550; color: var(--nx-ink-2); cursor: pointer; }
.role-link:hover { border-color: var(--nx-accent); color: var(--nx-accent); }

.rl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .rl-layout { grid-template-columns: minmax(0, 1fr); } }
.rl-main, .rl-side { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.rl-side { position: sticky; top: 76px; }
.rl-card { padding: 1rem 1.125rem; }
.rl-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.rl-details-grid .set-field { margin-bottom: 0; }
@media (max-width: 700px) { .rl-details-grid { grid-template-columns: 1fr; } }
.rl-optional { font-weight: 450; color: var(--nx-muted); margin-left: 4px; font-size: .6875rem; }

.rl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rl-search { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; max-width: 360px; background: var(--nx-surface);
    border: 1px solid var(--nx-ring-strong); border-radius: 8px; padding: 0 10px; color: var(--nx-muted); }
.rl-search input { border: none; outline: none; background: none; font: inherit; font-size: .8125rem; padding: 8px 0; width: 100%; color: var(--nx-ink); }
.rl-search:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.rl-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .75rem; color: var(--nx-muted); }
.rl-presets > span { margin-right: 2px; }

.rl-group { padding: 0; overflow: hidden; }
.rl-group-head { display: flex; align-items: center; gap: 12px; padding: .875rem 1.125rem; border-bottom: 1px solid var(--nx-ring); background: var(--nx-surface-2); }
.rl-group-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--nx-accent-soft); color: var(--nx-700); flex: 0 0 auto; }
.rl-group-title { flex: 1 1 auto; min-width: 0; }
.rl-group-title h2 { margin: 0; font-size: .9375rem; font-weight: 650; }
.rl-group-title p { margin: 1px 0 0; font-size: .75rem; color: var(--nx-muted); }
.rl-group-count { font-size: .75rem; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-700); white-space: nowrap; }
.rl-group-count.is-zero { background: var(--nx-surface-3); color: var(--nx-muted); }
.rl-group-count.is-all { background: #DCFCE7; color: #15803D; }
.rl-group-actions { display: flex; gap: 4px; }
.rl-mini { border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); border-radius: 6px; padding: 3px 9px; font: inherit; font-size: .7188rem; font-weight: 600; color: var(--nx-ink-2); cursor: pointer; }
.rl-mini:hover:not(:disabled) { border-color: var(--nx-accent); color: var(--nx-accent); }
.rl-mini:disabled { opacity: .4; cursor: default; }

.rl-rights { list-style: none; margin: 0; padding: 0; }
.rl-right { border-bottom: 1px solid var(--nx-ring); }
.rl-right:last-child { border-bottom: none; }
.rl-right-label { display: flex; align-items: center; gap: 16px; padding: .75rem 1.125rem; cursor: pointer; }
.rl-right-label:hover { background: var(--nx-surface-2); }
.rl-right-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rl-right-name { font-size: .8438rem; font-weight: 600; color: var(--nx-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-right:not(.is-on) .rl-right-name { color: var(--nx-ink-2); font-weight: 550; }
.rl-right-desc { font-size: .75rem; color: var(--nx-muted); line-height: 1.4; }
.rl-right-needs { font-size: .6875rem; color: var(--nx-ink-2); }
.rl-tag { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; }
.rl-tag.is-delete { background: #FEE2E2; color: #B42318; }

.rl-switch { position: relative; flex: 0 0 auto; width: 38px; height: 22px; }
.rl-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.rl-switch input:disabled { cursor: default; }
.rl-switch-ui { position: absolute; inset: 0; border-radius: 999px; background: #D0D5DD; transition: background .15s ease; }
.rl-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--nx-surface, #fff);
    box-shadow: 0 1px 2px rgba(16,24,40,.25); transition: transform .15s ease; }
.rl-switch input:checked + .rl-switch-ui { background: var(--nx-600); }
.rl-switch input:checked + .rl-switch-ui::after { transform: translateX(16px); }
.rl-switch input:focus-visible + .rl-switch-ui { box-shadow: 0 0 0 3px var(--nx-accent-soft-2); }
.rl-switch input:disabled + .rl-switch-ui { opacity: .6; }
.rl-right.is-on .rl-tag.is-delete { background: #B42318; color: #fff; }
.rl-empty { text-align: center; color: var(--nx-muted); font-size: .8438rem; }

.rl-summary-num { font-size: .8125rem; color: var(--nx-ink-2); }
.rl-summary-num b { font-size: 1.5rem; color: var(--nx-ink); margin-right: 2px; }
.rl-meter { height: 6px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; margin: 6px 0 10px; }
.rl-meter span { display: block; height: 100%; background: var(--nx-600); border-radius: 999px; }
.rl-summary-list { list-style: none; margin: 0; padding: 0; font-size: .7813rem; }
.rl-summary-list li { display: flex; justify-content: space-between; padding: 3px 0; color: var(--nx-ink); }
.rl-summary-list li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.rl-summary-list li.is-zero { color: var(--nx-muted); }
.rl-summary-deletes { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--nx-ring); font-size: .75rem; line-height: 1.4; }
.rl-ok { color: #15803D; }
.rl-warn { color: #B42318; }
.rl-side-title { margin: 0 0 .5rem; font-size: .8438rem; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.rl-side-title span { font-size: .6875rem; padding: 1px 7px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); }
.rl-muted { font-size: .75rem; color: var(--nx-muted); margin: 0 0 .5rem; }
.rl-people { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.rl-people li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .8125rem; }
.rl-people .nx-avatar { width: 24px; height: 24px; font-size: .5625rem; }
.rl-danger { border-color: rgba(208,59,59,.25); }
.rl-danger .role-move { margin-bottom: .5rem; }
.rl-danger-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.rl-savebar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin-top: 1rem; padding: 10px 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
    border: 1px solid var(--nx-ring); border-radius: 12px; box-shadow: 0 -6px 20px rgba(16,19,48,.06); }
.rl-savebar-note { margin-right: auto; font-size: .8125rem; color: var(--nx-muted); }
.rl-dirty { color: #B54708; font-weight: 600; }

/* =============================================================================
   Payments module: tabs, stage bars, owner lists
   ============================================================================= */
.pay-tabs { display: flex; gap: 0.25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--nx-ring); overflow-x: auto; }
.pay-tab {
    display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; white-space: nowrap;
    font-size: 0.875rem; font-weight: 540; color: var(--nx-ink-2); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pay-tab:hover { color: var(--nx-ink); }
.pay-tab.active { color: var(--nx-accent); border-bottom-color: var(--nx-accent); font-weight: 620; }
.pay-tab .mud-icon-root { font-size: 1.125rem; }

.pay-dash-note { display: flex; align-items: center; font-size: 0.8125rem; color: var(--nx-ink-2); }

.pay-sw-neutral { background: #A3A8BD; }
.pay-sw-warning { background: #F59E0B; }
.pay-sw-info    { background: #0EA5E9; }
.pay-sw-good    { background: #16A34A; }
.pay-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.pay-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--nx-surface-3); margin: 0.875rem 0 0.5rem; }
.pay-stack i { display: block; height: 100%; min-width: 3px; }

.pay-stages { display: flex; flex-direction: column; }
.pay-stage-row {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 3.5rem 7rem; align-items: center; gap: 0.75rem;
    padding: 0.625rem 0.25rem; border-bottom: 1px solid var(--nx-ring); text-decoration: none; color: var(--nx-ink);
}
.pay-stage-row:last-child { border-bottom: none; }
.pay-stage-row:hover { background: var(--nx-soft, #FAFAFE); }
.pay-stage-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.pay-stage-kind { font-size: 0.6875rem; color: var(--nx-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pay-stage-count, .pay-stage-pct { font-size: 0.75rem; color: var(--nx-muted); text-align: right; font-variant-numeric: tabular-nums; }
.pay-stage-amt { font-weight: 620; text-align: right; font-variant-numeric: tabular-nums; }

.pay-notes { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--nx-ring); font-size: 0.8125rem; color: var(--nx-ink-2); display: grid; gap: 0.375rem; }
.pay-notes .mud-icon-root { font-size: 1rem; vertical-align: -3px; margin-right: 0.25rem; }
.pay-none { font-size: 0.8125rem; color: var(--nx-muted); padding: 0.75rem 0; }

.pay-mini { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin-top: 0.5rem; }
.pay-mini th { text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-muted); padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--nx-ring); white-space: nowrap; }
.pay-mini td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--nx-ring); vertical-align: top; }
.pay-mini tbody tr:last-child td { border-bottom: none; }
.pay-mini .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-mini .due { color: #A32222; font-weight: 600; }
.pay-mini .good { color: #067306; }
.pay-mini tfoot td { border-top: 2px solid var(--nx-ring-strong); font-weight: 620; border-bottom: none; }
.pay-terms { margin-top: 0; }
.pay-terms tbody tr.pay-first td { border-top: 1px solid var(--nx-ring-strong); }

.pay-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.625rem; margin-bottom: 0.875rem; }
.pay-chip {
    display: grid; grid-template-columns: 12px 1fr auto; grid-template-areas: "sw name amt" ". count count";
    align-items: center; gap: 0.125rem 0.5rem; text-align: left; cursor: pointer; font: inherit; color: var(--nx-ink);
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); padding: 0.625rem 0.875rem;
}
.pay-chip .pay-swatch { grid-area: sw; }
.pay-chip-name { grid-area: name; font-size: 0.8125rem; font-weight: 560; }
.pay-chip-amt { grid-area: amt; font-weight: 640; font-variant-numeric: tabular-nums; }
.pay-chip-count { grid-area: count; font-size: 0.6875rem; color: var(--nx-muted); }
.pay-chip:hover { border-color: var(--nx-ring-strong); }
.pay-chip.is-on { border-color: var(--nx-accent); box-shadow: 0 0 0 1px var(--nx-accent); }

.pay-owner-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--nx-ring); }
.pay-owner-amt { font-size: 1.25rem; font-weight: 660; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .pay-tabs { gap: 0; }
    .pay-tab { padding: 0.5rem 0.375rem; font-size: 0.8125rem; }
    .pay-tab .mud-icon-root { display: none; }
    .pay-stage-row { grid-template-columns: 12px minmax(0, 1fr) 6rem; }
    .pay-stage-count, .pay-stage-pct { display: none; }
}

/* Email settings page and the profile option */
.email-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; background: var(--nx-surface-3); border-radius: var(--nx-r-sm); padding: 0.5rem 0.625rem; word-break: break-all; margin: 0.375rem 0 0.75rem; }
.email-sample { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; line-height: 1.5; background: #14162E; color: #E6E8F7; border-radius: var(--nx-r-sm); padding: 0.75rem 0.875rem; overflow: auto; margin: 0.375rem 0 0.75rem; }
.pf-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.pf-check input { margin-top: 3px; accent-color: var(--nx-accent); }
.crm-banner.is-info { background: var(--nx-accent-soft); color: var(--nx-800); border: 1px solid rgba(99,102,241,.22); }
.set-field label.pf-check { font-weight: 450; color: var(--nx-ink); font-size: 0.875rem; }

/* Files chosen on a form that is not saved yet. */
.pending-files { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.pending-files li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.625rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface); font-size: 0.8125rem; }
.pending-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-note { margin-top: 0.375rem; font-size: 0.75rem; color: #8A5A00; }

/* =============================================================================
   Rich text editor (task description)
   ============================================================================= */
.nx-rich { border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r); background: var(--nx-surface); position: relative; }
.nx-rich:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.nx-rich.is-readonly { border-color: transparent; background: transparent; }
.nx-rich.is-readonly:focus-within { box-shadow: none; }

.nx-rich-toolbar { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring); border-radius: var(--nx-r) var(--nx-r) 0 0; }
.nx-rich-group { display: flex; align-items: center; border-right: 1px solid var(--nx-ring); }
.nx-rich-group:last-child { border-right: 0; }
.nx-rich-toolbar button, .nx-rich-color {
    width: 30px; height: 36px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--nx-ink-2); cursor: pointer; position: relative;
}
.nx-rich-toolbar button:hover, .nx-rich-color:hover { background: var(--nx-surface-3); color: var(--nx-ink); }
.nx-rich-toolbar button.is-on { background: var(--nx-accent-soft); color: var(--nx-accent); }
.nx-rich-toolbar button:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.nx-rich-toolbar select {
    height: 36px; border: 0; background: transparent; color: var(--nx-ink-2); font: inherit; font-size: 0.78rem; padding: 0 0.125rem; cursor: pointer; max-width: 76px;
}
.nx-rich-toolbar select:hover { background: var(--nx-surface-3); }
.nx-rich-color input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.nx-rich-pop { display: flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.625rem; background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring); }
.nx-rich-pop[hidden] { display: none; }
.nx-rich-pop input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 0.5rem; font: inherit; font-size: 0.8125rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); background: var(--nx-surface, #fff); }
.nx-rich-pop input:focus { outline: none; border-color: var(--nx-accent); }
.nx-rich-pop button { height: 30px; padding: 0 0.625rem; font: inherit; font-size: 0.8125rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); background: var(--nx-surface, #fff); cursor: pointer; color: var(--nx-ink-2); width: auto; }
.nx-rich-pop button.is-primary { background: var(--nx-accent); color: #fff; border-color: var(--nx-accent); }
.nx-find-count { font-size: 0.75rem; color: var(--nx-muted); white-space: nowrap; }

.nx-rich-body { min-height: 9rem; max-height: 60vh; overflow: auto; padding: 0.875rem 1rem; font-size: 0.9063rem; line-height: 1.6; color: var(--nx-ink); outline: none; word-break: break-word; }
.nx-rich.is-readonly .nx-rich-body { padding: 0; min-height: 0; max-height: none; }
.nx-rich-body:empty::before { content: attr(data-placeholder); color: var(--nx-muted); pointer-events: none; }
.nx-rich-body p, .nx-rich-body div { margin: 0 0 0.4rem; }
.nx-rich-body ul, .nx-rich-body ol { margin: 0.25rem 0 0.5rem; padding-left: 1.5rem; }
.nx-rich-body ul { list-style: disc; }
.nx-rich-body ol { list-style: decimal; }
.nx-rich-body li { display: list-item; }
.nx-rich-body blockquote { margin: 0.25rem 0 0.5rem 1.5rem; }
.nx-rich-body a { color: var(--nx-accent); text-decoration: underline; }
.nx-rich-body ul.nx-checklist { list-style: none; padding-left: 0.125rem; }
.nx-rich-body ul.nx-checklist li { display: block; }
.nx-rich-body ul.nx-checklist li { position: relative; padding-left: 1.75rem; margin: 0.1875rem 0; }
.nx-rich-body ul.nx-checklist li::before {
    content: ""; position: absolute; left: 0.125rem; top: 0.3em; width: 15px; height: 15px; border: 1.5px solid #9AA0B8; border-radius: 4px; background: var(--nx-surface, #fff); cursor: pointer;
}
.nx-rich-body ul.nx-checklist li[data-checked="true"]::before { background: var(--nx-accent); border-color: var(--nx-accent); content: "\2713"; color: #fff; font-size: 11px; line-height: 13px; text-align: center; }
.nx-rich-body ul.nx-checklist li[data-checked="true"] { color: var(--nx-muted); text-decoration: line-through; }
.nx-rich.is-readonly ul.nx-checklist li::before { cursor: default; }
.nx-rich-status { position: absolute; right: 0.75rem; bottom: 0.375rem; font-size: 0.6875rem; color: var(--nx-muted); pointer-events: none; }

/* =============================================================================
   Task page (drawer and full page): header, cards, tabs, activity stream
   ============================================================================= */
.tp { background: var(--nx-bg, #F7F8FC); }
.task-page.tp { background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
.tp-head { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 14px; padding: 0.875rem 1.25rem 0.875rem; box-shadow: var(--nx-sh-1); }
.side-panel.tp .tp-head { border-radius: 0; border-width: 0 0 1px; box-shadow: none; flex: 0 0 auto; }
.tp-head-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.tp-actions { display: flex; align-items: center; gap: 0.25rem; }
.tp-title {
    display: block; width: 100%; margin: 0.5rem 0 0.25rem; padding: 0.25rem 0.5rem; margin-left: -0.5rem; width: calc(100% + 1rem);
    font: inherit; font-size: 1.5rem; font-weight: 660; letter-spacing: -0.025em; color: var(--nx-ink);
    border: 1px solid transparent; border-radius: 8px; background: transparent;
}
.tp-title:hover:not(:disabled) { border-color: var(--nx-ring); }
.tp-title:focus { outline: none; border-color: var(--nx-accent); background: var(--nx-surface, #fff); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.tp-title:disabled { cursor: default; }
.tp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.8125rem; color: var(--nx-ink-2); }
.tp-meta-item { display: inline-flex; align-items: center; gap: 0.25rem; }
.tp-meta-item .mud-icon-root { font-size: 1rem; color: var(--nx-muted); }
.tp-dim { color: var(--nx-muted); }
.tp-status {
    --band: #6366F1; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0 0.25rem 0 0.625rem; height: 30px; border-radius: 999px;
    /* Tinted against the page's own surface (not white), so the pill is dark in dark mode and its text stays readable (KM-9). */
    background: color-mix(in srgb, var(--band) 14%, var(--nx-surface)); border: 1px solid color-mix(in srgb, var(--band) 40%, var(--nx-surface)); cursor: pointer;
}
.tp-status .task-band-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--band); flex: 0 0 auto; }
.tp-status select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.8125rem; font-weight: 620; color: var(--nx-ink); padding: 0 1.25rem 0 0; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%; background-size: 4px 4px; background-repeat: no-repeat; }
.tp-status select:focus { outline: none; }
.tp-status:focus-within { box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.tp-status select:disabled { cursor: default; }
.tp-status select option { background: var(--nx-surface); color: var(--nx-ink); }

.tp-follow {
    display: inline-flex; align-items: center; gap: 0.375rem; height: 32px; padding: 0 0.75rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.8125rem; font-weight: 600;
    color: var(--nx-ink-2); background: var(--nx-surface); border: 1px solid var(--nx-ring-strong); transition: background .12s ease, border-color .12s ease;
}
.tp-follow:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.tp-follow.is-on { background: var(--nx-accent-soft); border-color: var(--nx-accent); color: var(--nx-800); }
.tp-follow-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--nx-surface-3); font-size: 0.6875rem; line-height: 18px; text-align: center; color: var(--nx-ink-2); }
.tp-follow.is-on .tp-follow-count { background: var(--nx-surface, #fff); }

.tp-body { padding: 1rem 0 2rem; }
.side-panel.tp .tp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem 2rem; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.tp-main { min-width: 0; display: grid; gap: 1rem; }
.tp-side { display: grid; gap: 0.75rem; position: sticky; top: 76px; }
.side-panel.tp .tp-side { top: 0; }
.tp-card { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 14px; padding: 1rem 1.125rem; box-shadow: var(--nx-sh-1); min-width: 0; }
.tp-card-head { font-size: 0.6875rem; font-weight: 640; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-muted); margin-bottom: 0.625rem; }
.tp-card .nx-rich { margin: 0 -0.125rem; }

.tp-side-card { padding: 0.875rem 1rem 0.5rem; }
.tp-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 0.5rem; min-height: 38px; border-top: 1px solid var(--nx-ring); }
.tp-field:first-of-type { border-top: 0; }
.tp-card-head + .tp-field { border-top: 0; }
.tp-field > label { font-size: 0.8125rem; color: var(--nx-ink-2); }
.tp-field.tp-block { grid-template-columns: 1fr; align-items: start; gap: 0.25rem; padding: 0.5rem 0 0.625rem; }
.tp-input {
    width: 100%; height: 32px; padding: 0 0.5rem; font: inherit; font-size: 0.8438rem; color: var(--nx-ink); background: transparent;
    border: 1px solid transparent; border-radius: 8px; min-width: 0; cursor: pointer;
}
.tp-input:hover:not(:disabled) { border-color: var(--nx-ring-strong); background: var(--nx-surface, #fff); }
.tp-input:focus { outline: none; border-color: var(--nx-accent); background: var(--nx-surface, #fff); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.tp-input:disabled { cursor: default; color: var(--nx-ink); opacity: 1; }
select.tp-input { padding-right: 0.25rem; }
.tp-static { font-size: 0.8438rem; padding: 0 0.5rem; color: var(--nx-ink); }
.tp-pct-input { width: 56px; text-align: right; flex: 0 0 auto; }
.tp-field .task-pct { display: flex; align-items: center; gap: 0.375rem; }
.tp-field .task-pct-bar { flex: 1 1 auto; }
.tp-tags { margin-top: 0; }

/* Tabs: wrap rather than clip, so no tab is ever hidden off the edge. */
.tp-tabs-card { padding: 0.5rem 1.125rem 1rem; }
.tp-tabs { display: flex; flex-wrap: wrap; gap: 0.125rem 0.25rem; border-bottom: 1px solid var(--nx-ring); margin: 0 -0.25rem 0.875rem; padding: 0 0.25rem; }
.tp-tabs .tp-tab { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0.75rem; border: 0; background: transparent; font: inherit; font-size: 0.8438rem; font-weight: 540; color: var(--nx-ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tp-tabs .tp-tab:hover { color: var(--nx-ink); }
.tp-tabs .tp-tab.active { color: var(--nx-accent); border-bottom-color: var(--nx-accent); font-weight: 640; }
.tp-tabs .tp-tab .count { margin-left: 0; font-size: 0.6875rem; padding: 0 6px; line-height: 18px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); }
.tp-tabs .tp-tab.active .count { background: var(--nx-accent-soft-2); color: var(--nx-800); }
.tp-tab-body { padding-bottom: 0; }

/* Comments */
.tp .comment { padding: 0.75rem 0; }
.tp .comment-body { font-size: 0.875rem; line-height: 1.55; }

/* Activity stream */
.tp-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }
.tp-filter { padding: 0.25rem 0.75rem; border-radius: 999px; font: inherit; font-size: 0.75rem; font-weight: 560; border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); color: var(--nx-ink-2); cursor: pointer; }
.tp-filter:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.tp-filter.is-on { background: var(--nx-accent-soft); border-color: var(--nx-accent); color: var(--nx-800); }
.tp-stream { display: flex; flex-direction: column; }
.tp-day { position: sticky; top: 0; z-index: 1; margin: 0.625rem 0 0.375rem; padding: 0.25rem 0; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-muted); background: linear-gradient(var(--nx-surface) 80%, transparent); }
.tp-day:first-child { margin-top: 0; }
.tp-act { display: flex; gap: 0.75rem; padding: 0.625rem 0; position: relative; }
.tp-act::before { content: ""; position: absolute; left: 13px; top: 38px; bottom: -6px; width: 2px; background: var(--nx-ring); }
.tp-act:last-child::before { display: none; }
.tp-act .nx-avatar { flex: 0 0 auto; z-index: 1; }
.tp-act-body { flex: 1 1 auto; min-width: 0; }
.tp-act-head { font-size: 0.875rem; line-height: 1.5; color: var(--nx-ink); }
.tp-act-head strong { font-weight: 640; }
.tp-when { margin-left: 0.5rem; font-size: 0.75rem; color: var(--nx-muted); white-space: nowrap; }
.tp-chgs { display: grid; gap: 0.3125rem; margin-top: 0.4375rem; padding: 0.5rem 0.75rem; background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: 10px; }
.tp-chg { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0.5rem; align-items: baseline; font-size: 0.8125rem; }
.tp-chg-field { display: inline-flex; align-items: center; gap: 0.3125rem; color: var(--nx-ink-2); font-weight: 560; }
.tp-chg-field .mud-icon-root { font-size: 1rem; color: var(--nx-muted); }
.tp-chg-val { min-width: 0; overflow-wrap: anywhere; }
.tp-old { color: var(--nx-muted); text-decoration: line-through; text-decoration-color: rgba(138,138,148,.6); }
.tp-new { color: var(--nx-ink); font-weight: 600; }
.tp-arrow { margin: 0 0.4375rem; color: var(--nx-muted); }
.tp-sign { font-weight: 700; color: var(--nx-accent); }
.tp-old .tp-sign { color: #B42318; }
.tp-quote { display: inline-block; max-width: 100%; padding: 0.125rem 0.5rem; border-left: 3px solid var(--nx-ring-strong); background: var(--nx-surface, #fff); border-radius: 0 6px 6px 0; font-style: italic; text-decoration: none; }
.tp-quote.tp-old { opacity: .85; text-decoration: none; }
.tp-quote.tp-new { font-weight: 450; }

@media (max-width: 1000px) {
    .tp-grid { grid-template-columns: 1fr; }
    .tp-side { position: static; }   /* below the description and discussion, which come first */
}
@media (max-width: 560px) {
    .tp-title { font-size: 1.25rem; }
    .tp-chg { grid-template-columns: 1fr; gap: 0.125rem; }
    .tp-field { grid-template-columns: 92px minmax(0, 1fr); }
}

.tp-diff { display: grid; gap: 0.3125rem; }
.tp-diff-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.tp-diff-label { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nx-muted); }
.tp-quote { display: block; }
.nr-taskupdated { background: rgba(99,102,241,.10); color: #4338CA; }
.nr-followed { background: rgba(14,165,233,.12); color: #0369A1; }

/* Tables in task descriptions (pasted from Excel or a web page). */
.nx-rich-body table, .nx-rich-view table { border-collapse: collapse; margin: 0.375rem 0 0.625rem; font-size: 0.8438rem; max-width: 100%; }
.nx-rich-body th, .nx-rich-body td, .nx-rich-view th, .nx-rich-view td { border: 1px solid var(--nx-ring-strong); padding: 0.3125rem 0.625rem; vertical-align: top; text-align: left; min-width: 2.5rem; }
.nx-rich-body th, .nx-rich-view th { background: var(--nx-surface-3); font-weight: 600; }
.nx-rich-body tr:first-child td, .nx-rich-view tr:first-child td { background: var(--nx-surface-2); font-weight: 600; }
.nx-rich-body td p, .nx-rich-body td div { margin: 0; }

/* "+" on an Employee Workload cell: start a task for that person on that day. */
.load-cell { position: relative; }
.load-add {
    position: absolute; top: 2px; right: 2px; z-index: 1;
    width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
    border: 1px solid transparent; border-radius: 5px; background: transparent;
    color: var(--nx-muted); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.load-cell:hover .load-add, .load-add:focus-visible { opacity: 1; }
.load-add:hover, .load-add:focus-visible { color: var(--nx-700); background: var(--nx-accent-soft-2); border-color: var(--nx-ring-strong); outline: none; }
@media (hover: none) { .load-add { opacity: .6; } }
.cal-hint { padding: 0.625rem 1rem; font-size: 0.8125rem; color: var(--nx-muted); background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring); }

/* "Connection lost. Reconnecting…" shown only if the connection stays down for a moment. */
.nx-conn { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2000; padding: 0.5rem 1rem; border-radius: 999px; background: #17153B; color: #fff; font-size: 0.8125rem; font-weight: 550; box-shadow: 0 6px 24px rgba(23,21,59,.3); }

/* ---- Payments by project -------------------------------------------------------------------------- */
.pp { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.pp-list { padding: 0.75rem; position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); display: flex; flex-direction: column; }
.pp-search { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; height: 38px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r); background: var(--nx-surface, #fff); color: var(--nx-muted); }
.pp-search:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.pp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.875rem; color: var(--nx-ink); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.625rem 0 0.5rem; }
.pp-chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 28px; padding: 0 0.625rem; border: 1px solid var(--nx-ring); border-radius: 999px; background: var(--nx-surface); font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--nx-ink-2); cursor: pointer; }
.pp-chip span { font-weight: 700; color: var(--nx-muted); }
.pp-chip.is-on { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.pp-chip.is-on span { color: rgba(255,255,255,.8); }
.pp-items { overflow-y: auto; margin: 0 -0.25rem; padding: 0 0.25rem; display: grid; gap: 0.375rem; align-content: start; }
.pp-item { display: block; width: 100%; text-align: left; padding: 0.625rem 0.75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r); background: var(--nx-surface); cursor: pointer; font: inherit; }
.pp-item:hover { border-color: var(--nx-400); }
.pp-item.is-on { border-color: var(--nx-accent); background: var(--nx-accent-soft); box-shadow: 0 0 0 1px var(--nx-accent) inset; }
.pp-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.pp-item-name { font-size: 0.875rem; font-weight: 650; color: var(--nx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-item-code { flex: 0 0 auto; font-size: 0.6875rem; color: var(--nx-muted); font-family: var(--nx-mono); }
.pp-item-sub { margin-top: 0.25rem; font-size: 0.75rem; color: var(--nx-muted); }
.pp-stack { display: flex; height: 6px; margin-top: 0.5rem; border-radius: 999px; overflow: hidden; background: #E9EAF6; }
.pp-stack.is-lg { height: 10px; margin-top: 0; }
.pp-stack i { display: block; height: 100%; }
.s-rec { background: #2E9E6B; } .s-inv { background: #4F6BF0; } .s-sig { background: #F5A524; } .s-aw { background: #C9CCE0; }
.pp-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.4375rem; font-size: 0.75rem; }
.pp-item-owner { color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-next { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-weight: 650; font-size: 0.6875rem; }
.pp-next.is-action { background: rgba(245,165,36,.18); color: #8A5A00; }
.pp-next.is-wait { background: var(--nx-surface-3); color: var(--nx-muted); }
.pp-next.is-done { background: rgba(46,158,107,.15); color: #1F7A50; }
.pp-none { padding: 1rem 0.5rem; text-align: center; font-size: 0.8125rem; color: var(--nx-muted); }
.pp-detail { min-width: 0; display: grid; gap: 0.875rem; }
.pp-empty { display: grid; justify-items: center; gap: 0.25rem; padding: 3rem 1.5rem; text-align: center; color: var(--nx-muted); }
.pp-empty h3 { margin: 0.5rem 0 0; color: var(--nx-ink); font-size: 1.0625rem; }
.pp-empty p { margin: 0; max-width: 36ch; font-size: 0.875rem; }
.pp-empty.is-small { padding: 1.5rem; }
.pp-head { padding: 1.125rem 1.25rem; display: grid; gap: 0.875rem; }
.pp-back { display: none; align-items: center; gap: 0.25rem; width: fit-content; border: 0; background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--nx-accent); cursor: pointer; padding: 0; }
.pp-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pp-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--nx-ink); text-decoration: none; }
.pp-title:hover { color: var(--nx-accent); }
.pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--nx-ink-2); }
.pp-contract { display: grid; gap: 0.25rem; font-size: 0.6875rem; font-weight: 650; color: var(--nx-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pp-contract .pay-input { width: 190px; height: 38px; font-size: 1rem; font-weight: 700; text-align: right; }
.pp-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.pp-sum div { display: grid; gap: 2px; padding: 0.5rem 0.75rem; border-radius: var(--nx-r); background: var(--nx-surface-2); }
.pp-sum span { font-size: 0.6875rem; color: var(--nx-muted); }
.pp-sum b { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.pp-sum b.good { color: #1F7A50; } .pp-sum b.due { color: #A32222; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; font-size: 0.6875rem; color: var(--nx-muted); }
.pp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pp-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: var(--nx-r); background: rgba(245,165,36,.14); color: #6B4500; font-size: 0.8125rem; }
.pp-pays { display: grid; gap: 0.75rem; }
.pp-pay { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-left: 4px solid #C9CCE0; border-radius: var(--nx-r); padding: 0.875rem 1.125rem; display: grid; gap: 0.875rem; }
.pp-pay.st-signedoff { border-left-color: #F5A524; } .pp-pay.st-invoiced { border-left-color: #4F6BF0; } .pp-pay.st-received { border-left-color: #2E9E6B; }
.pp-pay-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pp-pay-title { display: flex; align-items: center; gap: 0.625rem; flex: 1 1 220px; min-width: 0; }
.pp-seq { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--nx-surface-3); font-size: 0.75rem; font-weight: 700; color: var(--nx-ink-2); }
.pp-label { flex: 1; min-width: 0; height: 34px; padding: 0 0.5rem; border: 1px solid transparent; border-radius: var(--nx-r-sm); background: transparent; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--nx-ink); }
.pp-label:hover:not(:disabled), .pp-label:focus { border-color: var(--nx-ring-strong); background: var(--nx-surface, #fff); outline: none; }
.pp-label::placeholder { color: var(--nx-ink-2); font-weight: 600; }
.pp-amount { display: flex; align-items: center; gap: 0.5rem; }
.pp-amount .pay-input { width: 160px; height: 38px; font-size: 1.0625rem; font-weight: 700; text-align: right; }
.pp-cur { font-size: 0.75rem; font-weight: 600; color: var(--nx-muted); }
.pp-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-step { position: relative; }
.pp-step::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 3px; background: #E3E5F2; }
.pp-step:first-child::before { display: none; }
.pp-step.is-done::before { background: var(--nx-accent); }
.pp-step button { position: relative; display: grid; justify-items: center; gap: 3px; width: 100%; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.pp-step button:disabled { cursor: default; }
.pp-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #D5D8EA; background: var(--nx-surface, #fff); color: #fff; }
.pp-dot .mud-icon-root { width: 16px; height: 16px; }
.pp-step.is-done .pp-dot { background: var(--nx-accent); border-color: var(--nx-accent); }
.pp-step.is-current .pp-dot { box-shadow: 0 0 0 4px var(--nx-accent-soft); }
.pp-step-name { font-size: 0.75rem; font-weight: 600; color: var(--nx-muted); }
.pp-step.is-done .pp-step-name { color: var(--nx-ink); }
.pp-step-date { min-height: 1em; font-size: 0.6875rem; color: var(--nx-muted); }
.pp-step button:not(:disabled):hover .pp-dot { border-color: var(--nx-accent); }
.pp-pay-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.pp-go { display: inline-flex; align-items: center; gap: 0.375rem; height: 34px; padding: 0 0.875rem; border: 0; border-radius: var(--nx-r); background: var(--nx-accent); color: #fff; font: inherit; font-size: 0.8125rem; font-weight: 650; cursor: pointer; }
.pp-go:hover { filter: brightness(1.08); }
.pp-complete { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 650; color: #1F7A50; }
.pp-note { flex: 1 1 220px; min-width: 0; height: 34px; padding: 0 0.625rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface, #fff); font: inherit; font-size: 0.8125rem; }
.pp-note:focus { outline: none; border-color: var(--nx-accent); }
.pp-note-ro { font-size: 0.8125rem; color: var(--nx-ink-2); }
.pp-confirm { font-size: 0.8125rem; color: #A32222; display: inline-flex; align-items: center; gap: 0.375rem; }
.pp-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; padding: 0.875rem 1.125rem; border: 2px dashed var(--nx-ring-strong); border-radius: var(--nx-r); background: var(--nx-surface-2); }
.pp-add .pay-input { width: 150px; height: 38px; text-align: right; }
.pp-add .pp-label { height: 38px; flex: 1 1 200px; border-color: var(--nx-ring-strong); background: var(--nx-surface, #fff); font-weight: 450; }
@media (max-width: 960px) {
    .pp { grid-template-columns: minmax(0, 1fr); }
    .pp-list { position: static; max-height: none; }
    .pp.has-selection .pp-list { display: none; }
    .pp:not(.has-selection) .pp-detail { display: none; }
    .pp-back { display: inline-flex; }
    .pp-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-step-name { font-size: 0.6875rem; text-align: center; }
}

/* ---- Weekly days off (team) and public holidays ------------------------------------------------- */
.wk-off { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wk-day { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1px solid var(--nx-ring-strong); border-radius: 999px; background: var(--nx-surface); font-size: 0.8125rem; font-weight: 560; cursor: pointer; user-select: none; }
.wk-day input { accent-color: var(--nx-accent); }
.wk-day.is-off { background: rgba(208,59,59,.08); border-color: rgba(208,59,59,.35); color: #A32222; }
.set-hint { margin-top: 0.375rem; font-size: 0.75rem; color: var(--nx-muted); line-height: 1.45; }
.hol-add-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.hol-add-row .set-field { margin-bottom: 0; }
.hol-name { flex: 1 1 240px; }
.hol-year { padding: 0.75rem 1rem 0.375rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--nx-muted); }
.hol-row { display: flex; align-items: center; gap: 1rem; padding: 0.625rem 1rem; border-top: 1px solid var(--nx-line, #F2F3F9); }
.hol-row.is-past { opacity: .55; }
.hol-date { flex: 0 0 150px; font-size: 0.875rem; }
.hol-date small { color: var(--nx-muted); margin-left: 0.375rem; }
.hol-label { flex: 1 1 auto; font-size: 0.9063rem; font-weight: 560; }
/* Country holiday calendars (#385 G10) */
.hol-h2 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 650; }
.hol-cals .set-field { max-width: 520px; }
.hol-use { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.hol-use li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--nx-ring); border-radius: 8px; background: var(--nx-surface-2, var(--nx-surface)); font-size: 0.875rem; }
.hol-meta { font-size: 0.75rem; color: var(--nx-muted); }
.hol-meta.is-warn { color: #8A5A00; font-weight: 600; }
.hol-preview { margin-top: 1rem; }
.hol-preview summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--nx-accent); }
.hol-preview-body { margin-top: 0.625rem; max-width: 640px; }
.hol-preview-list { list-style: none; margin: 0.625rem 0 0; padding: 0; font-size: 0.8125rem; }
.hol-preview-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.3125rem 0; border-top: 1px solid var(--nx-line, #F2F3F9); }
.hol-preview-list .hol-date { flex: 0 0 110px; }
.hol-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0 0.75rem; }
.hol-yearnav { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.hol-yearnav .nx-btn { padding: 0.25rem 0.5rem; }
.hol-search { max-width: 280px; }
.hol-block { margin-bottom: 1rem; padding-bottom: 0.25rem; }
.hol-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 1rem 1rem 0.75rem; }
.hol-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hol-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.hol-actions .nx-btn { display: inline-flex; align-items: center; gap: 0.25rem; }
.hol-danger { color: #B42318; }
.hol-note { padding: 0 1rem 0.5rem; margin: 0; }
.hol-add { padding: 0 1rem 0.75rem; }
.hol-chip { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.375rem; padding: 1px 7px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: 0.6875rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.hol-status .hol-chip { margin-left: 0; }
.hol-chip.is-warn { background: rgba(245,158,11,.16); color: #8A5A00; }
.hol-chip.is-ok { background: rgba(22,163,74,.12); color: #15803D; }
.hol-row.is-removed .hol-date, .hol-row.is-removed .hol-label { text-decoration: line-through; color: var(--nx-muted); }
.hol-row.is-removed .hol-chip { text-decoration: none; }
.hol-row-actions { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.hol-edit-date { flex: 0 0 160px; }
.hol-edit-name { flex: 1 1 200px; }
.cal-holiday.is-part { background: transparent; border: 1px dashed rgba(245,158,11,.55); font-weight: 600; }
.cap-hol { display: inline-flex; vertical-align: middle; margin-left: 3px; color: #B45309; }
.su-hol select { max-width: 460px; }
.hol-add-row select.set-input { max-width: 300px; }
.su-hint { margin: 0.375rem 0 0; font-size: 0.75rem; color: var(--nx-muted); line-height: 1.45; }
.pf-holidays { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.8125rem; }
.pf-holidays li { display: flex; gap: 0.625rem; padding: 0.25rem 0; border-top: 1px solid var(--nx-line, #F2F3F9); }
.pf-holidays b { flex: 0 0 92px; font-weight: 600; }
.due-off-note { display: flex; align-items: flex-start; gap: 0.375rem; margin-top: 0.375rem; padding: 0.375rem 0.5rem; border-radius: 6px; background: rgba(245,158,11,.12); color: #8A5A00; font-size: 0.75rem; line-height: 1.4; }
.due-off-item { display: block; }
@media (max-width: 640px) {
    .hol-row { flex-wrap: wrap; gap: 0.375rem 0.75rem; }
    .hol-date { flex: 1 1 100%; }
    .hol-row-actions { margin-left: 0; }
    .hol-search { max-width: none; flex: 1 1 100%; }
    .hol-block-head { padding: 0.875rem 0.75rem 0.5rem; }
}
.cal-holiday { display: block; margin-top: 2px; padding: 1px 6px; border-radius: 4px; background: rgba(245,158,11,.16); color: #8A5A00; font-size: 0.625rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day.is-holiday { background: repeating-linear-gradient(135deg, rgba(245,158,11,.06) 0 8px, rgba(245,158,11,.11) 8px 16px); }
.cal-day.is-off .cal-daynum::after { content: "OFF"; margin-left: 0.5rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; color: var(--nx-muted); }
.load-cell.is-holiday { background: repeating-linear-gradient(135deg, rgba(245,158,11,.07) 0 8px, rgba(245,158,11,.13) 8px 16px); }
.load-off.is-holiday { color: #8A5A00; font-weight: 650; text-transform: none; letter-spacing: 0; font-size: 0.6875rem; }
.load-off-tag { display: block; margin-bottom: 3px; padding: 0 6px; border-radius: 4px; background: rgba(23,21,59,.07); color: var(--nx-muted); font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.load-cell.is-holiday .load-off-tag { background: rgba(245,158,11,.2); color: #8A5A00; }

/* ---- Task comments: cards, replies, likes ------------------------------------------------------- */
.cm-compose { display: flex; gap: 0.625rem; margin-bottom: 1rem; align-items: flex-start; }
.cm-compose-box { flex: 1 1 auto; min-width: 0; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r); background: var(--nx-surface); }
.cm-compose-box:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.cm-compose-box textarea { display: block; width: 100%; border: 0; outline: 0; resize: vertical; background: transparent; font: inherit; font-size: 0.875rem; line-height: 1.5; padding: 0.625rem 0.75rem 0.25rem; min-height: 56px; color: var(--nx-ink); }
.cm-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.5rem 0.5rem 0.75rem; }
.cm-hint { font-size: 0.6875rem; color: var(--nx-muted); }
.cm-list { display: grid; gap: 0.875rem; }
.cm { display: flex; gap: 0.625rem; align-items: flex-start; }
.cm-main { flex: 1 1 auto; min-width: 0; }
.cm-bubble { background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: 4px var(--nx-r) var(--nx-r) var(--nx-r); padding: 0.5rem 0.75rem 0.625rem; }
.cm.is-reply .cm-bubble { background: var(--nx-surface, #fff); }
.cm-head { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.8125rem; }
.cm-head strong { font-weight: 650; }
.cm-time { font-size: 0.7188rem; color: var(--nx-muted); }
.cm-bubble .comment-body { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.55; }
.cm-actions { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0 0 0.25rem; }
.cm-react { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--nx-muted); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.cm-react .mud-icon-root { width: 16px; height: 16px; }
.cm-react:hover { background: var(--nx-surface-3); color: var(--nx-ink); }
.cm-react.is-on { background: var(--nx-accent-soft); color: var(--nx-accent); }
.cm-react.is-down.is-on { background: rgba(208,59,59,.1); color: #A32222; }
.cm-link { height: 26px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--nx-muted); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.cm-link:hover { background: var(--nx-surface-3); color: var(--nx-ink); }
.cm-link.is-danger:hover { background: rgba(208,59,59,.1); color: #A32222; }
.cm-replies { margin: 0.5rem 0 0 1.125rem; padding-left: 1rem; border-left: 2px solid var(--nx-ring); display: grid; gap: 0.625rem; }
.cm-reply-box { display: flex; gap: 0.5rem; align-items: flex-start; }
.nx-avatar.is-sm { width: 22px; height: 22px; font-size: 0.5625rem; }

/* ---- Project list: progress ring and task meter ------------------------------------------------ */
.pring { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; }
.pring > svg { position: absolute; inset: 0; }
.pring-track { stroke: #E9EAF6; }
.pring-arc { transition: stroke-dasharray .4s ease; }
.pring-num { position: relative; font-size: 0.7188rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--nx-ink); letter-spacing: -0.01em; }
.pring-num i { font-style: normal; font-size: 0.5625rem; font-weight: 600; color: var(--nx-muted); margin-left: 1px; }
.pring.is-done .pring-track { stroke: #BBF7D0; }
.pring-tick { stroke: #16A34A; }


.ptm { min-width: 150px; max-width: 220px; display: grid; gap: 5px; }
.ptm-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; color: var(--nx-ink); white-space: nowrap; }
.ptm-line b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ptm-of { color: var(--nx-muted); font-size: 0.75rem; }
.ptm-late { padding: 1px 8px; border-radius: 999px; background: rgba(208,59,59,.1); color: #A32222; font-size: 0.6875rem; font-weight: 650; }
.ptm-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: #E9EAF6; }
.ptm-bar i { display: block; height: 100%; }
.ptm-done { background: #4338CA; }
.ptm-open { background: #B7BBF8; }
.ptm-lateb { background: #E5484D; }

/* ---- MultiPicker: a filter with several ticks, the ticked ones listed first ---------------------- */
.mp { position: relative; display: inline-block; }
.mp-trigger {
    display: inline-flex; align-items: center; gap: 0.375rem; height: 40px; min-width: 150px; padding: 0 0.5rem 0 0.875rem;
    border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r); background: var(--nx-surface);
    font: inherit; font-size: 0.9063rem; color: var(--nx-muted); cursor: pointer; text-align: left;
}
.mp-trigger:hover { border-color: var(--nx-400); }
.mp-trigger:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
.mp-trigger.has-sel { color: var(--nx-ink); font-weight: 560; border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.mp-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-count { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--nx-accent); color: #fff; font-size: 0.6875rem; font-weight: 700; }
.mp-caret { flex: 0 0 auto; margin-left: auto; opacity: .7; }
.mp-scrim { position: fixed; inset: 0; z-index: 1190; }
.mp-panel {
    position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0; width: 300px; max-width: calc(100vw - 24px);
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); box-shadow: 0 14px 40px rgba(23,21,59,.2); overflow: hidden;
}
.mp.align-right .mp-panel { left: auto; right: 0; }
.mp-search-row { padding: 0.5rem; border-bottom: 1px solid var(--nx-ring); }
.mp-search { width: 100%; height: 34px; padding: 0 0.625rem; font: inherit; font-size: 0.8438rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); background: var(--nx-surface, #fff); }
.mp-search:focus { outline: none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.mp-body { max-height: 320px; overflow-y: auto; padding-bottom: 0.25rem; }
.mp-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nx-muted); }
.mp-clear { border: 0; background: none; font: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--nx-accent); cursor: pointer; }
.mp-clear:hover { text-decoration: underline; }
.mp-row { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.4375rem 0.75rem; border: 0; background: none; font: inherit; font-size: 0.875rem; color: var(--nx-ink); text-align: left; cursor: pointer; }
.mp-row:hover, .mp-row:focus-visible { background: var(--nx-surface-2); outline: none; }
.mp-row.is-on { background: var(--nx-accent-soft); }
.mp-row.is-on:hover { background: var(--nx-accent-soft-2); }
.mp-box { flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; border: 1.5px solid var(--nx-ring-strong); border-radius: 5px; background: var(--nx-surface, #fff); color: #fff; }
.mp-row.is-on .mp-box { background: var(--nx-accent); border-color: var(--nx-accent); }
.mp-box .mud-icon-root { width: 14px; height: 14px; }
.mp-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-row small { flex: 0 0 auto; color: var(--nx-muted); font-size: 0.7188rem; }
.mp-none { padding: 1rem 0.75rem; font-size: 0.8125rem; color: var(--nx-muted); text-align: center; }

/* Client portal (public page) and its management page */
.pt-page { min-height:100vh; background:#F4F5FA; color:#14162E; font-family:var(--nx-font, Inter, sans-serif); }
.pt-head { display:flex; align-items:center; gap:10px; padding:14px 20px; font-weight:700; font-size:1.2rem; background:#17153B; color:#fff; }
.pt-head img { width:30px; height:30px; } .pt-360 { color:#A9AAFB; }
.pt-main { max-width:760px; margin:0 auto; padding:20px 16px 40px; }
.pt-title { margin:6px 0 0; font-size:1.7rem; } .pt-asof { color:#4A5069; margin-bottom:14px; font-size:.9rem; }
.pt-card { background:#fff; border:1px solid #E4E6F0; border-radius:14px; padding:16px; margin-bottom:12px; }
.pt-card h2 { margin:0 0 8px; font-size:1rem; }
.pt-note { background:#EEF0FF; border-color:#D5D9FA; }
.pt-gone { text-align:center; margin-top:60px; }
.pt-pct { font-size:2.4rem; font-weight:700; } .pt-pct span { font-size:1.2rem; } .pt-pct small { font-size:.85rem; font-weight:400; color:#4A5069; margin-left:8px; }
.pt-bar { height:12px; border-radius:8px; background:#E4E6F0; overflow:hidden; margin-top:8px; } .pt-bar div { height:100%; background:#4338CA; }
.pt-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #F2F3F9; align-items:center; }
.pt-row:last-child { border-bottom:0; } .pt-row small { color:#4A5069; }
.pt-stage { display:flex; gap:10px; align-items:center; white-space:nowrap; color:#4A5069; font-size:.85rem; }
.pt-btn { min-height:40px; padding:0 16px; border:0; border-radius:10px; background:var(--nx-accent, #4338CA); color:#fff; font-weight:600; cursor:pointer; }
.pt-who { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; font-size:.9rem; }
.pt-who input { font:inherit; padding:10px; border:1px solid #CDD1E0; border-radius:8px; }
.pt-msg { background:#ECFDF3; border:1px solid #ABEFC6; padding:8px 12px; border-radius:8px; margin-bottom:8px; }
.pt-foot { text-align:center; color:#667085; font-size:.78rem; padding:20px; }
.pp-url { width:100%; font:inherit; padding:8px; margin:8px 0; border:1px solid var(--mud-palette-lines-inputs); border-radius:8px; background:transparent; color:inherit; }
.pp-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pp-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.pp-nocopy { font-size:.78rem; max-width:240px; }
@media (max-width: 640px) { .pp-row { flex-direction:column; align-items:stretch; } .pp-actions { justify-content:flex-start; } }
.pp-meta { font-size:.8rem; }
.pp-badge { margin-left:8px; font-size:.72rem; padding:1px 8px; border-radius:999px; }
.pp-badge.on { background:#DCFCE7; color:#166534; } .pp-badge.off { background:#F2F4F7; color:#475467; }
/* Project › Customer portal (portal logins, 2026-11): the people who can open the project, and the form that gives an old link's holder a login. */
.pp-person { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--nx-ring); }
.pp-person .pp-badge { margin-left:0; }
.pp-main { min-width:0; flex:1 1 auto; }
.pp-invite { display:grid; gap:8px; max-width:420px; margin-top:10px; }
.pp-invite-actions { justify-content:flex-start; }

/* Client activity */
.ca-list { display:flex; flex-direction:column; }
.ca-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--nx-line, #F2F3F9); font-size:.88rem; }
.ca-date { width:92px; flex:none; color:var(--mud-palette-text-secondary); font-size:.78rem; }
.ca-dot { width:9px; height:9px; border-radius:50%; flex:none; background:#9498B5; }
.ca-deal { background:#6366F1; } .ca-quotation { background:#0EA5E9; } .ca-contract { background:#D97706; }
.ca-project { background:#059669; } .ca-payment { background:#16A34A; } .ca-contact { background:#BE185D; }

/* Excel import / export */
.tx-bar { display:flex; gap:10px; margin:2px 0 4px; }
.tx-panel { padding:12px; margin:6px 0 10px; display:flex; flex-direction:column; gap:8px; font-size:.85rem; }
.tx-result ul { margin:4px 0 0 18px; padding:0; }
.sf-btn { background:none; border:0; cursor:pointer; color:var(--mud-palette-primary); font:inherit; font-size:.8rem; padding:3px 8px; }

/* My day (phone-friendly) */
.md-wrap { max-width: 640px; margin: 0 auto; }
.md-title { margin: 0; font-size: 1.6rem; }
.md-sub { color: var(--mud-palette-text-secondary); margin-bottom: 14px; }
.md-sec h2 { font-size: .95rem; margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.md-late h2 { color: #B42318; }
.md-card { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface); }
.md-link { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.md-name { font-weight: 600; overflow-wrap: anywhere; }
.md-meta { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.md-done { min-height: 44px; min-width: 76px; border: 0; border-radius: 10px; background: #047857; color: #fff; font-weight: 600; cursor: pointer; }
.md-empty { padding: 28px; text-align: center; color: var(--mud-palette-text-secondary); }


/* ---- Dark mode (switched on by the menu under your name; remembered in this browser) ---- */
html[data-theme="dark"] {
    color-scheme: dark;
    --nx-plane: #11131F;
    --nx-surface: #1C1F33;
    --nx-surface-2: #212540;
    --nx-surface-3: #2A2F4D;
    --nx-ring: rgba(255, 255, 255, 0.09);
    --nx-ring-strong: rgba(255, 255, 255, 0.16);
    --nx-ink: #E6E8F5;
    --nx-ink-2: #B3B8D3;
    --nx-muted: #9EA4C2;   /* 4.6:1 or better on every dark surface */
    --nx-grid: #2D3250;
    --nx-baseline: #444B72;
    --nx-soft: #23273D;
    --nx-line: #2D3250;
    --mud-palette-primary: #8B8CF5;
    --mud-palette-background: #11131F;
    --mud-palette-background-gray: #171A2B;
    --mud-palette-surface: #1C1F33;
    --mud-palette-appbar-background: #151828E6;
    --mud-palette-appbar-text: #E6E8F5;
    --mud-palette-text-primary: #E6E8F5;
    --mud-palette-text-secondary: #A5ABC8;
    --mud-palette-text-disabled: #6C7290;
    --mud-palette-action-default: #A5ABC8;
    --mud-palette-lines-default: #2D3250;
    --mud-palette-lines-inputs: #3A4064;
    --mud-palette-table-lines: #2D3250;
    --mud-palette-table-hover: #23273D;
    --mud-palette-table-striped: #1F2236;
    --mud-palette-divider: #2D3250;
    --mud-palette-divider-light: #262A44;
    --mud-palette-drawer-background: #0C0D18;
    --mud-palette-overlay-dark: rgba(0,0,0,.6);
    --mud-palette-gray-light: #23273D;
    --mud-palette-gray-lighter: #1F2236;
}
html[data-theme="dark"] .nx-appbar { background: rgba(21, 24, 40, 0.85) !important; }
html[data-theme="dark"] .nx-project-hero { background: linear-gradient(115deg, #1C1F33 0%, #212540 58%, #2A2F4D 100%); }
html[data-theme="dark"] .project-log-head .mud-typography-h6 { color: #E6E8F5; }
html[data-theme="dark"] .task-del-no { background: #2A2F4D; color: #E6E8F5; }
html[data-theme="dark"] body { background: #11131F; color: #E6E8F5; }
html[data-theme="dark"] .nx-user-pop { border-color: rgba(255,255,255,.12); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
html[data-theme="dark"] .nx-user-pop-item:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .nx-user-pop-sep { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .rp-paper { background: #fff; color: #222; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color: #E6E8F5; }
html[data-theme="dark"] .mud-input-slot, html[data-theme="dark"] .mud-input-control > .mud-input-control-input-container > .mud-input { color: #E6E8F5; }
html[data-theme="dark"] body:not(:has(.lp-header, .pp-side, .pp-bare)) a { color: #A9AAFB; }
html[data-theme="dark"] .mud-nav-link, html[data-theme="dark"] .nx-user-pop-item, html[data-theme="dark"] .md-link, html[data-theme="dark"] .sf-apply { color: inherit; }

/* Keyboard shortcut list and recently viewed */
.nx-keyhelp { position: fixed; inset: 0; z-index: 3000; background: rgba(10,10,30,.5); display: flex; align-items: center; justify-content: center; }
.nx-keyhelp-card { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-radius: 14px; padding: 18px 22px; min-width: 300px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.nx-keyhelp-card h2, .nx-keyhelp-card h3 { margin: 0 0 10px; font-size: 1.17em; font-weight: 700; }
.nx-keyhelp-row { display: flex; justify-content: space-between; gap: 24px; padding: 4px 0; font-size: .9rem; }
.nx-keyhelp-row kbd { background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); border-radius: 5px; padding: 1px 6px; font-size: .8rem; }

.nx-keyhelp-card { max-height: calc(100vh - 48px); overflow-y: auto; max-width: min(560px, calc(100vw - 32px)); }
.nx-keyhelp-card h3 { margin: 14px 0 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); }
.nx-keyhelp-off { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--nx-accent-soft); font-size: .85rem; }

/* ---- Keyboard-first: the command menu (Ctrl+K), key hints and the J/K cursor (js/nx-keys.js, Shared/CommandMenu.razor) ---- */
.nx-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; padding: 0 5px; height: 1.35em; border: 1px solid var(--nx-ring-strong, #D0D5DD); border-bottom-width: 2px; border-radius: 5px; background: var(--nx-surface, #fff); color: var(--nx-ink-2, #475467); font: 600 .66rem/1 var(--nx-font); letter-spacing: 0; vertical-align: middle; direction: ltr; }
.nx-kbd-hint { display: inline-flex; gap: 2px; margin-inline-start: 4px; opacity: .8; vertical-align: middle; }
.nx-kbd-hint .nx-kbd { height: 1.25em; font-size: .62rem; }
html[data-nx-keys="off"] .nx-kbd-hint { display: none; }
@media (hover: none) and (pointer: coarse) { .nx-kbd-hint, .cmdk-keys, .cmdk-foot, .cmdk-esc { display: none !important; } }
.nb.nx-cmdk-wrap { margin-right: .25rem; }

.cmdk-scrim { position: fixed; inset: 0; z-index: 2900; background: rgba(10, 10, 30, .38); }
.cmdk { position: fixed; z-index: 2901; top: 12vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: 72vh; display: flex; flex-direction: column;
        background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary); border: 1px solid var(--nx-ring); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 18, 40, .32); overflow: hidden; }
.cmdk-crumb { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; font-size: .78rem; font-weight: 600; color: var(--nx-muted); }
.cmdk-back { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 7px; background: var(--nx-surface-2, #F2F4F7); color: inherit; cursor: pointer; }
.cmdk-back:hover { background: var(--nx-surface-3, #E4E7EC); }
[dir="rtl"] .cmdk-back svg { transform: scaleX(-1); }
.cmdk-crumb-target { margin-inline-start: auto; padding: 2px 8px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-accent); }
.cmdk-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--nx-ring); }
.cmdk-box-icon { color: var(--nx-muted); flex: none; }
.cmdk-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; color: inherit; font: 500 1rem var(--nx-font); padding: 4px 0; }
.cmdk-input::placeholder { color: var(--nx-muted); }
.cmdk-esc { flex: none; padding: 2px 7px; border: 1px solid var(--nx-ring); border-radius: 6px; color: var(--nx-muted); font: 600 .68rem var(--nx-font); }
.cmdk-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.cmdk-group { padding: 10px 10px 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); }
.cmdk-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 10px; border-radius: 9px; cursor: pointer; color: var(--nx-ink); }
.cmdk-item.is-active { background: var(--nx-accent-soft); }
.cmdk-item.is-active .cmdk-item-icon { color: var(--nx-accent); }
.cmdk-item-icon { flex: none; color: var(--nx-muted); }
.cmdk-item-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.cmdk-item-title { font-size: .875rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-sub { font-size: .76rem; color: var(--nx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-current { flex: none; color: var(--nx-accent); }
.cmdk-item-more { flex: none; color: var(--nx-muted); }
[dir="rtl"] .cmdk-item-more { transform: scaleX(-1); }
.cmdk-keys { flex: none; display: inline-flex; gap: 3px; }
.cmdk-empty { padding: 22px 12px; text-align: center; color: var(--nx-muted); font-size: .875rem; }
.cmdk-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--nx-ring); font-size: .72rem; color: var(--nx-muted); }
.cmdk-foot kbd { margin-inline-end: 2px; padding: 0 4px; border: 1px solid var(--nx-ring); border-radius: 4px; font: 600 .66rem var(--nx-font); }
@media (max-width: 640px) {
    .cmdk { top: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
    .cmdk-item { min-height: 46px; }
    .cmdk-item-body { flex-direction: column; align-items: flex-start; gap: 0; }
}
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="reduce"]) .cmdk { animation: cmdk-in .14s ease-out; } }
@keyframes cmdk-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.985); } to { opacity: 1; transform: translateX(-50%); } }

/* The row or card picked with J/K, and cards ticked with X on a board (rows tick their own checkbox). */
[data-kb-task].is-kb-cursor { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
[data-kb-task]:focus { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.kanban-card.is-kb-picked { box-shadow: 0 0 0 2px var(--nx-accent), 0 4px 12px rgba(67, 56, 202, .18); background: var(--nx-accent-soft); }
.nx-recent { margin: 4px 0; }
.nx-recent-cap { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .55; padding: 6px 10px 2px; }
.nx-recent-item { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
html[data-theme="dark"] .mud-tabs-toolbar, html[data-theme="dark"] .mud-tabs-tabbar, html[data-theme="dark"] .mud-tabs-toolbar-content { background: var(--nx-surface) !important; }
html[data-theme="dark"] .mud-tab { color: var(--nx-ink-2); }
html[data-theme="dark"] .mud-tab.mud-tab-active { color: #A9AAFB; }
html[data-theme="dark"] .mud-tabs-scroll-button { color: var(--nx-ink-2); }

/* Saved filters strip */
.sf-strip { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0; }
.sf-chip { display:inline-flex; border:1px solid var(--mud-palette-lines-default); border-radius:999px; overflow:hidden; font-size:.8rem; }
.sf-apply, .sf-del, .sf-btn { background:none; border:0; cursor:pointer; color:inherit; font:inherit; }
.sf-apply { padding:3px 8px 3px 12px; font-weight:500; }
.sf-del { padding:3px 8px; opacity:.55; }
.sf-del:hover { opacity:1; }
.sf-btn { font-size:.8rem; padding:3px 8px; color:var(--mud-palette-primary); }
.sf-name { font:inherit; font-size:.8rem; padding:3px 8px; border:1px solid var(--mud-palette-lines-default); border-radius:6px; background:transparent; color:inherit; }
.sr-kind { background:none; border:1px solid var(--mud-palette-lines-default); border-radius:999px; padding:2px 10px; font-size:.8rem; cursor:pointer; color:inherit; }
.sr-kind.on { background:var(--mud-palette-primary); color:#fff; border-color:var(--mud-palette-primary); }
a.sr-kind { display:inline-block; text-decoration:none; }
.sr-kind span { opacity:.7; margin-left:3px; }

/* Project budget tab */
.bg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px; }
.bg-card { border:1px solid var(--mud-palette-lines-default); border-radius:10px; padding:10px 12px; }
.bg-cap { font-size:.75rem; color:var(--mud-palette-text-secondary); }
.bg-num { font-size:1.15rem; font-weight:600; }
.bg-of { font-size:.75rem; font-weight:400; color:var(--mud-palette-text-secondary); }
.bg-bar { height:10px; border-radius:6px; background:var(--mud-palette-lines-default); overflow:hidden; }
.bg-bar > div { height:100%; background:#1F7A50; }
.bg-bar.bg-close > div { background:#C98A00; }
.bg-bar.bg-over > div { background:#A32222; }
.bg-note { font-size:.85rem; margin-top:6px; }
.bg-warn { margin-top:8px; padding:8px 10px; border-radius:8px; background:rgba(201,138,0,.12); font-size:.85rem; }
.bg-r { text-align:right; }
.bg-rate { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:2px 0; }

/* Client report page */
.rp-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.rp-layout { display:grid; grid-template-columns: 330px 1fr; gap:16px; align-items:start; }
.rp-side { border:1px solid var(--mud-palette-lines-default); border-radius:10px; }
.rp-hist { font-size:.8rem; margin-bottom:6px; }
.rp-subject { font-size:.85rem; color:var(--mud-palette-text-secondary); margin-bottom:6px; }
.rp-paper { background:#fff; color:#222; border:1px solid var(--mud-palette-lines-default); border-radius:10px; padding:16px; overflow:auto; }
@media (max-width: 900px) { .rp-layout { grid-template-columns: 1fr; } }
@media print {
  .mud-appbar, .mud-drawer, .rp-side, .rp-head, .rp-subject { display:none !important; }
  .mud-main-content { padding:0 !important; margin:0 !important; }
  .rp-layout { display:block; }
  .rp-paper { border:none; padding:0; }
}

/* ---- Leave ------------------------------------------------------------------------------------------ */
.lv { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.lv-main { display: grid; gap: 1rem; min-width: 0; }
.lv-card { padding: 1rem 1.25rem; }
.lv-card h2 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.lv-card h2 small { font-weight: 500; color: var(--nx-muted); font-size: 0.75rem; }
.lv-card.is-attention { border-color: rgba(245,165,36,.5); background: linear-gradient(0deg, #fff, #fffaf0); }
.lv-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: #F5A524; color: #fff; font-size: 0.6875rem; }
.lv-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid #F2F3F9; }
.lv-row.is-compact { padding: 0.5rem 0; }
.lv-who { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.lv-name { font-size: 0.875rem; font-weight: 650; }
.lv-kind { margin-left: 0.375rem; padding: 1px 8px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: 0.6875rem; font-weight: 600; }
.lv-dates { font-size: 0.8125rem; color: var(--nx-muted); }
.lv-reason { font-size: 0.8125rem; color: var(--nx-ink-2); font-style: italic; }
.lv-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lv-note { height: 32px; width: 200px; padding: 0 0.625rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); font: inherit; font-size: 0.8125rem; }
.lv-side { display: flex; align-items: center; gap: 0.5rem; }
.lv-status { padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 650; }
.lv-status.is-pending { background: rgba(245,165,36,.18); color: #8A5A00; } .lv-status.is-approved { background: rgba(46,158,107,.15); color: #1F7A50; }
.lv-status.is-rejected { background: rgba(208,59,59,.1); color: #A32222; } .lv-status.is-cancelled { background: var(--nx-surface-3); color: var(--nx-muted); }
.lv-none { padding: 0.75rem 0; font-size: 0.8125rem; color: var(--nx-muted); }
.lv-days { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--nx-r); background: var(--nx-accent-soft); font-size: 0.8125rem; }
.lv-form { position: sticky; top: 0.75rem; }
.lv-dates.is-alert { color: #A32222; font-weight: 600; }
html[data-theme="dark"] .lv-dates.is-alert { color: #FCA5A5; }
.load-off.is-leave { color: #1F7A50; font-weight: 650; text-transform: none; letter-spacing: 0; font-size: 0.6875rem; }
@media (max-width: 960px) { .lv { grid-template-columns: minmax(0, 1fr); } .lv-form { position: static; order: -1; } }

.tpl-opts { display: grid; gap: 0.375rem; margin-top: 0.5rem; }

/* Receipt and bill reading (#385 G12): the "Read a receipt" card on Expenses and the supplier bill form, and Settings > Receipt reading. */
.rr-card h2 .mud-icon-root { color: var(--nx-accent); }
.rr-note { margin-top: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--nx-r); background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: 0.8125rem; }
.rr-list { display: grid; margin-top: 0.5rem; }
.rr-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-top: 1px solid var(--nx-ring); min-width: 0; }
.rr-item.is-selected { background: var(--nx-accent-soft); margin: 0 -0.5rem; padding: 0.5rem; border-radius: var(--nx-r-sm); border-top-color: transparent; }
.rr-item-main { flex: 1 1 auto; min-width: 0; }
.rr-item-main .lv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-kind { color: var(--nx-muted); flex: none; }
.rr-check { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--nx-ring); }
.rr-preview img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: var(--nx-r-sm); border: 1px solid var(--nx-ring); background: var(--nx-surface-2); }
.rr-preview .lv-dates { margin-top: 0.375rem; }
.rr-pdf { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; border-radius: var(--nx-r-sm); border: 1px dashed var(--nx-ring-strong); color: var(--nx-accent); font-weight: 600; text-decoration: none; }
.rr-intro { font-size: 0.8125rem; color: var(--nx-ink-2); margin-bottom: 0.5rem; }
.rr-fields { min-width: 0; }
.rr-field { display: grid; grid-template-columns: auto minmax(90px, auto) minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.625rem; padding: 0.4375rem 0; border-bottom: 1px solid var(--nx-ring); cursor: pointer; }
.rr-field input { margin: 0; accent-color: var(--nx-accent); }
.rr-field-label { font-size: 0.75rem; font-weight: 600; color: var(--nx-ink-2); }
.rr-field-value { font-size: 0.875rem; font-weight: 650; overflow-wrap: anywhere; }
.rr-why { grid-column: 3 / -1; font-size: 0.75rem; color: var(--nx-muted); }
.rr-sure { padding: 1px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 650; white-space: nowrap; }
.rr-sure.is-high { background: rgba(46,158,107,.15); color: #1F7A50; }
.rr-sure.is-medium { background: rgba(245,165,36,.18); color: #8A5A00; }
.rr-sure.is-low { background: rgba(208,59,59,.1); color: #A32222; }
.rr-alt, .rr-existing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; padding: 0.375rem 0 0.5rem; }
.rr-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); color: var(--nx-ink); font: inherit; font-size: 0.75rem; cursor: pointer; }
.rr-chip:hover { border-color: var(--nx-accent); }
.rr-chip input { margin: 0; accent-color: var(--nx-accent); }
.rr-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0.5rem; }
.rr-lines summary { cursor: pointer; font-size: 0.8125rem; color: var(--nx-ink-2); }
.rr-lines ol { margin: 0.5rem 0 0; padding-inline-start: 2.25rem; font-family: var(--nx-mono); font-size: 0.75rem; color: var(--nx-ink-2); max-height: 260px; overflow: auto; }
.rr-lines li.is-used { background: rgba(250, 204, 21, .22); color: var(--nx-ink); border-radius: 3px; }
.rr-tag { margin-inline-start: 0.375rem; padding: 0 6px; border-radius: 999px; background: var(--nx-accent); color: #fff; font-family: var(--nx-font); font-size: 0.625rem; font-weight: 650; }
.rr-filled .cm-link { margin-inline-start: 0.25rem; }
.rr-warn { margin-top: 0.25rem; color: #8A5A00; font-weight: 600; }
.rr-bill { margin-bottom: 1rem; }
.rr-bill .rr-existing { padding: 0.25rem 0.25rem 0; }
.rr-stats { margin-bottom: 1rem; }
.rr-settings .pf-check { margin-bottom: 0.5rem; }
.rr-langs .pf-check { display: flex; }
.rr-engine { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--nx-r); font-size: 0.8125rem; }
.rr-engine.is-ok { background: rgba(46,158,107,.1); color: #1F7A50; }
.rr-engine.is-off { background: rgba(245,165,36,.14); color: #8A5A00; }
.rr-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rr-search { max-width: 320px; margin-bottom: 0.5rem; }
.rr-filter { width: auto; min-width: 180px; }
.rr-table-wrap { overflow-x: auto; }
.rr-table-wrap table { width: 100%; border-collapse: collapse; }
.rr-table-wrap th, .rr-table-wrap td { text-align: start; padding: 0.5rem 0.625rem; vertical-align: top; }
.rr-table-wrap td { border-bottom: 1px solid var(--nx-ring); font-size: 0.8125rem; }
.set-form.rr-wide { max-width: none; }
.rr-bill { max-width: 980px; }
html[data-theme="dark"] .rr-sure.is-high, html[data-theme="dark"] .rr-engine.is-ok { color: #6EE7B7; }
html[data-theme="dark"] .rr-sure.is-medium, html[data-theme="dark"] .rr-engine.is-off, html[data-theme="dark"] .rr-warn { color: #FCD34D; }
html[data-theme="dark"] .rr-sure.is-low { color: #FCA5A5; }
html[data-theme="dark"] .rr-lines li.is-used { background: rgba(250, 204, 21, .18); }
@media (max-width: 640px) {
    .rr-check { grid-template-columns: minmax(0, 1fr); }
    .rr-preview img { max-height: 260px; }
    .rr-field { grid-template-columns: auto minmax(0, 1fr) auto; }
    .rr-field-value { grid-column: 2 / -1; }
    .rr-why { grid-column: 2 / -1; }
}


/* ---- Timesheet --------------------------------------------------------------------------------------- */
.ts-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--nx-ring); margin-bottom: 0.875rem; }
.ts-tab { padding: 0.5rem 1rem; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--nx-muted); cursor: pointer; }
.ts-tab.is-on { color: var(--nx-accent); border-bottom-color: var(--nx-accent); }
.ts-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.ts-week { font-weight: 700; min-width: 190px; text-align: center; }
.ts-banner { padding: 0.625rem 0.875rem; border-radius: var(--nx-r); margin-bottom: 0.75rem; font-size: 0.8438rem; background: var(--nx-surface-2); border: 1px solid var(--nx-ring); }
.ts-banner.is-submitted { background: rgba(245,165,36,.14); border-color: rgba(245,165,36,.4); color: #6B4500; }
.ts-banner.is-approved { background: rgba(46,158,107,.12); border-color: rgba(46,158,107,.35); color: #1F7A50; }
.ts-banner.is-rejected { background: rgba(208,59,59,.08); border-color: rgba(208,59,59,.3); color: #A32222; }
.ts-card { padding: 0.5rem 1rem 1rem; margin-bottom: 0.875rem; }
.ts-scroll { overflow-x: auto; }
.ts-grid { width: 100%; border-collapse: collapse; font-size: 0.8438rem; }
.ts-grid th, .ts-grid td { padding: 0.5rem 0.375rem; border-bottom: 1px solid #F2F3F9; }
.ts-grid th { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-muted); text-align: right; }
.ts-grid th.ts-l, .ts-grid td.ts-l { text-align: left; min-width: 220px; }
.ts-grid .num { text-align: right; }
.ts-grid .is-off { background: repeating-linear-gradient(135deg, rgba(23,21,59,.025) 0 8px, rgba(23,21,59,.06) 8px 16px); }
.ts-date { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ts-off { font-size: 0.5938rem; font-weight: 700; color: #8A5A00; letter-spacing: 0.05em; }
.ts-proj { font-weight: 650; } .ts-task { font-size: 0.75rem; color: var(--nx-muted); }
.ts-in { width: 58px; height: 32px; padding: 0 6px; text-align: right; border: 1px solid transparent; border-radius: var(--nx-r-sm); background: var(--nx-surface-2); font: inherit; font-variant-numeric: tabular-nums; }
.ts-in:hover { border-color: var(--nx-ring-strong); } .ts-in:focus { outline: none; border-color: var(--nx-accent); background: #fff; box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.ts-ro { display: inline-block; width: 58px; padding-right: 6px; font-variant-numeric: tabular-nums; }
.ts-grid tfoot td { border-top: 2px solid var(--nx-ring); border-bottom: 0; }
.ts-add { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; padding-top: 0.75rem; }
.ts-add .set-input { width: auto; min-width: 220px; }
.ts-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.8438rem; color: var(--nx-ink-2); }
.ts-person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; }
.ts-team td, .ts-team th { padding: 0.625rem 0.5rem; }

/* Compact import/export */
.tx-right { display:flex; justify-content:flex-end; margin:-4px 0 4px; }
.tx-float { position:fixed; top:140px; right:24px; z-index:1500; padding:10px 28px 10px 12px; max-width:380px; font-size:.82rem; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.tx-float ul { margin:4px 0 0 16px; padding:0; }
.tx-x { position:absolute; top:2px; right:6px; background:none; border:0; font-size:1.1rem; cursor:pointer; color:inherit; }
.cr-Draft, .cr-Withdrawn { background:#E5E7EB; color:#374151; } .cr-Proposed { background:#FEF3C7; color:#92400E; } .cr-Approved { background:#DCFCE7; color:#166534; } .cr-Rejected { background:#FEE2E2; color:#991B1B; }
.pt-change small { display:block; color:#4A5069; } .pt-btn-no { background:#6B7280; margin-left:6px; }


/* Risk register */
.rk-form { padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; } .rk-grid { display:flex; flex-wrap:wrap; gap:10px; font-size:.82rem; } .rk-grid label { display:flex; flex-direction:column; gap:2px; } .rk-grid select, .rk-grid input { font:inherit; padding:4px 6px; border:1px solid var(--mud-palette-lines-inputs); border-radius:8px; background:transparent; color:inherit; } .rk-actions { display:flex; gap:8px; }
.rk-row { display:flex; align-items:flex-start; gap:12px; padding:10px 2px; border-top:1px solid var(--nx-line,#F2F3F9); } .rk-row.is-closed { opacity:.55; }
.rk-score { flex:none; width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; } .rk-High { background:#FEE2E2; color:#991B1B; } .rk-Medium { background:#FEF3C7; color:#92400E; } .rk-Low { background:#DCFCE7; color:#166534; }
.rk-main { flex:1; } .rk-sub { font-size:.8rem; color:var(--mud-palette-text-secondary); }

/* Roadmap and milestones */
.rm-top { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px; } .rm-next { padding:12px 14px; flex:1; min-width:280px; } .rm-range { display:flex; gap:6px; }
.rm-over { margin-left:8px; font-size:.75rem; color:#B42318; font-weight:600; }
.rm-up { display:flex; gap:10px; align-items:baseline; padding:4px 0; font-size:.88rem; } .rm-date { width:56px; color:var(--mud-palette-text-secondary); font-size:.8rem; } .rm-up small { color:var(--mud-palette-text-secondary); }
.rm-wrap { overflow:auto; padding:6px 10px; } .rm-row { display:flex; align-items:center; min-height:38px; border-top:1px solid var(--nx-line,#F2F3F9); } .rm-head { border-top:0; min-height:26px; }
.rm-label { width:200px; flex:none; padding-right:10px; display:flex; flex-direction:column; line-height:1.2; font-size:.85rem; } .rm-label small { color:var(--mud-palette-text-secondary); font-size:.7rem; }
.rm-track { position:relative; flex:1; min-width:560px; height:30px; }
/* A long roadmap scrolls sideways with the project names staying on the left (like the Gantt's task column). */
.rm-row { min-width:100%; width:max-content; }
.rm-label { position:sticky; inset-inline-start:0; z-index:3; background:var(--nx-surface, #fff); align-self:stretch; justify-content:center; }
.rm-month { position:absolute; top:4px; font-size:.7rem; color:var(--mud-palette-text-secondary); border-left:1px solid var(--nx-line,#E4E6F0); padding-left:4px; height:100%; }
.rm-bar { position:absolute; top:6px; height:18px; border-radius:5px; background:#C7D2FE; color:#312E81; font-size:.68rem; overflow:hidden; white-space:nowrap; padding:0 5px; line-height:18px; } .rm-Active { background:#A5B4FC; } .rm-Closed { background:#BBF7D0; color:#14532D; } .rm-NotStarted { background:#E5E7EB; color:#374151; }
.rm-dia { position:absolute; top:8px; width:14px; height:14px; margin-left:-7px; transform:rotate(45deg); background:#4338CA; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2); z-index:2; } .rm-dia.is-done { background:#16A34A; } .rm-dia.is-late { background:#DC2626; }
.rm-today { position:absolute; top:0; bottom:0; width:2px; background:#F59E0B; opacity:.8; z-index:1; }
.rm-k-dia, .rm-k-done, .rm-k-late, .rm-k-bar { display:inline-block; width:12px; height:12px; margin-right:5px; vertical-align:-1px; } .rm-k-dia { background:#4338CA; transform:rotate(45deg) scale(.8); } .rm-k-done { background:#16A34A; transform:rotate(45deg) scale(.8); } .rm-k-late { background:#DC2626; transform:rotate(45deg) scale(.8); } .rm-k-bar { background:#A5B4FC; border-radius:3px; }
.ms-add { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; } .ms-row { display:flex; align-items:center; gap:10px; padding:6px 2px; border-top:1px solid var(--nx-line,#F2F3F9); } .ms-date { width:96px; color:var(--mud-palette-text-secondary); font-size:.85rem; } .ms-name { flex:1; } .ms-row.is-done .ms-name { text-decoration:line-through; opacity:.6; } .ms-row.is-late .ms-date { color:#B42318; }
/* The Roadmap's project-name column: as wide as the person dragged it (GanttResizer Scope="roadmap", js/nx-gantt.js keeps it as --rm-name-w), or folded away. */
.rm-wrap { --rm-name-def: 200px; }
.rm-label { width: var(--rm-name-w, var(--rm-name-def)); max-width: 70vw; min-width: 0; }
.rm-label > a, .rm-label > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-head .rm-label { z-index: 5; }
.rm-head .gantt-resizer { bottom: auto; height: calc(26px + var(--rm-rows, 0) * 38px); }
html.nx-rm-folded .rm-label { width: 24px; }
html.nx-rm-folded .rm-label > :not(.gantt-resizer) { visibility: hidden; }
@media (max-width: 640px) { .rm-wrap { --rm-name-def: 130px; } .rm-label { max-width: 55vw; } }
/* Milestones 2: the work a milestone waits for (ProjectMilestones.razor) and the milestones a task counts towards (TaskMilestoneCard.razor). */
.ms-prog { font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    background: var(--nx-accent-soft, #EEF2FF); color: var(--nx-accent, #4F46E5); }
.ms-prog.is-done { background: rgba(34,165,91,.12); color: #15803D; }
.ms-late { display: inline-flex; color: var(--nx-warning, #d97706); }
.ms-links { margin: 0 0 8px 28px; padding: 10px 12px; border-radius: 10px; background: var(--nx-surface-2); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ms-links-progress { max-width: 360px; }
.ms-links-warn { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: rgba(250,178,25,.12); font-size: .8125rem; }
.ms-links-warn .mud-icon-root { color: var(--nx-warning, #d97706); flex: none; margin-top: 1px; }
.ms-links-warn ul { margin: 4px 0 0; padding-inline-start: 18px; }
.ms-links-auto { display: flex; gap: 8px; align-items: center; font-size: .85rem; cursor: pointer; }
.ms-links-list { list-style: none; margin: 0; padding: 0; }
.ms-links-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--nx-line, #F2F3F9); font-size: .85rem; min-width: 0; }
.ms-links-list li:first-child { border-top: 0; }
.ms-links-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-links-list small { color: var(--nx-muted); white-space: nowrap; }
.ms-kind { flex: none; font-size: .6875rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); }
.ms-links-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ms-links-add .set-input { flex: 1 1 200px; min-width: 0; margin: 0; }
.ms-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-task-list li { display: flex; gap: 10px; align-items: flex-start; }
.ms-task-list .cpl-ms-key { margin-top: 5px; flex: none; }
.ms-task-main { display: flex; flex-direction: column; min-width: 0; }
.ms-task-warn { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; color: var(--nx-warning, #d97706); }
@media (max-width: 640px) { .ms-row { flex-wrap: wrap; } .ms-links { margin-inline-start: 0; } .ms-links-list small { display: none; } }
html[data-theme="dark"] .ms-prog.is-done { background: rgba(34,197,94,.18); color: #86EFAC; }
html[data-theme="dark"] .ms-links-warn { background: rgba(251,191,36,.12); }

/* Capacity heat map */
.cap-legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.78rem; margin-bottom:8px; color:var(--mud-palette-text-secondary); }
.cap-key i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.cap-spacer { flex:1; }
.cap-0 { background:#E5E7EB; color:#6B7280; } .cap-1 { background:#DCFCE7; color:#166534; } .cap-2 { background:#86EFAC; color:#14532D; }
.cap-3 { background:#FDE68A; color:#78350F; } .cap-4 { background:#F87171; color:#7F1D1D; }
.cap-wrap { overflow:auto; padding:8px; }
.cap-grid { border-collapse:separate; border-spacing:3px; width:100%; font-size:.8rem; }
.cap-grid th { font-weight:500; color:var(--mud-palette-text-secondary); padding:4px 2px; white-space:nowrap; }
.cap-name { text-align:left; white-space:nowrap; padding-right:12px; position:sticky; left:0; background:var(--nx-surface,#fff); }
.cap-cell { display:block; text-align:center; padding:6px 0; border-radius:6px; min-width:46px; font-weight:600; }
.cap-total td { padding-top:6px; text-align:center; font-weight:600; } .cap-total .cap-name { text-align:left; }
.cap-find { padding:14px 16px; margin-top:14px; } .cap-find-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0; font-size:.85rem; }
.cap-find-row input { font:inherit; padding:4px 8px; border:1px solid var(--mud-palette-lines-inputs); border-radius:8px; background:transparent; color:inherit; }
.cap-free { display:flex; align-items:baseline; gap:12px; padding:5px 0; border-top:1px solid var(--nx-line,#F2F3F9); } .cap-free span { flex:1; } .cap-free small { color:var(--mud-palette-text-secondary); }

/* Baseline / plan tab */
.bl-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.bl-pick { font-size:.85rem; display:flex; align-items:center; gap:8px; } .bl-pick select { font:inherit; padding:5px 8px; border:1px solid var(--mud-palette-lines-inputs); border-radius:8px; background:transparent; color:inherit; }
.bl-empty { padding:24px; color:var(--mud-palette-text-secondary); }
.bl-late { border-color:#B42318 !important; } .bl-late .bg-num { color:#B42318; }
.bl-tag { font-size:.68rem; padding:0 6px; border-radius:999px; background:var(--nx-surface-3,#eee); margin-left:6px; }
.bl-all { display:block; padding:8px 12px; font-size:.82rem; }

/* Currency settings */
.cur-card { padding: 16px 18px; margin-bottom: 14px; }
.cur-flag { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.cur-flag.is-lg { width: 48px; height: 48px; }
.cur-flag-none { display: inline-flex; align-items: center; justify-content: center; background: var(--nx-surface-3, #eee); font-weight: 600; font-size: .8rem; }
.cur-main { padding-left: 2px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.cur-main-text { flex: 1; min-width: 160px; }
.cur-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }
.cur-main-name { font-size: 1.25rem; } .cur-main-name span { color: var(--mud-palette-text-secondary); font-size: .95rem; margin-left: 6px; }
.cur-main-pick { width: 260px; max-width: 100%; }
.cur-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.cur-status { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.cur-warn { color: #B45309; }
.cur-empty { padding: 14px 4px; color: var(--mud-palette-text-secondary); font-size: .9rem; }
.cur-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--nx-line, #F2F3F9); flex-wrap: wrap; }
.cur-name { display: flex; flex-direction: column; min-width: 130px; flex: 1; line-height: 1.2; }
.cur-name span { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.cur-rate { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.cur-eq { color: var(--mud-palette-text-secondary); }
.cur-val { font-weight: 600; min-width: 56px; text-align: right; }
.cur-input { width: 150px; max-width: 100%; min-width: 0; font: inherit; padding: 5px 8px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px; background: transparent; color: inherit; text-align: right; }
.cur-auto { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; cursor: pointer; color: var(--mud-palette-text-secondary); }
.cur-add { margin-top: 12px; max-width: 320px; }
.cur-save { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 24px; }
/* searchable currency picker */
.cp { position: relative; }
.cp-box { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 10px; background: var(--nx-surface, #fff); }
.cp-input { flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; min-width: 0; }
.cp-pop { position: absolute; z-index: 1400; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow: auto; background: var(--nx-surface, #fff); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.18); padding: 4px; min-width: 260px; }
.cp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.cp-item:hover { background: rgba(23,21,59,.06); } .cp-item span { color: var(--mud-palette-text-secondary); font-size: .85rem; }
.cp-empty { padding: 10px; color: var(--mud-palette-text-secondary); font-size: .85rem; }
html[data-theme="dark"] .cp-item:hover { background: rgba(255,255,255,.08); }

.cap-demand { padding:14px 16px; margin-top:14px; } .cap-num { text-align:center; } .cap-alert { margin:8px 0; padding:8px 12px; border-radius:8px; background:#FEE2E2; color:#7F1D1D; font-size:.88rem; } .cap-ok { margin:8px 0; padding:8px 12px; border-radius:8px; background:#DCFCE7; color:#14532D; font-size:.88rem; }

/* Staffing requests */
.rs-badge { flex:none; font-size:.7rem; font-weight:600; padding:2px 9px; border-radius:999px; height:fit-content; } .rs-Open { background:#FEF3C7; color:#92400E; } .rs-Filled { background:#DCFCE7; color:#166534; } .rs-Declined, .rs-Cancelled { background:#E5E7EB; color:#374151; }
.rs-card { padding:12px 14px; margin-bottom:10px; } .rs-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } .rs-actions { display:flex; gap:4px; } .rs-fits { color:#166534; }

/* Cash-flow forecast */
.fc-assume { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:10px 14px; margin-bottom:12px; font-size:.85rem; } .fc-assume input, .fc-assume select { font:inherit; padding:4px 6px; border:1px solid var(--mud-palette-lines-inputs); border-radius:8px; background:transparent; color:inherit; } .fc-assume input { width:64px; }
.fc-chart { padding:14px 16px; } .fc-legend { display:flex; gap:14px; font-size:.78rem; color:var(--mud-palette-text-secondary); margin-bottom:6px; } .fc-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }
.fc-bars { display:flex; align-items:flex-end; gap:8px; height:200px; } .fc-col { flex:1; display:flex; flex-direction:column; align-items:stretch; height:100%; }
.fc-pair { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; } .fc-bar { width:42%; max-width:26px; border-radius:4px 4px 0 0; min-height:2px; }
.fc-in { background:#16A34A; } .fc-out { background:#94A3B8; } .fc-lab { text-align:center; font-size:.75rem; color:var(--mud-palette-text-secondary); margin-top:4px; } .fc-val { text-align:center; font-size:.7rem; font-weight:600; }

/* Risk register */
.rk-form { padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; } .rk-grid { display:flex; flex-wrap:wrap; gap:10px; font-size:.82rem; } .rk-grid label { display:flex; flex-direction:column; gap:2px; } .rk-grid select, .rk-grid input { font:inherit; padding:4px 6px; border:1px solid var(--mud-palette-lines-inputs); border-radius:8px; background:transparent; color:inherit; } .rk-actions { display:flex; gap:8px; }
.rk-row { display:flex; align-items:flex-start; gap:12px; padding:10px 2px; border-top:1px solid var(--nx-line,#F2F3F9); } .rk-row.is-closed { opacity:.55; }
.rk-score { flex:none; width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; } .rk-High { background:#FEE2E2; color:#991B1B; } .rk-Medium { background:#FEF3C7; color:#92400E; } .rk-Low { background:#DCFCE7; color:#166534; }
.rk-main { flex:1; } .rk-sub { font-size:.8rem; color:var(--mud-palette-text-secondary); }

/* Control room */
.cr-sum { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .cr-note { font-size:.78rem; color:var(--mud-palette-text-secondary); margin-left:6px; }
.cr-chip { border:1px solid var(--mud-palette-lines-default); border-radius:999px; padding:4px 12px; background:transparent; color:inherit; font:inherit; font-size:.85rem; cursor:pointer; } .cr-chip.on { box-shadow:0 0 0 2px var(--mud-palette-primary); }
.cr-r b { color:#B42318; } .cr-a b { color:#B45309; } .cr-g b { color:#15803D; }
.cr-row { display:flex; gap:12px; padding:12px 14px; border-top:1px solid var(--nx-line,#F2F3F9); } .cr-row:first-child { border-top:0; }
.cr-dot { flex:none; width:12px; height:12px; border-radius:50%; margin-top:6px; } .cr-Red { background:#DC2626; } .cr-Amber { background:#F59E0B; } .cr-Green { background:#16A34A; }
.cr-main small { color:var(--mud-palette-text-secondary); } .cr-why { font-size:.85rem; padding:1px 0 1px 12px; position:relative; } .cr-why::before { content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:#9CA3AF; } .cr-wRed::before { background:#DC2626; } .cr-wAmber::before { background:#F59E0B; } .cr-ok { font-size:.82rem; color:var(--mud-palette-text-secondary); }
.cr-chip b { margin-right: 4px; }
/* The storage line on the Usage page: a chip that links to the Storage card on Settings > Billing. */
.us-space { display:inline-flex; align-items:center; gap:6px; text-decoration:none; align-self:center; }
.us-space.cr-r { border-color:#FDA29B; color:#B42318; } .us-space.cr-a { border-color:#FEC84B; color:#B45309; }
html[data-theme="dark"] .us-space.cr-r { color:#FCA5A5; } html[data-theme="dark"] .us-space.cr-a { color:#FCD38A; }

/* ---- Dark mode, second pass: soft colours, tags, banners and cells that were fixed light ---- */
html[data-theme="dark"] {
    --nx-50: #1F2244;
    --nx-100: #272B55;
    --nx-200: #343A78;
    --nx-800: #C7C8FE;
    --nx-900: #E0E1FF;
    --nx-accent-soft: rgba(139, 140, 245, 0.16);
    --nx-accent-soft-2: rgba(139, 140, 245, 0.26);
    --nx-accent-hover: #6D6FE0;
    --nx-ok-soft: rgba(34, 197, 94, 0.16);
    --nx-bad-soft: rgba(239, 68, 68, 0.16);
}
/* green */
html[data-theme="dark"] .nx-tint-green, html[data-theme="dark"] .cap-1, html[data-theme="dark"] .cap-ok, html[data-theme="dark"] .rk-Low,
html[data-theme="dark"] .cr-Approved, html[data-theme="dark"] .rs-Filled, html[data-theme="dark"] .pp-badge.on, html[data-theme="dark"] .pt-msg,
html[data-theme="dark"] .crm-banner.is-won, html[data-theme="dark"] .crm-drop.is-won, html[data-theme="dark"] .rl-group-count.is-all,
html[data-theme="dark"] .rm-Closed, html[data-theme="dark"] .crm-pill.is-green { background: rgba(34, 197, 94, 0.18); color: #86EFAC; border-color: rgba(34, 197, 94, 0.35); }
/* red */
html[data-theme="dark"] .nx-tint-red, html[data-theme="dark"] .cap-alert, html[data-theme="dark"] .rk-High, html[data-theme="dark"] .cr-Rejected,
html[data-theme="dark"] .pm-count, html[data-theme="dark"] .pm-late, html[data-theme="dark"] .pm-ms-date.is-late, html[data-theme="dark"] .rl-tag.is-delete,
html[data-theme="dark"] .crm-banner.is-lost, html[data-theme="dark"] .crm-drop.is-lost, html[data-theme="dark"] .crm-confirm,
html[data-theme="dark"] .nx-health-banner, html[data-theme="dark"] .crm-pill.is-red { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; border-color: rgba(239, 68, 68, 0.35); }
html[data-theme="dark"] .nx-health-banner.is-soft { background: rgba(250, 178, 25, 0.14); color: #FCD38A; border-color: rgba(250, 178, 25, 0.35); }
/* amber */
html[data-theme="dark"] .nx-tint-amber, html[data-theme="dark"] .cap-3, html[data-theme="dark"] .rk-Medium, html[data-theme="dark"] .cr-Proposed,
html[data-theme="dark"] .rs-Open, html[data-theme="dark"] .crm-pill.is-amber { background: rgba(245, 158, 11, 0.2); color: #FCD34D; border-color: rgba(245, 158, 11, 0.4); }
/* blue / violet / teal */
html[data-theme="dark"] .nx-tint-sky, html[data-theme="dark"] .nx-tint-violet, html[data-theme="dark"] .nx-tint-teal, html[data-theme="dark"] .crm-pill.is-blue,
html[data-theme="dark"] .crm-path-step.is-done, html[data-theme="dark"] .pt-note, html[data-theme="dark"] .qc-new-btn,
html[data-theme="dark"] .qc-new-btn:hover:not(:disabled) { background: rgba(139, 140, 245, 0.2); color: #C7C8FE; }
/* grey */
html[data-theme="dark"] .cr-Draft, html[data-theme="dark"] .cr-Withdrawn, html[data-theme="dark"] .rm-NotStarted, html[data-theme="dark"] .cap-0,
html[data-theme="dark"] .rs-Declined, html[data-theme="dark"] .rs-Cancelled, html[data-theme="dark"] .pp-badge.off,
html[data-theme="dark"] .crm-pill.is-grey { background: var(--nx-surface-3); color: var(--nx-ink-2); }
html[data-theme="dark"] .pp-stack, html[data-theme="dark"] .ptm-bar, html[data-theme="dark"] .pt-bar, html[data-theme="dark"] .pay-pct-bar { background: var(--nx-surface-3); }
/* weekends, calendar bars, widgets, save bar, tabs */
html[data-theme="dark"] .cal-day.is-weekend, html[data-theme="dark"] .gantt-grid-col.is-weekend { background: rgba(255, 255, 255, 0.035); }
html[data-theme="dark"] .cal-day.is-today { background: var(--nx-accent-soft); }
html[data-theme="dark"] .cal-bar { background: color-mix(in srgb, var(--bar-c, #64748B) 30%, var(--nx-surface)); border-color: color-mix(in srgb, var(--bar-c, #64748B) 55%, var(--nx-surface)); }
html[data-theme="dark"] .project-widget { background: linear-gradient(145deg, var(--nx-surface), var(--nx-plane)); }
html[data-theme="dark"] .project-widget:hover { border-color: var(--nx-400); }
html[data-theme="dark"] .project-widget-label, html[data-theme="dark"] .project-widget-caption { color: var(--nx-muted); }
html[data-theme="dark"] .rl-savebar { background: rgba(28, 31, 51, 0.94); }
html[data-theme="dark"] .nx-project-tabs > .mud-tabs-tabbar { background: var(--nx-surface); }
html[data-theme="dark"] .nx-project-tabs .mud-tab.mud-tab-active { color: #C7C8FE; background: var(--nx-accent-soft); }
html[data-theme="dark"] .lv-card.is-attention { background: linear-gradient(0deg, var(--nx-surface), rgba(245, 158, 11, 0.1)); }
html[data-theme="dark"] .rl-dirty { color: #FCD34D; }
html[data-theme="dark"] { --nx-bg: #11131F; }
html[data-theme="dark"] .lg-panel { background: #11131F; }
html[data-theme="dark"] .lg-ring span { background: #fff; color: #14162E; }
html[data-theme="dark"] .cal-more { color: #A9AAFB; }
html[data-theme="dark"] .cal-more:hover { color: #C7C8FE; }
/* text colours that were chosen for a light page */
html[data-theme="dark"] .nx-status.is-good { color: #86EFAC; }
html[data-theme="dark"] .nx-status.is-warning { color: #FCD34D; }
html[data-theme="dark"] .nx-status.is-serious { color: #FDBA74; }
html[data-theme="dark"] .nx-status.is-critical, html[data-theme="dark"] .is-late, html[data-theme="dark"] .nx-stat-context.is-alert,
html[data-theme="dark"] .pm-due.is-late, html[data-theme="dark"] .ptm-late { color: #FCA5A5; }
html[data-theme="dark"] .scope-tab.active, html[data-theme="dark"] .scope-tab.active * { color: #C7C8FE; }
html[data-theme="dark"] .project-code { color: #A9AAFB; }
html[data-theme="dark"] { --mud-palette-primary: #7B7CF3; }
html[data-theme="dark"] .ts-tab.is-on, html[data-theme="dark"] .tb-view.active, html[data-theme="dark"] .pay-tab.active,
html[data-theme="dark"] .set-badge.is-default, html[data-theme="dark"] .tp-tab.active, html[data-theme="dark"] .task-tab.active { color: #C7C8FE; }
html[data-theme="dark"] .hol-chip.is-warn, html[data-theme="dark"] .hol-meta.is-warn, html[data-theme="dark"] .due-off-note, html[data-theme="dark"] .cap-hol { color: #FCD34D; }
html[data-theme="dark"] .hol-chip.is-ok { color: #86EFAC; background: rgba(34,197,94,.14); }
html[data-theme="dark"] .hol-danger { color: #FCA5A5; }
html[data-theme="dark"] .cal-holiday, html[data-theme="dark"] .lv-status.is-pending, html[data-theme="dark"] .ts-off, html[data-theme="dark"] .ts-off *,
html[data-theme="dark"] .pp-next.is-action, html[data-theme="dark"] .pp-next.is-action * { color: #FCD34D; }
html[data-theme="dark"] .due, html[data-theme="dark"] .num.due, html[data-theme="dark"] .crm-late, html[data-theme="dark"] .pay-warn { color: #FCA5A5; }
html[data-theme="dark"] .num.good, html[data-theme="dark"] .pp-next.is-done { color: #86EFAC; }
html[data-theme="dark"] .set-cat.cat-open { color: #CBD5E1; }
html[data-theme="dark"] .set-cat.cat-inprogress { color: #7DD3FC; }
html[data-theme="dark"] .set-cat.cat-inreview { color: #C4B5FD; }
html[data-theme="dark"] .set-cat.cat-closed { color: #86EFAC; }
html[data-theme="dark"] .nx-status-legend-item { color: var(--nx-ink-2); }
html[data-theme="dark"] .is-late, html[data-theme="dark"] .overdue-chip, html[data-theme="dark"] .tb-group-late, html[data-theme="dark"] .pri-urgent,
html[data-theme="dark"] .tb-bulk-btn.is-danger, html[data-theme="dark"] .set-danger-title, html[data-theme="dark"] .pay-grid td.calc.due { color: #FCA5A5 !important; }
html[data-theme="dark"] .pp-warn, html[data-theme="dark"] .ts-banner.is-submitted { color: #FCD34D; }

/* ---- Usage & planning board, plan templates ---- */
.us-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; border-bottom: 1px solid var(--nx-ring); }
.us-tab { background: none; border: 0; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--nx-ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.us-tab.on { color: var(--nx-700); border-bottom-color: var(--nx-700); }
.us-count { font-size: .75rem; font-weight: 600; color: var(--nx-muted); }
.us-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #FEE2E2; color: #B42318; font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; }
.us-leave { border-color: var(--nx-ring); }
.us-threshold { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .875rem; color: var(--nx-ink-2); }
.us-threshold .set-input { width: 70px; }
.us-card { overflow-x: auto; padding: 0; }
.us-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.us-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); padding: 10px 12px; border-bottom: 1px solid var(--nx-ring); white-space: nowrap; }
.us-table td { padding: 10px 12px; border-bottom: 1px solid var(--nx-ring); vertical-align: middle; white-space: nowrap; }
.us-table td small { display: block; color: var(--nx-muted); font-size: .75rem; }
.us-row.us-Quiet td:first-child { box-shadow: inset 3px 0 0 #D92D20; }
.us-row.us-NeverSignedIn td:first-child { box-shadow: inset 3px 0 0 #F79009; }
.us-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 650; }
.us-p-r { background: #FEE2E2; color: #B42318; }
.us-p-a { background: #FEF3C7; color: #8A5A00; }
.us-p-g { background: #DCFCE7; color: #166534; }
.us-p-l { background: #E0E7FF; color: #3730A3; }
.us-bar { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--nx-grid, #E3E5F1); vertical-align: middle; overflow: hidden; margin-right: 6px; }
.us-bar i { display: block; height: 100%; background: var(--nx-500); }
.us-late { color: #B42318; font-weight: 600; }
.us-foot { margin-top: 10px; }
.us-create { margin-left: 8px; font-size: .8125rem; font-weight: 650; }
.pn-actions { display: flex; gap: 8px; align-items: center; }
.pn-off td { opacity: .6; }
.pn-offtag { margin-left: 8px; font-size: .7rem; font-weight: 650; padding: 1px 8px; border-radius: 999px; background: var(--nx-soft); color: var(--nx-muted); }
.pn-scroll { overflow-x: auto; margin-top: 8px; }
.pn-grid td, .pn-grid th { padding: 6px 6px; white-space: nowrap; }
.pn-grid .set-input { min-width: 90px; }
.pn-grid .pn-title { min-width: 260px; }
.pn-grid .pn-n { min-width: 64px; width: 72px; }
.pn-grid .pn-dep { min-width: 70px; width: 80px; }
.pn-ms { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.pn-ms .set-input:first-child { flex: 1 1 auto; max-width: 420px; }
.pn-ms label { display: flex; align-items: center; gap: 6px; color: var(--nx-muted); font-size: .875rem; }
.pn-dialog { max-width: 720px; max-height: 90vh; overflow-y: auto; }
.pn-role { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; margin: 6px 0; }
.pn-preview { max-height: 240px; overflow-y: auto; margin: 10px 0; border: 1px solid var(--nx-ring); border-radius: 10px; }
html[data-theme="dark"] .us-badge, html[data-theme="dark"] .us-p-r { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; }
html[data-theme="dark"] .us-p-a { background: rgba(245, 158, 11, 0.2); color: #FCD34D; }
html[data-theme="dark"] .us-p-g { background: rgba(34, 197, 94, 0.18); color: #86EFAC; }
html[data-theme="dark"] .us-p-l { background: rgba(139, 140, 245, 0.2); color: #C7C8FE; }
html[data-theme="dark"] .us-late { color: #FCA5A5; }
html[data-theme="dark"] .us-tab.on { color: #C7C8FE; border-bottom-color: #A9AAFB; }

.pn-wide { max-width: none !important; }
.pn-grid .set-input { font-size: .875rem; }
.pn-grid .pn-who { min-width: 150px; }
.pn-grid .pn-phase { min-width: 110px; }
.pn-grid .pn-pri { min-width: 110px; }
.pn-grid .pn-n { min-width: 88px !important; width: 92px !important; }

/* ---- Profit, lessons and estimates, company overview ---- */
.pr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 14px; }
.pr-card { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 14px; padding: 14px 16px; }
.pr-card.ow-wide { grid-column: span 2; }
@media (max-width: 700px) { .pr-card.ow-wide { grid-column: auto; } }
.pr-cap { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); font-weight: 650; }
.pr-num { font-size: 1.6rem; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }
.pr-sub { font-size: .8125rem; color: var(--nx-ink-2); margin-top: 2px; }
.pr-bad { border-color: #F04438; box-shadow: inset 3px 0 0 #D92D20; }
.pr-warn { border-color: #F79009; box-shadow: inset 3px 0 0 #F79009; }
.pr-r { text-align: right !important; }
.pr-incl { margin-left: auto; align-self: center; font-size: .8125rem; color: var(--nx-ink-2); display: inline-flex; gap: 6px; align-items: center; }
.pr-bar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--nx-grid, #E3E5F1); vertical-align: middle; overflow: hidden; margin-right: 8px; }
.pr-bar i { display: block; height: 100%; }
.pr-b-Green i { background: #12B76A; } .pr-b-Amber i { background: #F79009; } .pr-b-Red i { background: #D92D20; }
.pr-pct { font-size: .8125rem; font-weight: 650; }
.pr-m-Red { color: #B42318; font-weight: 650; } .pr-m-Amber { color: #8A5A00; font-weight: 650; } .pr-m-Green { color: #166534; font-weight: 650; }
.ow-title { margin: 18px 0 8px; font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; color: var(--nx-muted); font-weight: 700; }
.ow-target { width: 100%; display: block; margin: 8px 0 0; }
.ow-set { display: flex; gap: 8px; margin-top: 10px; } .ow-set .set-input { width: 160px; }
.ow-list { padding: 10px 14px; display: grid; gap: 6px; margin-bottom: 12px; }
.ow-list small { color: var(--nx-muted); margin-left: 6px; }
.ow-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 800px) { .ow-two { grid-template-columns: 1fr; } }
.cl-stars { display: flex; align-items: center; gap: 6px; }
.cl-star { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--nx-ring); background: var(--nx-surface); font-weight: 700; cursor: pointer; color: var(--nx-ink-2); }
.cl-star.on { background: var(--nx-700); color: #fff; border-color: var(--nx-700); }
.cl-wait { display: inline-block; margin: 0 10px 0 4px; font-weight: 650; }
.cl-review { padding: 14px 16px; margin-bottom: 12px; display: grid; gap: 6px; font-size: .875rem; }
.cl-head small { color: var(--nx-muted); margin-left: 6px; } .cl-rate { margin-left: 10px; padding: 1px 9px; border-radius: 999px; background: var(--nx-accent-soft); font-weight: 700; font-size: .75rem; }
.cl-nums { color: var(--nx-ink-2); } .cl-less { background: var(--nx-accent-soft); padding: 6px 10px; border-radius: 8px; }
.pn-hist { white-space: normal !important; min-width: 220px; font-size: .78rem; color: var(--nx-ink-2); } .pn-hist .pf-cancel { margin-left: 6px; padding: 2px 8px; }
html[data-theme="dark"] .pr-m-Red { color: #FCA5A5; } html[data-theme="dark"] .pr-m-Amber { color: #FCD34D; } html[data-theme="dark"] .pr-m-Green { color: #86EFAC; }
html[data-theme="dark"] .pr-bad { border-color: rgba(239, 68, 68, .6); } html[data-theme="dark"] .pr-warn { border-color: rgba(245, 158, 11, .6); }
html[data-theme="dark"] .cl-star.on { background: #7B7CF3; border-color: #7B7CF3; }

/* ---- CEO briefing (uses the Company overview's cards and lists) ---- */
.ceo-summary { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-bottom: 4px; background: var(--nx-accent-soft); border-color: var(--nx-accent-soft-2); }
.ceo-summary p { margin: 0; line-height: 1.55; color: var(--nx-ink); } .ceo-summary .mud-icon-root { color: var(--nx-accent); flex: none; margin-top: 2px; }
.ceo-decisions { padding: 6px; display: grid; gap: 2px; margin-bottom: 4px; }
.ceo-decision { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; color: var(--nx-ink); text-decoration: none; transition: background .15s ease; }
.ceo-decision:hover, .ceo-decision:focus-visible { background: var(--nx-surface-2); }
.ceo-rank { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: .8125rem; background: var(--nx-accent-soft); color: var(--nx-accent); }
.ceo-what { flex: 1; min-width: 0; font-weight: 550; }
.ceo-money { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.ceo-go { flex: none; color: var(--nx-muted); } [dir="rtl"] .ceo-go { transform: scaleX(-1); }
.ceo-months { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.ceo-months small { color: var(--nx-muted); margin-right: 3px; }
.ceo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ceo-row-end { display: flex; align-items: center; gap: 8px; } .ceo-row-end .pf-cancel { padding: 2px 10px; text-decoration: none; }
.ceo-when { display: flex; gap: 12px; flex-wrap: wrap; } .ceo-when .set-field { min-width: 160px; }
.ceo-settings { margin-bottom: 8px; }
@media (max-width: 600px) { .ceo-decision { flex-wrap: wrap; } .ceo-what { flex-basis: calc(100% - 80px); } .ceo-money { margin-left: 38px; } }
html[data-theme="dark"] .ceo-summary { background: rgba(123, 124, 243, .12); border-color: rgba(123, 124, 243, .3); }
html[data-theme="dark"] .ceo-rank { background: rgba(123, 124, 243, .18); color: #C7C8FB; }

/* ---- All tasks ---- */
.at-actions { display: flex; gap: 8px; align-items: center; }
.at-views { margin-bottom: 8px; }
.at-views-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-muted); font-weight: 700; margin-right: 4px; }
.at-view.on { background: var(--nx-accent-soft); border-color: var(--nx-400); }
.sf-share { margin-right: 4px; vertical-align: -3px; opacity: .8; }
.sf-sharebox { display: inline-flex; gap: 4px; align-items: center; font-size: .8125rem; color: var(--nx-ink-2); }
.at-filters { padding: 12px 14px; margin: 10px 0; display: grid; gap: 10px; }
.at-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.at-row-small { font-size: .8125rem; color: var(--nx-ink-2); }
.at-search { flex: 1 1 280px; min-width: 220px; }
.at-sel { min-width: 170px; max-width: 240px; flex: 0 1 200px; }
.at-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.at-group > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-muted); font-weight: 700; margin-right: 2px; }
.at-due, .at-tag { width: auto; min-width: 130px; }
.at-grp { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.at-cols { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 8px; border-top: 1px solid var(--nx-ring); }
.at-sum { margin: 6px 2px 8px; font-size: .875rem; color: var(--nx-ink-2); }
.at-table td { vertical-align: top; }
.at-title { white-space: normal !important; min-width: 260px; max-width: 420px; }
.at-title small { display: block; color: var(--nx-muted); font-size: .72rem; }
.at-sortable { cursor: pointer; user-select: none; }
.at-sortable:hover { color: var(--nx-700); }
.at-late td:first-child { box-shadow: inset 3px 0 0 #D92D20; }
.at-grouprow td { background: var(--nx-soft); font-weight: 700; font-size: .8125rem; padding: 6px 12px; }
.at-status { display: inline-flex; align-items: center; gap: 6px; } .at-status i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.at-pri { font-size: .75rem; font-weight: 650; padding: 1px 8px; border-radius: 999px; background: var(--nx-soft); }
.at-pri-Urgent { background: #FEE2E2; color: #B42318; } .at-pri-High { background: #FEF3C7; color: #8A5A00; }
.at-more { margin: 12px 0; display: flex; gap: 10px; align-items: center; }
.us-nowrap { white-space: nowrap; }
html[data-theme="dark"] .at-pri-Urgent { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; }
html[data-theme="dark"] .at-pri-High { background: rgba(245, 158, 11, 0.2); color: #FCD34D; }
html[data-theme="dark"] .at-view.on { background: var(--nx-accent-soft); }
.filter-section { padding: .5rem 1rem .25rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--nx-muted); font-weight: 700; background: var(--nx-soft); }
.filter-save { padding: .75rem 1rem; border-top: 1px solid var(--nx-line, #F2F3F9); display: grid; gap: 6px; }
.filter-save-title { font-size: .8125rem; font-weight: 650; }
.filter-save-row { display: flex; gap: 8px; align-items: center; } .filter-save-row .filter-input { flex: 1 1 auto; }
.filter-save-hint { font-size: .75rem; color: var(--nx-muted); }

/* ---- All tasks, second design: views dropdown, funnel, chips (like Zoho Tasks) ---- */
.at-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.at-viewwrap { position: relative; }
.at-h1 { font: inherit; letter-spacing: inherit; margin: 0; display: inline; }
.at-viewbtn { display: inline-flex; align-items: baseline; gap: 10px; background: none; border: 0; padding: 4px 6px; cursor: pointer; font: inherit; color: var(--nx-ink); border-radius: 8px; }
.at-viewbtn:hover { background: var(--nx-soft); }
.at-viewtitle { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.at-viewname { font-size: 1.05rem; font-weight: 600; color: var(--nx-700); display: inline-flex; align-items: center; }
.at-scrim { position: fixed; inset: 0; z-index: 30; }
.at-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 320px; max-height: 70vh; display: flex; flex-direction: column; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 12px; box-shadow: var(--nx-sh-pop, 0 12px 32px rgba(16,19,48,.18)); }
.at-menu-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--nx-ring); color: var(--nx-muted); }
.at-menu-search input { border: 0; outline: 0; background: transparent; width: 100%; font: inherit; color: var(--nx-ink); }
.at-menu-body { overflow-y: auto; padding: 4px 0; }
.at-menu-head { padding: 8px 14px 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--nx-muted); font-weight: 700; }
.at-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 14px; font: inherit; font-size: .875rem; color: var(--nx-ink); cursor: pointer; }
.at-menu-item:hover { background: var(--nx-soft); }
.at-menu-item small { color: var(--nx-muted); margin-left: 8px; font-size: .72rem; }
.at-menu-item.on, .at-menu-row.on .at-menu-item { color: var(--nx-700); font-weight: 650; background: var(--nx-accent-soft); }
.at-menu-row { display: flex; align-items: center; } .at-menu-row .at-menu-item { flex: 1 1 auto; }
.at-menu-del { background: none; border: 0; cursor: pointer; color: var(--nx-muted); font-size: 1.1rem; padding: 4px 12px; } .at-menu-del:hover { color: #D92D20; }
.at-menu-empty { padding: 14px; color: var(--nx-muted); font-size: .8125rem; }
.at-menu-foot { padding: 10px 12px; border-top: 1px solid var(--nx-ring); display: grid; gap: 6px; }
.at-create { background: none; border: 0; text-align: left; color: var(--nx-700); font: inherit; font-weight: 650; font-size: .875rem; cursor: pointer; padding: 2px 2px; }
.at-name { display: flex; gap: 6px; align-items: center; } .at-name input { flex: 1 1 auto; height: 32px; padding: 0 10px; border: 1px solid var(--nx-ring); border-radius: 8px; font: inherit; background: var(--nx-surface); color: var(--nx-ink); }
.at-ok { background: none; border: 1px solid var(--nx-ring); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: var(--nx-ink-2); display: grid; place-items: center; }
.at-sharebox { font-size: .8125rem; color: var(--nx-ink-2); display: inline-flex; gap: 6px; align-items: center; }
.at-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.at-grp { display: inline-flex; gap: 6px; align-items: center; font-size: .8125rem; color: var(--nx-ink-2); } .at-grp .set-input { width: auto; min-width: 110px; height: 32px; padding: 0 8px; }
.at-colwrap { position: relative; }
.at-cols { position: absolute; z-index: 40; right: 0; top: 100%; width: 220px; padding: 6px 12px 10px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 12px; box-shadow: var(--nx-sh-pop, 0 12px 32px rgba(16,19,48,.18)); display: grid; gap: 4px; }
.at-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.at-chips-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-muted); font-weight: 700; }
.at-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-800); font-size: .8125rem; font-weight: 550; }
.at-chip button { background: none; border: 0; cursor: pointer; color: inherit; font-size: 1.05rem; line-height: 1; padding: 0 8px; opacity: .7; } .at-chip button:hover { opacity: 1; }
.at-chips-mode { font-size: .75rem; color: var(--nx-muted); }
.at-clear { background: none; border: 0; cursor: pointer; color: var(--nx-700); font: inherit; font-size: .8125rem; font-weight: 650; }

/* ---- free-trial reminder in the top bar, and the Platform (super admin) page ---- */
.nx-trial { display: inline-flex; align-items: center; margin-right: .75rem; padding: .2rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 650; color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe; white-space: nowrap; }
.nx-trial.is-soon { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.nx-trial.is-ended { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
[data-theme="dark"] .nx-trial { color: #c7d2fe; background: rgba(99,102,241,.16); border-color: rgba(129,140,248,.4); }
[data-theme="dark"] .nx-trial.is-soon { color: #fcd34d; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); }
[data-theme="dark"] .nx-trial.is-ended { color: #fca5a5; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); }
@media (max-width: 720px) { .nx-trial { display: none; } }
.pl-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.pl-kpi { padding: .9rem 1rem !important; display: flex; flex-direction: column; gap: .15rem; }
.pl-kpi small { color: var(--nx-muted); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.pl-kpi b { font-size: 1.7rem; letter-spacing: -.02em; }
.pl-kpi span { color: var(--nx-muted); font-size: .75rem; }
.pl-search { margin-bottom: .75rem; max-width: 460px; }
.pl-switch { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .75rem; font-weight: 600; }
.pl-trial { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pl-trial input { width: 80px; }
.pl-member { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--nx-ring, #e5e7eb); }
.pl-member small { display: block; color: var(--nx-muted); font-size: .75rem; }
.us-pill-ok { color: #166534; background: #dcfce7; }
.us-pill-warn { color: #92400e; background: #fef3c7; }
.us-pill-bad { color: #991b1b; background: #fee2e2; }
.nx-nav-badge { display: inline-block; margin-left: .5rem; min-width: 1.15rem; padding: 0 .35rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.15rem; }
/* ---- two-step sign-in pages ---- */
.sec-wrap{max-width:720px;margin:32px auto;padding:0 20px}.sec-wrap h1{margin:0 0 8px}.sec-wrap h2{font-size:18px;margin:18px 0 8px}
.sec-muted{color:var(--mud-palette-text-secondary,#64748b);font-size:14.5px;margin:0 0 12px}
.sec-card{border:1px solid var(--mud-palette-lines-default,#e2e8f0);border-radius:14px;padding:18px 20px;margin:16px 0;background:var(--mud-palette-surface,#fff)}
.sec-note{border-radius:10px;padding:10px 14px;margin:12px 0;font-size:14.5px;background:#eef2ff;border:1px solid #c7d2fe}.sec-note.is-ok{background:#f0fdf4;border-color:#bbf7d0}.sec-note.is-warn{background:#fffbeb;border-color:#fde68a}.sec-note.is-bad{background:#fef2f2;border-color:#fecaca}
.sec-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.sec-input{padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;min-width:220px;background:var(--mud-palette-background,#fff);color:inherit}
.sec-btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid transparent;background:#4338ca;color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}.sec-btn.is-ghost{background:transparent;color:inherit;border-color:#cbd5e1}.sec-btn.is-danger{background:#b91c1c}
.sec-qr{width:200px;height:200px;margin:8px 0;background:#fff;padding:8px;border-radius:8px}.sec-qr svg{width:100%;height:100%}
.sec-codes{columns:2;list-style:none;padding:0;font-family:ui-monospace,Consolas,monospace;font-size:16px}.sec-codes li{margin:4px 0}
.lg-single .lg-panel{grid-column:1/-1;margin:auto}
[hidden]{display:none!important}

/* ---- Small screens: a wide table scrolls inside its own box instead of pushing the whole page sideways ---- */
div:has(> table.set-table), .set-form:has(> table), .nx-card:has(> table){overflow-x:auto;max-width:100%}
table.set-table{min-width:max-content}
@media (min-width:900px){table.set-table{min-width:0}}

/* ---- Support desk ---- */
.dk-chips, .dk-tabs { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: .75rem; }
.dk-chip { border: 1px solid var(--nx-border, #E3E5F1); background: transparent; color: inherit; border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .8125rem; cursor: pointer; }
.dk-chip.on { background: var(--nx-accent-soft); border-color: var(--nx-300); color: var(--nx-800); font-weight: 600; }
.dk-ref { font-family: var(--nx-mono); font-size: .75rem; color: var(--nx-muted); margin-inline-end: .35rem; }
.dk-sub { font-size: .75rem; color: var(--nx-muted); }
.dk-pill { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; background: #E0E7FF; color: #3730A3; }
.dk-pill.warn { background: #FEF3C7; color: #92400E; }
.dk-pill.wait { background: #E0F2FE; color: #075985; }
.dk-pill.done { background: #DCFCE7; color: #166534; }
.dk-prio { font-size: .75rem; font-weight: 600; }
.dk-prio.p-urgent { color: #B42318; }
.dk-prio.p-high { color: #B54708; }
.dk-prio.p-low { color: var(--nx-muted); }
.dk-due { font-size: .8125rem; }
.dk-due.late { color: #B42318; font-weight: 600; }
.dk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 1.25rem; }
.dk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.dk-main, .dk-side { min-width: 0; }
@media (max-width: 899px) { .dk-layout { grid-template-columns: minmax(0, 1fr); } }
.dk-msg { border: 1px solid var(--nx-border, #E3E5F1); border-radius: 12px; padding: .75rem .9rem; margin-bottom: .75rem; background: var(--mud-palette-surface, #fff); }
.dk-msg.is-team { border-inline-start: 4px solid var(--nx-600); }
.dk-msg.is-note { background: #FFFBEB; border-color: #FDE68A; }
.dk-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8125rem; margin-bottom: .35rem; }
.dk-when { margin-inline-start: auto; color: var(--nx-muted); font-size: .75rem; }
.dk-tag { border-radius: 6px; padding: 0 .4rem; font-size: .6875rem; background: var(--nx-surface-3, #F1F5F9); color: var(--nx-muted); }
.dk-tag.note { background: #FEF3C7; color: #92400E; }
.dk-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.5; }
html[data-theme="dark"] .dk-msg.is-note { background: #3B3213; border-color: #6B5A1E; }
html[data-theme="dark"] .dk-pill { background: #312E81; color: #E0E7FF; }
html[data-theme="dark"] .dk-pill.warn { background: #5B3A0B; color: #FDE68A; }
html[data-theme="dark"] .dk-pill.wait { background: #0C3B57; color: #BAE6FD; }
html[data-theme="dark"] .dk-pill.done { background: #14532D; color: #BBF7D0; }
html[data-theme="dark"] .dk-chip.on { color: #E0E7FF; }
.dk-side .nx-card, .dk-main .nx-card { padding: 1rem; margin-bottom: 1rem; }
.dk-side .pf-title { margin-bottom: .5rem; }
.dk-side .crm-dl { margin: 0; }
.dk-address { margin: .5rem 0; }
.dk-address code { background: var(--nx-surface-3, #F1F5F9); padding: .35rem .6rem; border-radius: 8px; font-size: .9rem; user-select: all; overflow-wrap: anywhere; }
.dk-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.dk-add .set-input { flex: 1 1 260px; }
/* ---- client portal: support ---- */
.pt-help { color: #4A5069; font-size: .9rem; margin: 0 0 .75rem; }
.pt-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: .75rem; font-size: .9rem; }
.pt-field input, .pt-field select, .pt-field textarea { font: inherit; padding: 10px; border: 1px solid #CDD1E0; border-radius: 8px; background: #fff; color: inherit; }
.pt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pt-err { background: #FEF3F2; border-color: #FECDCA; color: #7A271A; }
.pt-btnlink { display: inline-flex; align-items: center; text-decoration: none; }
.pt-msgcard.is-team { border-inline-start: 4px solid #4F46E5; }
.pt-msghead { font-size: .85rem; margin-bottom: .25rem; }
.pt-msgbody { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.pt-stars { display: flex; gap: 1rem; margin-bottom: .75rem; }
.pt-row small { margin-inline-start: .5rem; }
/* ---- Support reports ---- */
.dk-dates { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: .8125rem; }
.dk-dates label { display: flex; align-items: center; gap: .5rem; }
.dk-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; align-items: start; }
.dk-gap { margin-top: 1rem; }
.dk-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; overflow-x: auto; padding-bottom: 2px; }
.dk-col { flex: 1 0 6px; max-width: 28px; height: 100%; display: flex; align-items: flex-end; }
.dk-bars { display: flex; align-items: flex-end; gap: 1px; width: 100%; height: 100%; }
.dk-bar { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.dk-bar.o, .dk-legend .o { background: #6366F1; color: #6366F1; }
.dk-bar.r, .dk-legend .r { background: #16A34A; color: #16A34A; }
.dk-legend { font-size: .75rem; color: var(--nx-muted); margin-top: .5rem; }
.dk-legend span { background: none !important; }
.dk-brk-row { display: grid; grid-template-columns: minmax(80px, 1.2fr) 2fr auto; gap: .5rem; align-items: center; font-size: .8125rem; margin-bottom: .35rem; }
.dk-brk-label { overflow-wrap: anywhere; }
.dk-brk-bar { background: var(--nx-surface-3, #F1F5F9); border-radius: 4px; height: 8px; overflow: hidden; }
.dk-brk-bar i { display: block; height: 100%; background: #6366F1; border-radius: 4px; }
.dk-pad { padding: 1rem; margin-bottom: 1rem; }
.dk-kpis { margin-bottom: 1rem; }
.dk-canned { margin-bottom: .5rem; max-width: 100%; }
.dk-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.dk-file { border: 1px solid var(--nx-border, #E3E5F1); border-radius: 8px; padding: .2rem .55rem; font-size: .8125rem; text-decoration: none; overflow-wrap: anywhere; }
.dk-file small, .dk-chosen small { color: var(--nx-muted); margin-inline-start: .35rem; }
.dk-attach { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.dk-chosen { border: 1px solid var(--nx-border, #E3E5F1); border-radius: 999px; padding: .1rem .2rem .1rem .6rem; font-size: .8125rem; }
.dk-x { border: 0; background: transparent; cursor: pointer; font-size: 1rem; padding: 0 .4rem; color: inherit; }
.pt-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.pt-files a { border: 1px solid #E4E6F0; border-radius: 8px; padding: .2rem .55rem; font-size: .85rem; text-decoration: none; overflow-wrap: anywhere; }
.dk-presets { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 .75rem; }
.dk-check { display: flex; gap: .5rem; align-items: center; font-size: .875rem; margin: .5rem 0; }
.dk-test { margin-top: .75rem; display: grid; gap: .35rem; font-size: .875rem; }
.dk-off { opacity: .6; }
.dk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin-top: .5rem; }
.dk-stats > div { border: 1px solid #E4E6F0; border-radius: 10px; padding: .6rem .8rem; display: grid; gap: .1rem; }
.dk-stats b { font-size: 1.4rem; }
.dk-stats span { font-size: .8rem; color: #6B7280; }
.dk-break { overflow-wrap: anywhere; }
.dk-mono { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
/* #365 D2/D3: who else has the ticket open, links, merge and split */
.dk-presence { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.dk-viewer { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--nx-border, #E3E5F1); border-radius: 999px; padding: .15rem .65rem .15rem .2rem; font-size: .8125rem; background: var(--mud-palette-surface, #fff); }
.dk-viewer.is-typing { border-color: var(--nx-300); background: var(--nx-accent-soft); color: var(--nx-800); }
.dk-viewer-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--nx-600); color: #fff; font-size: .6875rem; font-weight: 700; }
.dk-dots { display: inline-flex; gap: 2px; }
.dk-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dk-blink 1.2s infinite ease-in-out; }
.dk-dots i:nth-child(2) { animation-delay: .2s; } .dk-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dk-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dk-dots i { animation: none; opacity: .7; } }
.dk-live { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.dk-live > div { flex: 1 1 200px; }
.dk-msg-action { border: 0; background: transparent; color: var(--nx-muted); font: inherit; font-size: .75rem; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; margin-top: .4rem; padding: .15rem .3rem; border-radius: 6px; }
.dk-msg-action:hover, .dk-msg-action:focus-visible { color: var(--nx-800); background: var(--nx-accent-soft); }
.dk-split { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--nx-border, #E3E5F1); display: grid; gap: .35rem; font-size: .8125rem; }
.dk-link { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .8125rem; padding: .35rem 0; border-bottom: 1px solid var(--nx-border, #E3E5F1); }
.dk-link:last-of-type { border-bottom: 0; }
.dk-link .set-row-link { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.dk-link-kind { font-size: .6875rem; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .02em; flex: 0 0 100%; }
.dk-link-add { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem; margin-top: .6rem; align-items: center; }
.dk-link-add > :last-child { grid-column: 1 / -1; justify-self: end; }
.dk-pick-row { display: block; width: 100%; text-align: start; border: 1px solid var(--nx-border, #E3E5F1); background: transparent; color: inherit; font: inherit; font-size: .8125rem; border-radius: 8px; padding: .4rem .55rem; margin-top: .35rem; cursor: pointer; overflow-wrap: anywhere; }
.dk-pick-row:hover, .dk-pick-row:focus-visible { border-color: var(--nx-300); background: var(--nx-accent-soft); }
.dk-pick-row small { display: block; color: var(--nx-muted); }
.dk-collision { display: grid; gap: .4rem; margin: .5rem 0; }
.dk-collision-msg { border-inline-start: 3px solid var(--nx-600); padding-inline-start: .6rem; font-size: .8125rem; overflow-wrap: anywhere; }
.dk-task-tickets { margin-top: 1rem; padding: 1rem; }
.dk-due.soon { color: #B54708; font-weight: 600; }
html[data-theme="dark"] .dk-due.soon { color: #FDB022; }
/* #365 D4: business hours */
.bh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .75rem; margin-top: .5rem; }
.bh-card { border: 1px solid var(--nx-border, #E3E5F1); border-radius: 12px; padding: .75rem .9rem; display: grid; gap: .4rem; background: var(--mud-palette-surface, #fff); }
.bh-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bh-card .set-actions { margin-top: .25rem; }
.bh-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bh-day { display: grid; gap: 2px; text-align: center; border-radius: 8px; padding: .3rem .1rem; background: var(--nx-accent-soft); font-size: .6875rem; }
.bh-day b { font-weight: 600; font-size: .6875rem; font-variant-numeric: tabular-nums; }
.bh-day.is-closed { background: var(--nx-surface-3, #F1F5F9); color: var(--nx-muted); }
.bh-days { display: grid; gap: .4rem; margin: .5rem 0; }
.bh-row { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 9rem) auto minmax(0, 9rem); align-items: center; gap: .5rem; }
.bh-row-day { margin: 0; }
.bh-row .set-input { width: 100%; min-width: 0; }
.bh-row > .dk-sub { grid-column: 2 / -1; }
.bh-presets { justify-content: flex-start; }
.bh-preview { margin-top: 1rem; }
.bh-actions { white-space: nowrap; }
/* #365 D6: service catalogue cards (portal, public request page and Request a service) */
.svc-group + .svc-group { margin-top: 1rem; }
.svc-group-title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted, #4A5069); margin: 0 0 .5rem; }
.svc-group { min-width: 0; }
.svc-grid { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
@media (max-width: 520px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
.svc-card { position: relative; display: grid; gap: .25rem; align-content: start; padding: .8rem 2rem .8rem .9rem; border: 1px solid #E4E6F0; border-radius: 12px; background: var(--mud-palette-surface, #fff); color: inherit; text-decoration: none; min-height: 4.25rem; transition: border-color .15s, box-shadow .15s; }
.svc-card:hover, .svc-card:focus-visible { border-color: var(--nx-accent, #4338CA); box-shadow: 0 2px 10px rgba(67, 56, 202, .12); }
.svc-card-name { font-weight: 600; }
.svc-card-desc { font-size: .8125rem; color: var(--nx-muted, #4A5069); overflow-wrap: anywhere; }
.svc-card-tag { justify-self: start; font-size: .6875rem; font-weight: 600; border-radius: 999px; padding: .05rem .5rem; background: #FEF3C7; color: #92400E; }
.svc-card-go { position: absolute; inset-inline-end: .8rem; top: .8rem; color: var(--nx-accent, #4338CA); font-weight: 700; }
[dir="rtl"] .svc-card-go { transform: scaleX(-1); }
.svc-sub { margin-top: 1rem; }
.svc-where { margin: 0 0 .5rem; padding-inline-start: 1.1rem; font-size: .875rem; }
.svc-start { justify-content: flex-start; }
html[data-theme="dark"] .svc-card { background: var(--nx-surface); border-color: var(--nx-ring); }
html[data-theme="dark"] .svc-card-tag { background: #5B3A0B; color: #FDE68A; }
@media (prefers-reduced-motion: reduce) { .svc-card { transition: none; } }
/* #365 D1: live chats */
.lc-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.lc-list, .lc-chat { padding: 1rem; min-width: 0; }
.lc-chat { display: flex; flex-direction: column; min-height: 60vh; }
.lc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lc-row { display: flex; gap: .6rem; padding: .55rem .5rem; border-radius: 10px; color: inherit; text-decoration: none; }
.lc-row:hover, .lc-row:focus-visible { background: var(--nx-accent-soft); }
.lc-row.on { background: var(--nx-accent-soft); box-shadow: inset 3px 0 0 var(--nx-600); }
.lc-avatar { flex: 0 0 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--nx-600); color: #fff; font-size: .75rem; font-weight: 700; }
.lc-row.is-waiting .lc-avatar { background: #B54708; }
.lc-row-main { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.lc-row-top { display: flex; gap: .5rem; align-items: baseline; }
.lc-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-row-last { font-size: .8125rem; color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-row-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.lc-pick { display: grid; place-items: center; gap: .5rem; min-height: 40vh; color: var(--nx-muted); }
.lc-chat-head { display: flex; gap: .75rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid var(--nx-border, #E3E5F1); }
.lc-chat-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lc-back { display: none; text-decoration: none; font-size: 1.25rem; color: inherit; padding: .25rem .5rem; border-radius: 8px; }
.lc-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .6rem 0; }
.lc-actions .set-input { width: auto; max-width: 14rem; }
.lc-thread { flex: 1; overflow-y: auto; max-height: 55vh; display: flex; flex-direction: column; gap: .5rem; padding: .75rem .25rem; }
.lc-msg { max-width: 78%; border-radius: 14px; padding: .5rem .75rem; font-size: .875rem; line-height: 1.45; }
.lc-msg.is-visitor { align-self: flex-start; background: var(--nx-surface-3, #F1F5F9); border-end-start-radius: 4px; }
.lc-msg.is-agent { align-self: flex-end; background: var(--nx-accent-soft); border-end-end-radius: 4px; }
.lc-msg-head { font-size: .75rem; display: flex; gap: .5rem; margin-bottom: .15rem; }
.lc-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.lc-system { align-self: center; font-size: .75rem; color: var(--nx-muted); text-align: center; }
.lc-typing { min-height: 1.1rem; font-size: .75rem; color: var(--nx-muted); padding: 0 .25rem; }
.lc-compose { display: grid; gap: .4rem; border-top: 1px solid var(--nx-border, #E3E5F1); padding-top: .6rem; }
.lc-canned { max-width: 100%; }
.lc-box { display: flex; gap: .5rem; align-items: flex-end; }
.lc-box textarea { flex: 1; resize: vertical; min-height: 2.75rem; }
.lc-ended { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; color: var(--nx-muted); font-size: .875rem; border-top: 1px solid var(--nx-border, #E3E5F1); padding-top: .6rem; }
.cw-colour { min-height: 2.5rem; padding: .2rem; }
@media (max-width: 900px) {
  .lc-layout { grid-template-columns: minmax(0, 1fr); }
  .lc-layout.has-chat .lc-list { display: none; }
  .lc-layout:not(.has-chat) .lc-chat { display: none; }
  .lc-back { display: inline-block; }
  .lc-msg { max-width: 90%; }
}
html[data-theme="dark"] .lc-msg.is-visitor { background: var(--nx-surface-2, #24273B); }
html[data-theme="dark"] .lc-msg.is-agent { color: #E0E7FF; }
html[data-theme="dark"] .bh-card { background: var(--nx-surface, #1E2033); }
html[data-theme="dark"] .dk-viewer { background: var(--nx-surface, #1E2033); }
html[data-theme="dark"] .dk-viewer.is-typing { color: #E0E7FF; }
.cd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; align-items: start; }
.cd-frame { width: 100%; height: 520px; border: 1px solid #E4E6F0; border-radius: 8px; background: #fff; }
.cd-problems { margin: .25rem 0 .5rem; padding-left: 1.2rem; color: #92400E; font-size: .875rem; }
html[data-theme="dark"] .dk-stats > div { border-color: #374151; }
html[data-theme="dark"] .dk-stats span { color: #9CA3AF; }
.ct-bulk { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: #EEF2FF; border-radius: 10px; padding: .5rem .75rem; margin-bottom: .75rem; }
.ct-listrow { display: flex; justify-content: space-between; align-items: center; padding: .25rem 0; border-bottom: 1px solid #F1F2F8; }
.ct-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .875rem; }
.ct-when { color: #6B7280; margin-right: .5rem; font-size: .8rem; }
.w-chk { width: 2rem; }
html[data-theme="dark"] .ct-bulk { background: #25274A; }
html[data-theme="dark"] .ct-listrow { border-color: #2D3140; }
.ds-wrap { display: grid; grid-template-columns: 250px minmax(min(320px, 100%), 1fr) 340px; gap: 1rem; align-items: start; margin-top: 1rem; }
@media (max-width: 1200px) { .ds-wrap { grid-template-columns: 1fr; } }
.ds-side, .ds-center, .ds-blocks { background: #fff; border: 1px solid #E4E6F0; border-radius: 12px; padding: 1rem; }
.ds-palette { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ds-add { border: 1px solid #E4E6F0; background: #F9FAFB; border-radius: 8px; padding: .45rem .5rem; font-size: .8rem; cursor: grab; text-align: left; }
.ds-add:hover { border-color: #4F46E5; background: #EEF2FF; }
.ds-theme { display: grid; gap: .5rem; font-size: .8rem; }
.ds-theme label, .ds-color { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ds-theme input[type=color], .ds-color input[type=color], .co-colour { width: 44px; height: 28px; border: 1px solid #E4E6F0; border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.co-colour-edit { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem; }
.co-colour-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; color: var(--nx-muted, #667085); direction: ltr /*rtl:ignore*/; unicode-bidi: isolate; }
.ds-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.ds-tab { border: 1px solid #E4E6F0; background: #fff; border-radius: 999px; padding: .2rem .8rem; font-size: .8rem; cursor: pointer; margin-inline-start: .25rem; }
.ds-tab.on { background: #4F46E5; color: #fff; border-color: #4F46E5; }
.ds-framewrap { background: #E5E7EB; border-radius: 10px; padding: .5rem; display: flex; justify-content: center; }
.ds-frame { width: 100%; height: 640px; border: 0; background: #fff; border-radius: 6px; }
.ds-frame.mobile { width: 375px; max-width: 100%; }
.ds-block { border: 1px solid #E4E6F0; border-radius: 10px; margin-bottom: .5rem; background: #fff; }
.ds-block.sel { border-color: #4F46E5; box-shadow: 0 0 0 2px #E0E7FF; }
.ds-block-head { display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; cursor: pointer; font-size: .85rem; }
.ds-sum { color: #6B7280; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ds-grip { color: #9CA3AF; cursor: grab; }
.ds-actions button { border: 0; background: none; cursor: pointer; padding: .1rem .3rem; font-size: .9rem; color: #4B5563; }
.ds-actions button:disabled { opacity: .3; cursor: default; }
.ds-del:hover { color: #DC2626; }
.ds-props { border-top: 1px solid #E4E6F0; padding: .75rem; display: grid; gap: .5rem; }
.ds-item { border: 1px dashed #D1D5DB; border-radius: 8px; padding: .5rem; display: grid; gap: .4rem; }
.ds-item-head { display: flex; justify-content: space-between; }
.ds-empty { border: 2px dashed #D1D5DB; border-radius: 10px; padding: 1.5rem; text-align: center; color: #6B7280; }
.di-field { display: grid; gap: .25rem; }
.di-label { font-size: .8rem; font-weight: 600; }
.di-file { display: none; }
.di-upload { cursor: pointer; padding: 0 .75rem; }
.di-error { color: #B91C1C; font-size: .8rem; }
.di-library { display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem; border: 1px solid #E4E6F0; border-radius: 8px; max-height: 180px; overflow: auto; }
.di-thumb { border: 1px solid #E4E6F0; background: #fff; padding: 2px; border-radius: 6px; cursor: pointer; }
.di-thumb img { width: 64px; height: 64px; object-fit: cover; display: block; }
html[data-theme="dark"] .ds-side, html[data-theme="dark"] .ds-center, html[data-theme="dark"] .ds-blocks, html[data-theme="dark"] .ds-block { background: #1F2230; border-color: #2D3140; }
html[data-theme="dark"] .ds-add { background: #262A3A; border-color: #2D3140; color: inherit; }
html[data-theme="dark"] .ds-tab { background: #262A3A; border-color: #2D3140; color: inherit; }
html[data-theme="dark"] .ds-tab.on { background: #4F46E5; }
.ds-group { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-muted, #667085); margin: .9rem 0 .35rem; }
.ds-mine { display: grid; gap: .35rem; }
.ds-mine-row { display: flex; gap: .25rem; align-items: stretch; } .ds-mine-row .ds-add { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-x { border: 1px solid #E4E6F0; background: #fff; border-radius: 8px; cursor: pointer; color: #6B7280; padding: 0 .5rem; } .ds-x:hover { color: #DC2626; border-color: #FCA5A5; }
.ds-brand { display: flex; align-items: center; gap: .5rem; width: 100%; border: 1px solid #C7D2FE; background: #EEF2FF; color: #3730A3; border-radius: 8px; padding: .5rem .65rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; margin-bottom: .6rem; }
.ds-brand:hover { background: #E0E7FF; } .ds-swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; flex: 0 0 auto; }
.ds-brand-link { display: inline-block; font-size: .85rem; margin-bottom: .6rem; }
.ds-pre { margin-top: .75rem; }
.ds-warn { background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412; border-radius: 8px; padding: .45rem .6rem; font-size: .8rem; }
.ds-saveblock { border-top: 1px solid #E4E6F0; margin-top: .9rem; padding-top: .75rem; display: grid; gap: .4rem; }
.cv-only { outline-style: dashed; outline-color: #CBD5E1; }
.eg-filters { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-bottom: .9rem; }
.eg-brandon { margin: 0; }
.eg-rtl { background: #ECFDF5; color: #065F46; }
.cd-lang { margin-inline-start: .4rem; }
.cd-detail { display: block; color: #6B7280; font-size: .8rem; margin-top: .1rem; overflow-wrap: anywhere; }
.cd-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; overflow-wrap: anywhere; }
.cd-addver { width: auto; min-width: 160px; }
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .bk-layout { grid-template-columns: 1fr; } }
.bk-colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .5rem 1.25rem; font-size: .85rem; }
.bk-social { margin-bottom: .4rem; } .bk-social input { flex: 1; min-width: 0; }
.bk-preview { position: sticky; top: 70px; } .bk-preview .ds-frame { height: 720px; }
.pt-sub { margin: 0 0 .6rem; font-size: 1.05rem; }
.pt-ok { color: #166534; font-weight: 600; }
.pt-muted { color: #4A5069; font-size: .9rem; }
.pt-topics { border: 0; padding: 0; margin: 0 0 .75rem; } .pt-topics legend { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; padding: 0; } .pt-topics .pt-check { margin: .35rem 0; font-size: .95rem; }
.pt-btn-quiet { background: #6B7280; }
html[data-theme="dark"] .ds-x { background: #262A3A; border-color: #2D3140; color: #9CA3AF; }
html[data-theme="dark"] .ds-brand { background: #25274A; border-color: #3B3F70; color: #C7D2FE; }
html[data-theme="dark"] .ds-warn { background: #3A2410; border-color: #7C4A1A; color: #FDBA74; }
html[data-theme="dark"] .ds-saveblock { border-color: #2D3140; }
html[data-theme="dark"] .eg-rtl { background: #12352A; color: #7FE3B5; }
html[data-theme="dark"] .cd-detail, html[data-theme="dark"] .pt-muted { color: #9CA3AF; }
html[data-theme="dark"] .pt-ok { color: #86EFAC; }
.cr-head { display: flex; justify-content: space-between; align-items: center; }
.dk-stats small { color: #6B7280; font-size: .72rem; }
.cr-funnel, .cr-hrow { display: grid; gap: .4rem; }
.cr-frow, .cr-hrow { display: grid; grid-template-columns: 110px 1fr 90px; gap: .6rem; align-items: center; font-size: .85rem; }
.cr-hrow { grid-template-columns: minmax(80px, 1.2fr) 1.5fr 70px; margin-bottom: .3rem; }
.cr-ftrack { background: #EEF0F6; border-radius: 999px; height: 10px; overflow: hidden; }
.cr-fbar { background: #4F46E5; height: 100%; border-radius: 999px; min-width: 2px; }
.cr-fval { text-align: end; font-variant-numeric: tabular-nums; }
.cr-chart { width: 100%; height: auto; }
.cr-axis { stroke: #D1D5DB; stroke-width: 1; }
.cr-tick { font-size: 9px; fill: #6B7280; }
rect.cr-open, i.cr-open { fill: #4F46E5; background: #4F46E5; }
rect.cr-click, i.cr-click { fill: #F59E0B; background: #F59E0B; }
.cr-legend { display: flex; gap: 1rem; align-items: center; font-size: .8rem; }
.cr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: .3rem; }
.ds-tabs { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin: .5rem 0; }
html[data-theme="dark"] .cr-ftrack { background: #2D3140; }
html[data-theme="dark"] .dk-stats small { color: #9CA3AF; }
.mr-row { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr 110px; gap: .75rem; align-items: center; padding: .35rem 0; font-size: .85rem; }
.mr-second { margin-top: 3px; }
.mr-nums { text-align: end; font-variant-numeric: tabular-nums; }
.cr-fbar-click { background: #F59E0B; }
.cr-ab { border: 1px solid #E4E6F0; border-radius: 10px; padding: .75rem; display: grid; gap: .25rem; }
.cr-ab.win { border-color: #16A34A; background: #F0FDF4; }
.cd-checks { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .875rem; }
.cd-check-warning { color: #92400E; }
.cd-check-good { color: #166534; }
html[data-theme="dark"] .cr-ab { border-color: #2D3140; }
html[data-theme="dark"] .cr-ab.win { background: #12301F; }
html[data-theme="dark"] .cd-check-warning { color: #FCD34D; }
html[data-theme="dark"] .cd-check-good { color: #86EFAC; }
.pt-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; margin: .5rem 0 1rem; }
.pt-error { color: #B91C1C; font-weight: 600; }
.cv-wrap { display: grid; grid-template-columns: 250px minmax(min(320px, 100%), 1fr) 340px; gap: 1rem; align-items: start; margin-top: 1rem; }
@media (max-width: 1200px) { .cv-wrap { grid-template-columns: 1fr; } }
.cv-page { padding: 1.25rem; border-radius: 10px; min-height: 420px; overflow-x: auto; }
.cv-card { margin: 0 auto; overflow: hidden; position: relative; }
.cv-block { position: relative; cursor: grab; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .1s; }
.cv-block:hover { outline-color: #A5B4FC; }
.cv-block.sel { outline-color: #4F46E5; }
.cv-block.dragging { opacity: .45; }
.cv-content { pointer-events: none; }
.cv-content a { pointer-events: none; }
.cv-tools { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; align-items: center; background: #1F2937; color: #fff; border-radius: 8px; padding: 2px 4px; z-index: 3; font-size: .75rem; }
.cv-block:hover .cv-tools, .cv-block.sel .cv-tools { display: flex; }
.cv-tools button { border: 0; background: none; color: #fff; cursor: pointer; padding: 0 .3rem; }
.cv-tools button:disabled { opacity: .3; cursor: default; }
.cv-label { padding: 0 .35rem; opacity: .85; }
.cv-drop { position: absolute; left: 0; right: 0; height: 50%; z-index: 2; pointer-events: none; }
.cv-drop.top { top: 0; } .cv-drop.bottom { bottom: 0; }
.cv-dragging .cv-drop { pointer-events: auto; }
.cv-dragging .cv-block .cv-content { pointer-events: none; }
.cv-drop.hot.top { box-shadow: inset 0 3px 0 #4F46E5; background: linear-gradient(#E0E7FF99, transparent 40%); }
.cv-drop.hot.bottom { box-shadow: inset 0 -3px 0 #4F46E5; background: linear-gradient(transparent 60%, #E0E7FF99); }
.cv-empty, .cv-end { border: 2px dashed #CBD5E1; border-radius: 8px; margin: .75rem; padding: 1rem; text-align: center; color: #64748B; font-size: .85rem; }
.cv-end { opacity: 0; transition: opacity .1s; }
.cv-dragging .cv-end { opacity: 1; }
.cv-empty.hot, .cv-end.hot { border-color: #4F46E5; background: #EEF2FF; color: #4F46E5; }
.cv-props { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; }
.ds-props-open { display: grid; gap: .5rem; }
html[data-theme="dark"] .cv-empty, html[data-theme="dark"] .cv-end { border-color: #475569; }
.ct-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ct-layout { grid-template-columns: 1fr; } }
.ct-lists { position: sticky; top: 70px; }
.ct-list { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .45rem .6rem; border-radius: 8px; text-decoration: none; color: inherit; font-size: .875rem; }
.ct-list:hover { background: #F3F4F9; }
.ct-list.on { background: #EEF2FF; color: #3730A3; font-weight: 600; }
.ct-list b { font-weight: 600; color: #6B7280; font-size: .8rem; }
html[data-theme="dark"] .ct-list:hover { background: #262A3A; }
html[data-theme="dark"] .ct-list.on { background: #25274A; color: #C7D2FE; }
.ct-main > * + * { margin-top: 1rem; }
.it-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .it-layout { grid-template-columns: 1fr; } }
.it-list { display: grid; gap: .5rem; }
.it-card { display: flex; gap: .75rem; align-items: center; text-align: start; border: 1px solid #E4E6F0; background: #fff; border-radius: 12px; padding: .7rem .8rem; cursor: pointer; font: inherit; }
.it-card:hover { border-color: #A5B4FC; }
.it-card.on { border-color: #4F46E5; background: #EEF2FF; }
.it-icon { font-size: 1.6rem; width: 2.4rem; text-align: center; }
.it-text { display: grid; gap: .1rem; } .it-text small { color: #6B7280; }
.it-title { margin: 0; font-size: 1.25rem; }
.itp-desc { margin: .25rem 0 .75rem; color: #4B5563; }
.itp-phases { display: grid; gap: .5rem; margin: .75rem 0; }
.itp-phase { border: 1px solid #E4E6F0; border-radius: 10px; padding: .5rem .75rem; }
.itp-phase summary { cursor: pointer; display: flex; gap: .5rem; align-items: baseline; }
.itp-sum { color: #6B7280; font-size: .8rem; }
.itp-tasks { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .85rem; }
.itp-tasks td { padding: .25rem .4rem; border-top: 1px solid #F1F2F8; }
.itp-when, .itp-hrs { color: #6B7280; white-space: nowrap; text-align: end; }
.itp-form { border: 1px solid #E4E6F0; border-radius: 10px; padding: .5rem .75rem; margin: .5rem 0; }
.itp-form summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
html[data-theme="dark"] .it-card, html[data-theme="dark"] .itp-phase, html[data-theme="dark"] .itp-form { background: #1F2230; border-color: #2D3140; }
html[data-theme="dark"] .it-card.on { background: #25274A; }
html[data-theme="dark"] .itp-tasks td { border-color: #2D3140; }
.di-art .di-thumb img { width: 96px; height: 42px; }
.ds-section-bg { border-top: 1px solid #E4E6F0; padding-top: .5rem; margin-top: .25rem; display: grid; gap: .3rem; }
html[data-theme="dark"] .ds-section-bg { border-color: #2D3140; }

/* Surveys: public page */
.sv-q { border: 0; border-bottom: 1px solid #E5E7EF; margin: 0 0 1rem; padding: 0 0 1rem; min-width: 0; }
.sv-q legend { font-weight: 600; padding: 0; margin-bottom: .5rem; }
.sv-q input[type=text], .sv-q textarea { width: 100%; font: inherit; padding: 10px; border: 1px solid #CDD1E0; border-radius: 8px; background: #fff; color: inherit; box-sizing: border-box; }
.sv-q.is-bad { border-left: 3px solid #D92D20; padding-left: .75rem; }
.sv-req { color: #D92D20; }
.sv-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-pick { position: relative; }
.sv-pick input { position: absolute; opacity: 0; }
.sv-pick span { display: inline-block; min-width: 40px; text-align: center; padding: 9px 12px; border: 1px solid #CDD1E0; border-radius: 8px; cursor: pointer; background: #fff; }
.sv-pick input:checked + span { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.sv-pick input:focus-visible + span { outline: 2px solid #4f46e5; outline-offset: 2px; }
.sv-ends { display: flex; justify-content: space-between; font-size: .75rem; opacity: .7; margin-top: 4px; }
/* Surveys: results */
.sr-bar { display: grid; grid-template-columns: minmax(80px, 220px) 1fr 64px; gap: 8px; align-items: center; font-size: .85rem; margin: 3px 0; }
.sr-bar i { display: block; height: 14px; border-radius: 4px; background: #4f46e5; min-width: 2px; }
.sr-track { background: #EEF0F6; border-radius: 4px; }
.sr-text { border-left: 3px solid #CDD1E0; padding: 4px 10px; margin: 4px 0; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-q { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #E5E7EF; }
.sq-row { border: 1px solid #E5E7EF; border-radius: 10px; padding: 10px; margin-bottom: 8px; background: #fff; }
.sq-top { display: grid; grid-template-columns: 1fr 160px; gap: 8px; }
.sq-bar { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* Social post planner */
.so-month { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .75rem; }
.so-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.so-dow { text-align: center; font-size: .75rem; opacity: .65; }
.so-cell { min-height: 74px; border: 1px solid #E5E7EF; border-radius: 8px; padding: 4px; font-size: .75rem; background: #fff; overflow: hidden; }
.so-cell.is-empty { border-color: transparent; background: transparent; }
.so-cell.is-today { border-color: #4f46e5; }
.so-day { opacity: .6; display: block; }
.so-chip { display: block; background: #E0E7FF; color: #3730A3; border-radius: 4px; padding: 1px 5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.so-chip.is-done { background: #DCFCE7; color: #166534; }
.so-count { margin-inline-start: 6px; font-size: .75rem; opacity: .7; }
.so-count.is-over { color: #D92D20; opacity: 1; font-weight: 600; }
.so-preview { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid #E5E7EF; border-radius: 10px; padding: 12px; background: #fff; }
.so-link { color: #4f46e5; margin-top: 6px; }
.so-share a { text-decoration: none; }

/* Project template: plan chart */
.itp-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #EEF0F6; margin: .25rem 0 .75rem; }
.itp-tabs button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: .85rem; padding: 6px 14px; border-radius: 8px; cursor: pointer; color: #4B5563; }
.itp-tabs button.on { background: #fff; color: #4F46E5; box-shadow: 0 1px 3px rgba(20,22,56,.12); }
.tg { border: 1px solid #E4E6F0; border-radius: 12px; background: #fff; overflow: hidden; }
.tg-scroll { overflow-x: auto; }
.tg-inner { min-width: calc(360px + var(--tg-cols) * 30px); }
.tg-row { display: grid; grid-template-columns: 300px 52px minmax(0, 1fr); align-items: center; border-bottom: 1px solid #F1F2F8; min-height: 34px; }
.tg-row:last-child { border-bottom: 0; }
.tg-head { background: #F7F8FC; font-size: .72rem; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .03em; min-height: 32px; }
.tg-name { justify-content: flex-start; width: 100%; box-sizing: border-box; padding: 0 10px; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; text-align: start; border: 0; background: transparent; font-family: inherit; color: inherit; }
.tg-hrs { text-align: end; padding-inline-end: 10px; font-size: .78rem; color: #6B7280; }
.tg-time { position: relative; height: 100%; min-height: 34px; display: grid; grid-template-columns: repeat(var(--tg-cols), 1fr); background-image: linear-gradient(to right, #EEF0F6 1px, transparent 1px); background-size: calc(100% / var(--tg-cols)) 100%; }
.tg-head .tg-time { background-image: none; }
.tg-col { text-align: center; border-inline-start: 1px solid #E4E6F0; line-height: 32px; font-size: .68rem; }
.tg-col:first-child { border-inline-start: 0; }
.tg-phase { background: #FAFAFE; }
.tg-phase .tg-name { cursor: pointer; padding: 6px 10px; }
.tg-phase .tg-name small { color: #6B7280; font-weight: 400; }
.tg-caret { color: var(--tg-color); width: 12px; }
.tg-sum { position: absolute; top: 12px; height: 9px; border-radius: 3px; background: var(--tg-color); opacity: .95; }
.tg-sum::before, .tg-sum::after { content: ""; position: absolute; top: 5px; border: 4px solid transparent; border-top-color: var(--tg-color); }
.tg-sum::before { inset-inline-start: 0; } .tg-sum::after { inset-inline-end: 0; }
.tg-task .tg-name { padding-inline-start: 26px; color: #374151; }
.tg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tg-color); flex: 0 0 auto; }
.tg-bar { position: absolute; top: 7px; height: 20px; border-radius: 6px; background: var(--tg-color); box-shadow: 0 1px 2px rgba(20,22,56,.18); display: flex; align-items: center; overflow: hidden; background-image: linear-gradient(180deg, rgba(255,255,255,.22), transparent); }
.tg-bar span { color: #fff; font-size: .68rem; font-weight: 600; padding: 0 6px; white-space: nowrap; font-style: normal; }
.tg-finish { background: #F7F8FC; }
.tg-flag { color: #10B981; }
.tg-end { position: absolute; top: 9px; width: 14px; height: 14px; background: #10B981; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.tg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-top: 1px solid #E4E6F0; font-size: .75rem; color: #4B5563; }
.tg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; }
html[data-theme="dark"] .tg { background: #1F2230; border-color: #2D3140; }
html[data-theme="dark"] .tg-head, html[data-theme="dark"] .tg-finish, html[data-theme="dark"] .tg-phase { background: #25283A; }
html[data-theme="dark"] .tg-row, html[data-theme="dark"] .tg-legend { border-color: #2D3140; }
html[data-theme="dark"] .tg-task .tg-name { color: #D1D5DB; }
html[data-theme="dark"] .itp-tabs { background: #2D3140; } html[data-theme="dark"] .itp-tabs button.on { background: #1F2230; }
.it-hero { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: 1.1rem 1.25rem; margin: -.25rem -.25rem 1rem; border-radius: 14px; background: linear-gradient(120deg, hsl(var(--it-hue, 240) 85% 96%), #fff 70%); border: 1px solid #E4E6F0; }
.it-hero-icon { font-size: 2.4rem; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(20,22,56,.1); }
.it-hero-text { flex: 1 1 260px; min-width: 0; } .it-hero-text p { margin: .25rem 0 0; color: #4B5563; }
html[data-theme="dark"] .it-hero { background: linear-gradient(120deg, #25274A, #1F2230 70%); border-color: #2D3140; } html[data-theme="dark"] .it-hero-icon { background: #2D3140; }

/* Website traffic */
.wt-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.wt-ranges { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #EEF0F6; }
.wt-ranges button { border: 0; background: transparent; font: inherit; font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: #4B5563; }
.wt-ranges button.on { background: #fff; color: #4F46E5; box-shadow: 0 1px 3px rgba(20,22,56,.12); }
.wt-setup { margin-inline-start: auto; font-size: .85rem; }
.wt-chart { width: 100%; height: 180px; display: block; }
.wt-grid { stroke: #E5E7EF; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wt-area { fill: rgba(79,70,229,.12); }
.wt-line { fill: none; stroke: #4F46E5; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wt-line2 { fill: none; stroke: #10B981; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wt-axis { display: flex; justify-content: space-between; font-size: .72rem; color: #6B7280; margin-top: 4px; }
.wt-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; margin-top: .5rem; align-items: center; }
.wt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; } .wt-legend i.a { background: #4F46E5; } .wt-legend i.b { background: #10B981; }
.wt-row { display: grid; grid-template-columns: minmax(80px, 200px) 1fr 56px; gap: 8px; align-items: center; font-size: .85rem; margin: 4px 0; }
.wt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-row b { text-align: end; }
html[data-theme="dark"] .wt-ranges { background: #2D3140; } html[data-theme="dark"] .wt-ranges button.on { background: #1F2230; }
.wt-row .sr-track { display: block; background: #EEF0F6; border-radius: 4px; }
.wt-row .sr-track i { display: block; height: 12px; border-radius: 4px; background: #4F46E5; min-width: 2px; }

/* ===== Email template gallery (eg-) ===== */
.eg-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; margin: .25rem 0 1.25rem; }
.eg-title { margin: 0; font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; }
.eg-sub { margin: .35rem 0 0; color: #5B6478; max-width: 640px; line-height: 1.5; }
.eg-tools { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.eg-search { display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #D5D9E6; border-radius: 10px; padding: 0 .75rem; height: 40px; min-width: 240px; color: #6B7280; }
.eg-search:focus-within { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.eg-search input { border: 0; outline: 0; background: transparent; font: inherit; flex: 1; color: inherit; min-width: 0; }
.eg-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid #E4E6F0; margin-bottom: 1.25rem; }
.eg-tabs button { border: 0; background: transparent; font: inherit; font-weight: 650; padding: .6rem .1rem; cursor: pointer; color: #6B7280; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: .45rem; align-items: center; }
.eg-tabs button span { background: #EEF0F6; border-radius: 999px; font-size: .72rem; padding: 1px 8px; color: #4B5563; }
.eg-tabs button.on { color: #4F46E5; border-color: #4F46E5; } .eg-tabs button.on span { background: #E0E7FF; color: #4338CA; }
.eg-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
@media (max-width: 860px) { .eg-layout { grid-template-columns: 1fr; } .eg-rail { flex-direction: row !important; overflow-x: auto; position: static !important; } .eg-rail button { white-space: nowrap; } }
.eg-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.eg-rail button { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border: 0; background: transparent; font: inherit; padding: .5rem .75rem; border-radius: 8px; cursor: pointer; color: #374151; text-align: start; }
.eg-rail button b { font-weight: 600; font-size: .75rem; color: var(--nx-muted); }
.eg-rail button:hover { background: #F1F3F9; }
.eg-rail button.on { background: #EEF2FF; color: #4338CA; font-weight: 650; } .eg-rail button.on b { color: #4338CA; }
.eg-count { font-size: .85rem; color: #6B7280; margin-bottom: .75rem; }
.eg-grid { display: grid; grid-template-columns: repeat(auto-fill, 264px); gap: 1.5rem 1.25rem; justify-content: start; }
.eg-card { width: 264px; background: #fff; border: 1px solid #E4E6F0; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s, border-color .18s; }
.eg-card:hover { box-shadow: 0 14px 34px rgba(20, 22, 56, .14); transform: translateY(-3px); border-color: #C7CCE3; }
.eg-thumb { display: block; position: relative; width: 264px; height: 330px; overflow: hidden; background: #F1F3F9; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.eg-thumb iframe { width: 600px; height: 750px; border: 0; transform: scale(.44); transform-origin: top left; pointer-events: none; background: #fff; }
.eg-fade { position: absolute; inset: auto 0 0 0; height: 70px; background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0)); pointer-events: none; }
.eg-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 18, 45, .45); opacity: 0; transition: opacity .18s; }
.eg-thumb:hover .eg-over, .eg-thumb:focus-visible .eg-over { opacity: 1; }
.eg-thumb:focus-visible { outline: 3px solid #4F46E5; outline-offset: -3px; }
.eg-pill { background: #fff; color: #1F2937; font-weight: 650; font-size: .85rem; padding: .5rem 1.1rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.eg-info { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.eg-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .eg-line b { font-size: 1rem; }
.eg-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #D5D9E6; flex: 0 0 auto; }
.eg-chip { align-self: flex-start; background: #EEF0F6; color: #4B5563; border-radius: 999px; font-size: .72rem; font-weight: 600; padding: 2px 10px; display: inline-block; }
.eg-chip.big { font-size: .78rem; padding: 4px 11px; }
.eg-info p { margin: .1rem 0 .4rem; font-size: .84rem; line-height: 1.45; color: #5B6478; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eg-actions { display: flex; gap: .5rem; margin-top: auto; flex-wrap: wrap; }
.eg-empty { border: 1px dashed #CBD0E1; border-radius: 14px; padding: 2.5rem 1rem; text-align: center; color: #6B7280; }
.eg-modal { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 1.25rem; }
.eg-backdrop { position: absolute; inset: 0; background: rgba(12, 14, 36, .6); backdrop-filter: blur(3px); }
.eg-dialog { position: relative; width: min(1180px, 100%); height: min(860px, 100%); background: #fff; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.eg-dhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid #E4E6F0; flex-wrap: wrap; }
.eg-dhead h2 { margin: 0 .6rem 0 0; font-size: 1.2rem; display: inline; vertical-align: middle; }
.eg-device { display: inline-flex; background: #EEF0F6; padding: 3px; border-radius: 10px; gap: 2px; }
.eg-device button { border: 0; background: transparent; font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; color: #4B5563; display: inline-flex; gap: .35rem; align-items: center; }
.eg-device button.on { background: #fff; color: #4F46E5; box-shadow: 0 1px 3px rgba(20,22,56,.15); }
.eg-close { border: 0; background: #EEF0F6; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.eg-close:hover { background: #E0E3EF; }
.eg-dbody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 900px) { .eg-dbody { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .eg-side { max-height: 40vh; } }
.eg-stage { background: #E9ECF5; padding: 1.25rem; overflow: auto; display: flex; justify-content: center; }
.eg-frame { background: #fff; border-radius: 10px; box-shadow: 0 8px 28px rgba(20,22,56,.18); overflow: hidden; transition: width .2s; height: 100%; min-height: 560px; }
.eg-frame.desktop { width: min(680px, 100%); } .eg-frame.mobile { width: 375px; border-radius: 28px; border: 8px solid #1F2937; }
.eg-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.eg-side { border-inline-start: 1px solid #E4E6F0; padding: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: .65rem; }
.eg-desc { margin: 0 0 .25rem; line-height: 1.55; color: #374151; }
.eg-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-muted); margin-top: .5rem; }
.eg-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.eg-swatches { display: flex; gap: .5rem; } .eg-swatches i { width: 34px; height: 34px; border-radius: 10px; display: block; }
.eg-fontname { font-size: 1.15rem; }
.eg-pop-actions { margin-top: auto; display: grid; gap: .6rem; padding-top: 1rem; }
html[data-theme="dark"] .eg-card, html[data-theme="dark"] .eg-dialog, html[data-theme="dark"] .eg-search { background: #1F2230; border-color: #2D3140; }
html[data-theme="dark"] .eg-fade { background: linear-gradient(to top, rgba(31,34,48,.95), rgba(31,34,48,0)); }
html[data-theme="dark"] .eg-rail button { color: #D1D5DB; } html[data-theme="dark"] .eg-rail button:hover { background: #262A3A; } html[data-theme="dark"] .eg-rail button.on { background: #25274A; }
html[data-theme="dark"] .eg-stage { background: #151826; } html[data-theme="dark"] .eg-desc, html[data-theme="dark"] .eg-info p { color: #C4C9D8; }

/* ===== Project template gallery (pg-, pd-, to-, tm-) ===== */
.pg-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; margin: .25rem 0 1.5rem; }
.pg-title { margin: 0; font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; }
.pg-sub { margin: .35rem 0 0; color: #5B6478; max-width: 660px; line-height: 1.5; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1.4rem; }
.pg-card { background: #fff; border: 1px solid #E4E6F0; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; }
.pg-card:hover { box-shadow: 0 16px 38px rgba(20,22,56,.14); transform: translateY(-3px); }
.pg-banner { position: relative; display: block; width: 100%; height: 150px; border: 0; padding: 0; cursor: pointer; background: linear-gradient(130deg, var(--a), var(--b)); overflow: hidden; text-align: start; }
.pg-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.28), transparent 45%), radial-gradient(circle at 10% 110%, rgba(255,255,255,.18), transparent 40%); }
.pg-icon { position: absolute; inset-inline-start: 1.1rem; top: 1rem; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; font-size: 1.7rem; background: rgba(255,255,255,.95); border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.pg-banner .tm { position: absolute; inset-inline: 1.1rem; bottom: 1rem; }
.pg-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,18,45,.4); opacity: 0; transition: opacity .18s; }
.pg-banner:hover .pg-over, .pg-banner:focus-visible .pg-over { opacity: 1; }
.pg-banner:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.tm { display: grid; gap: 4px; } .tm-row { position: relative; height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); } .tm-row i { position: absolute; top: 0; height: 7px; border-radius: 4px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9) inset; }
.pg-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pg-body h3 { margin: 0; font-size: 1.1rem; } .pg-body p { margin: 0; color: #5B6478; font-size: .88rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .pg-chips span { background: #EEF0F6; color: #4B5563; border-radius: 999px; font-size: .74rem; font-weight: 600; padding: 3px 10px; }
.pd-hero { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; padding: 1.75rem 2rem; border-radius: 20px; color: #fff; background: linear-gradient(125deg, var(--a), var(--b)); position: relative; overflow: hidden; margin-bottom: 1.25rem; }
.pd-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 0%, rgba(255,255,255,.3), transparent 45%), radial-gradient(circle at 0% 120%, rgba(255,255,255,.2), transparent 40%); pointer-events: none; }
.pd-hero > * { position: relative; }
.pd-icon { width: 5rem; height: 5rem; display: grid; place-items: center; font-size: 2.6rem; background: rgba(255,255,255,.95); border-radius: 22px; box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.pd-text { flex: 1 1 320px; min-width: 0; } .pd-text h1 { margin: .15rem 0 .35rem; font-size: 2rem; letter-spacing: -.02em; } .pd-text p { margin: 0; font-size: 1.02rem; opacity: .95; max-width: 640px; line-height: 1.5; }
.pd-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pd-cta { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; } .pd-cta .mud-button-root { background: #fff !important; color: #1F2937 !important; font-weight: 700; }
.pd-back { background: transparent; border: 0; color: #fff; font: inherit; font-size: .88rem; cursor: pointer; opacity: .9; text-decoration: underline; }
.pd-sticky { position: sticky; bottom: 12px; margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.25rem; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border: 1px solid #D5D9E6; border-radius: 14px; box-shadow: 0 10px 30px rgba(20,22,56,.18); z-index: 5; }
.pd-sticky div { display: flex; flex-direction: column; } .pd-sticky span { color: #6B7280; font-size: .82rem; }
.to { display: grid; gap: 1.25rem; }
.to-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.to-kpi { display: flex; gap: .9rem; align-items: center; background: #fff; border: 1px solid #E4E6F0; border-radius: 14px; padding: 1rem 1.1rem; }
.to-kpi b { display: block; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; } .to-kpi span { color: #6B7280; font-size: .82rem; }
.to-ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 1.15rem; flex: 0 0 auto; }
.to-ic.a { background: #E0E7FF; color: #4338CA; } .to-ic.b { background: #D1FAE5; color: #047857; } .to-ic.c { background: #FEF3C7; color: #B45309; } .to-ic.d { background: #FCE7F3; color: #BE185D; }
.to-card { background: #fff; border: 1px solid #E4E6F0; border-radius: 16px; padding: 1.25rem 1.35rem; min-width: 0; }
.to-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .9rem; } .to-head h3 { margin: 0; font-size: 1.1rem; } .to-head span { color: #6B7280; font-size: .85rem; }
.to-card .tg { border-radius: 12px; }
.to-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; } @media (max-width: 900px) { .to-two { grid-template-columns: 1fr; } }
.to-stack { display: flex; height: 22px; border-radius: 11px; overflow: hidden; background: #EEF0F6; gap: 2px; } .to-stack i { display: block; height: 100%; }
.to-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.to-legend li { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: .6rem; align-items: center; font-size: .9rem; } .to-legend i { width: 12px; height: 12px; border-radius: 4px; display: block; } .to-legend em { font-style: normal; color: #6B7280; text-align: end; }
.to-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .to-checks li { position: relative; padding-inline-start: 1.8rem; line-height: 1.45; } .to-checks li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #D1FAE5; color: #047857; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.to-phases-head { margin: .5rem 0 -.25rem; }
.to-phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 1rem; }
.to-phase { background: #fff; border: 1px solid #E4E6F0; border-top: 4px solid var(--c); border-radius: 14px; padding: 1rem 1.15rem; }
.to-phase header { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; } .to-phase header b { display: block; } .to-phase header small { color: #6B7280; }
.to-num { width: 2rem; height: 2rem; border-radius: 10px; background: var(--c); color: #fff; font-weight: 700; display: grid; place-items: center; }
.to-phase ul { list-style: none; margin: 0; padding: 0; } .to-phase li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid #F1F2F8; font-size: .88rem; }
.to-meta { color: #6B7280; white-space: nowrap; font-size: .8rem; }
.tg-htime { display: block; background-image: none !important; } .tg-months { position: relative; height: 18px; border-bottom: 1px solid #E4E6F0; } .tg-months span { position: absolute; top: 0; height: 18px; line-height: 18px; font-size: .66rem; text-transform: none; letter-spacing: 0; font-weight: 700; color: #4F46E5; border-inline-start: 2px solid #C7D2FE; padding-inline-start: 6px; white-space: nowrap; }
.tg-weeks { display: grid; grid-template-columns: repeat(var(--tg-cols), 1fr); } .tg-head { min-height: 50px; }
html[data-theme="dark"] .pg-card, html[data-theme="dark"] .to-card, html[data-theme="dark"] .to-kpi, html[data-theme="dark"] .to-phase, html[data-theme="dark"] .pd-sticky { background: #1F2230; border-color: #2D3140; }
html[data-theme="dark"] .pg-body p, html[data-theme="dark"] .pg-sub { color: #C4C9D8; }

/* ===== Lead finder (ld-) ===== */
.ld-head { margin: .25rem 0 1rem; } .ld-title { margin: 0; font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; } .ld-sub { margin: .35rem 0 0; color: #5B6478; max-width: 720px; line-height: 1.5; }
.ld-form { padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.ld-grid { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(200px, 1.4fr) minmax(150px, 1fr) auto auto; gap: .9rem 1rem; align-items: end; } @media (max-width: 1100px) { .ld-grid { grid-template-columns: 1fr 1fr; } }
.ld-checks { display: flex; flex-direction: column; gap: .35rem; padding-bottom: .35rem; } .ld-go { padding-bottom: 2px; }
.ld-empty { display: grid; gap: .35rem; justify-items: center; text-align: center; padding: 3rem 1rem; color: #6B7280; border: 1px dashed #CBD0E1; border-radius: 16px; } .ld-empty b { color: #1F2937; font-size: 1.05rem; }
.ld-bar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; margin: .75rem 0; }
.ld-count { font-size: .92rem; color: #4B5563; } .ld-actions, .ld-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ld-table-card { padding: 0; overflow: hidden; } .ld-table td { vertical-align: top; } .ld-cb { width: 36px; } .ld-nowrap { white-space: nowrap; }
.ld-table tr.is-sel { background: #EEF2FF; } .ld-chip { font-size: .74rem; color: #6B7280; margin-top: 2px; } .ld-ok { color: #047857; font-weight: 600; }
.ld-mail { color: #4338CA; font-weight: 600; word-break: break-all; } .ld-status { min-width: 120px; padding: 4px 8px; }
.ld-pager { display: flex; gap: 1rem; justify-content: center; align-items: center; padding: .75rem; font-size: .85rem; color: #6B7280; }
.ld-market { padding: 1rem 1.25rem; margin-bottom: .75rem; display: grid; gap: .65rem; } .ld-market-row { display: flex; gap: .6rem; flex-wrap: wrap; } .ld-market-row .set-input { min-width: 220px; }
.ld-care { margin-top: 1.25rem; }
html[data-theme="dark"] .ld-table tr.is-sel { background: #25274A; } html[data-theme="dark"] .ld-empty b { color: #E5E7EB; }
.ld-sources { margin: .25rem 0 .5rem; }

/* The Kaam360 logo stays at the top of the menu while the menu itself scrolls. */
.nx-nav-brand { position: sticky; top: 0; z-index: 5; background: var(--nx-nav); }
.nx-drawer .mud-drawer-content { height: auto !important; max-height: none !important; min-height: 100%; overflow: visible !important; }

/* --- Grouped menu: one collapsible group per module ----------------------------- */
.nx-drawer .nx-menu { padding-bottom: .5rem; }
.nx-drawer .nx-grp { margin: 2px 0; }
.nx-drawer .nx-grp > .mud-nav-link {
    margin: 1px 8px; font-weight: 560; font-size: 0.875rem; color: #fff;
}
.nx-drawer .nx-grp > .mud-nav-link .mud-icon-root { opacity: .95; color: var(--nx-300); }
.nx-drawer .nx-grp > .mud-nav-link .mud-nav-link-expand-icon { opacity: .55; font-size: 1.1rem; }
.nx-drawer .nx-grp.is-current > .mud-nav-link { background: rgba(255, 255, 255, 0.07); }
.nx-drawer .nx-grp .mud-collapse-container .mud-navmenu,
.nx-drawer .nx-grp .mud-collapse-wrapper { position: relative; }
/* The pages of a group sit under it, tucked in, joined by a thin line. */
.nx-drawer .nx-grp .mud-collapse-wrapper::before {
    content: ""; position: absolute; left: 24px; top: 2px; bottom: 6px; width: 1px; background: var(--nx-nav-line);
}
.nx-drawer .nx-grp .mud-nav-link:not(:first-child),
.nx-drawer .nx-grp .mud-collapse-wrapper .mud-nav-link { margin-left: 34px; margin-right: 8px; padding-left: .5rem; min-height: 32px; font-size: 0.8281rem; font-weight: 440; }
.nx-drawer .nx-grp .mud-collapse-wrapper .mud-nav-link .mud-icon-root { display: none; }
.nx-drawer .nx-grp .mud-collapse-wrapper .mud-nav-link .mud-nav-link-text { padding-left: .25rem; }
.nx-nav-sub { margin: .55rem 0 .15rem 44px; font-size: .6563rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-nav-text-dim); opacity: .8; }
/* Sub-headings directly in the menu (Administration), not inside a module: lined up with the links' text. */
.nx-nav-sub.is-top { margin-left: 52px; }
.nx-grp-body > .nx-nav-sub:first-child { margin-top: .25rem; }
.nx-drawer .nx-grp.has-badge > .mud-nav-link::after {
    content: attr(data-badge); margin-inline-start: auto; background: #E5484D; color: #fff; font-size: .6875rem; font-weight: 700;
    border-radius: 999px; padding: 0 .4rem; min-width: 1.15rem; text-align: center; line-height: 1.15rem;
}

/* Module headers are plain buttons (the menu opens and closes them itself). */
.nx-drawer .nx-grp-head { width: calc(100% - 16px); border: 0; background: transparent; cursor: pointer; text-align: start; display: flex; align-items: center; gap: .75rem; font-family: inherit; }
.nx-drawer .nx-grp-head:hover { background: var(--nx-nav-hover); }
.nx-drawer .nx-grp-title { flex: 1; }
.nx-drawer .nx-grp-chev { opacity: .55; font-size: 1.1rem; transition: transform .2s ease; transform: rotate(-90deg); }
.nx-drawer .nx-grp-head[aria-expanded="true"] .nx-grp-chev { transform: rotate(0); }
.nx-drawer .nx-grp-body { position: relative; }
.nx-drawer .nx-grp-body::before { content: ""; position: absolute; left: 24px; top: 2px; bottom: 6px; width: 1px; background: var(--nx-nav-line); }
.nx-drawer .nx-grp-body .mud-nav-link { margin-left: 34px; margin-right: 8px; padding-left: .5rem; min-height: 32px; font-size: 0.8281rem; font-weight: 440; }
.nx-drawer .nx-grp-body .mud-nav-link .mud-icon-root { display: none; }
.nx-drawer .nx-grp:not(.is-open) > .nx-grp-body { display: none; }

/* Account menu: buttons (dark mode, log out) line up with the links above them. */
.nx-user-pop-item { justify-content: flex-start; text-align: start; }
.nx-user-pop form { margin: 0; }
.nx-tag.is-client { background: rgba(79,70,229,.1); color: #4338CA; }

/* Client portal: the small menu for a signed-in client user. */
.pt-nav { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; font-size: .9rem; }
.pt-nav a { color: inherit; text-decoration: none; opacity: .9; }
.pt-nav a:hover { text-decoration: underline; }
.pt-nav form { margin: 0; }
.pt-linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; opacity: .9; }
.pt-linkbtn:hover { text-decoration: underline; }
.usr-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--nx-line, rgba(23,21,59,.12)); }
.usr-tabs a { padding: 9px 16px; text-decoration: none; color: inherit; opacity: .7; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.usr-tabs a.is-on { opacity: 1; border-bottom-color: var(--nx-600, #4F46E5); color: var(--nx-700, #4338CA); }

/* E-signature: the signing page. */
.sg-frame { width: 100%; height: 70vh; min-height: 420px; border: 1px solid rgba(23,21,59,.15); border-radius: 10px; background: #fff; margin: 10px 0 4px; }
.sg-kinds { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 8px; }
.sg-pad { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; border: 1.5px dashed rgba(23,21,59,.35); border-radius: 10px; background: #fff; touch-action: none; display: block; cursor: crosshair; }
.sg-clear { margin-top: 4px; color: #4338CA; opacity: 1; }
.sg-remember { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: 13px; }
.sg-consent { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0; font-size: .92rem; }
.sg-consent input { margin-top: 4px; }
.pt-btnghost { background: transparent !important; color: inherit !important; border: 1px solid rgba(23,21,59,.3) !important; }

/* Running timer chip (top bar) and the timer / start-end-time controls on the time log */
.tm-chip { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; margin-inline-end: 8px;
    border: 1px solid var(--nx-ring-strong); border-radius: 999px; background: var(--nx-plane); font-size: 13px; max-width: 320px; }
.tm-dot { width: 8px; height: 8px; border-radius: 50%; background: #d93025; animation: tm-blink 1.4s infinite; flex: none; }
@keyframes tm-blink { 50% { opacity: .3; } }
.tm-name { color: var(--nx-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.tm-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.tm-stop { border: 0; background: #d93025; color: #fff; border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.tm-pop { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 50; width: 280px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
    background: var(--nx-plane); border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.tm-notes { font: inherit; font-size: 13px; padding: 7px 9px; color: var(--nx-ink); background: var(--nx-plane); border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); }
.tm-check { font-size: 13px; display: flex; gap: 6px; align-items: center; }
.tm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tl-modes { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tl-mode { border: 1px solid var(--nx-ring-strong); background: var(--nx-plane); color: var(--nx-ink); border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 12.5px; cursor: pointer; }
.tl-mode.is-on { background: var(--nx-ink); color: var(--nx-plane); border-color: var(--nx-ink); }
.tl-calc { font-size: 13px; color: var(--nx-ink-2); align-self: end; padding-bottom: 8px; }
.tl-calc strong { color: var(--nx-ink); }
.tl-timer-box { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.tp-timer { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tp-timer .tm-clock { font-size: 15px; }
.tl-range { font-size: 11px; color: var(--nx-ink-2); font-weight: 400; }

/* E-signature: pages with boxes (editor and signing) */
.sg-page { position: relative; width: 100%; background: #fff; box-shadow: 0 1px 4px rgba(20,22,46,.18); margin: 0 auto 14px; max-width: 900px; }
.sg-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sg-layer { position: absolute; inset: 0; }
.sg-pageno { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: #555; background: rgba(255,255,255,.8); padding: 0 6px; border-radius: 6px; pointer-events: none; }
.sg-loading, .sg-err { padding: 24px; text-align: center; color: var(--nx-ink-2); }
.sg-err { color: #b91c1c; }
.sg-ed { display: block; }
.sg-ed-main { min-width: 0; }
.sg-ed-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px; background: var(--nx-surface); border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); }
.sg-ed-who select { font: inherit; padding: 5px 8px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: var(--nx-plane); color: var(--nx-ink); }
.sg-ed-palette { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-ed-tool { border: 1px solid var(--nx-ring-strong); background: var(--nx-plane); color: var(--nx-ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sg-ed-tool.is-on { background: var(--nx-ink); color: var(--nx-plane); }
.sg-ed-hint { font-size: 12.5px; color: var(--nx-ink-2); margin: 8px 2px 10px; }
.sg-ed-stage.is-armed .sg-layer { cursor: crosshair; }
.sg-ed-side { position: sticky; top: 72px; padding: 14px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: var(--nx-surface); }
.sg-ed-side h3 { margin: 0 0 10px; font-size: 14px; }
.sg-ed-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--nx-ink-2); }
.sg-ed-row input[type="text"], .sg-ed-row select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: var(--nx-plane); color: var(--nx-ink); }
.sg-ed-check { flex-direction: row; align-items: center; gap: 8px; }
.sg-ed-none { font-size: 12.5px; color: var(--nx-ink-2); margin: 0; }
.sg-ed-del { border: 1px solid #fca5a5; background: transparent; color: #b91c1c; border-radius: var(--nx-r-xs); padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sg-ed-actions { margin-top: 14px; }
.sg-box { position: absolute; border: 2px solid; border-radius: 4px; cursor: move; touch-action: none; user-select: none; overflow: hidden; }
.sg-box.is-opt { border-style: dashed; }
.sg-box.is-sel { box-shadow: 0 0 0 3px rgba(67,56,202,.35); }
.sg-box-cap { position: absolute; left: 3px; top: 1px; right: 12px; font-size: 10px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sg-box-handle { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: currentColor; cursor: nwse-resize; border-top-left-radius: 4px; }
.sg-fill-bar { position: sticky; top: 0; z-index: 5; background: var(--nx-surface); padding-bottom: 8px; }
.sg-fill-help { font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sg-fill-stage { margin-top: 6px; }
.sg-fld { position: absolute; border-radius: 4px; box-sizing: border-box; }
.sg-fld.is-other { border: 1px dashed #9aa0b8; background: rgba(154,160,184,.12); }
.sg-fld.is-other .sg-fld-cap { font-size: 10px; color: #6b7090; padding: 1px 4px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-fld.is-mine { border: 2px solid #4338ca; background: rgba(250,204,21,.28); }
.sg-fld.is-mine.is-done { border-color: #15803d; background: rgba(34,197,94,.14); }
.sg-fld .sg-fld-cap { font-size: 11px; font-weight: 700; color: #4338ca; padding: 1px 5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-fld.is-done .sg-fld-cap { display: none; }
.sg-fld[role="button"] { cursor: pointer; }
.sg-fld-ink { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sg-ink { max-width: 100%; max-height: 100%; }
.sg-typed { font-family: 'Segoe Script', 'Brush Script MT', cursive, serif; font-style: italic; font-size: 1.1em; color: #1e1b6b; white-space: nowrap; }
.sg-fld-auto { display: block; font-size: 11px; padding: 2px 4px; color: #1e1b6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-fld input[type="text"], .sg-fld select { width: 100%; height: 100%; box-sizing: border-box; border: 0; background: transparent; font: inherit; font-size: 12px; padding: 0 4px; color: #14162e; }
.sg-fld input[type="checkbox"] { width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sg-nudge { animation: sg-pulse .5s ease 3; }
@keyframes sg-pulse { 50% { box-shadow: 0 0 0 6px rgba(67,56,202,.45); } }
.sg-initials { margin-top: 12px; }
.sg-initials h3 { font-size: 14px; margin: 0 0 6px; }
/* Written terms on the signing page (#367 E3), the witness box (E1) */
.sg-terms { padding-inline-start: 1.4rem; margin: 8px 0 0; }
.sg-terms li { margin: 0 0 14px; }
.sg-term-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; line-height: 1.5; }
.sg-term-wait { margin-top: 8px; }
.sg-suggest { margin-top: 6px; }
.sg-suggest summary { cursor: pointer; color: #4338CA; font-size: .9rem; }
.sg-suggest form { margin-top: 8px; }
.sg-witness { margin-top: 16px; padding-top: 12px; border-top: 1px solid #F2F3F9; }
.sg-witness h3 { font-size: 14px; margin: 0 0 6px; }
html[data-theme="dark"] .sg-suggest summary { color: #A5B4FC; }
html[data-theme="dark"] .sg-witness { border-color: var(--nx-ring); }
.sg-pad-sm { max-width: 240px; }
@media (max-width: 900px) { .sg-ed { grid-template-columns: 1fr; } .sg-ed-side { position: static; } }

.tp-move-btn { margin-inline-start: 8px; border: 1px solid var(--nx-ring-strong); background: transparent; color: var(--nx-accent); border-radius: 999px; padding: 1px 10px; font: inherit; font-size: 11.5px; cursor: pointer; }
.tp-move { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tp-move select { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: var(--nx-plane); color: var(--nx-ink); max-width: 200px; }
.sg-stat { text-align: start; cursor: pointer; border: 1px solid transparent; font: inherit; }
.sg-stat.is-on { border-color: var(--nx-accent); box-shadow: 0 0 0 2px rgba(67,56,202,.15); }

/* E-signature box editor: thumbnails | document | recipients and boxes */
.ed-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--nx-surface); border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs) var(--nx-r-xs) 0 0; flex-wrap: wrap; }
.ed-ico { border: 0; background: transparent; color: var(--nx-ink); width: 30px; height: 30px; border-radius: 6px; font-size: 15px; cursor: pointer; }
.ed-ico:hover:not(:disabled) { background: var(--nx-surface-3, rgba(0,0,0,.06)); }
.ed-ico:disabled { opacity: .35; cursor: default; }
.ed-sep { width: 1px; height: 20px; background: var(--nx-ring-strong); margin: 0 4px; }
.ed-pageno { width: 52px; font: inherit; font-size: 13px; text-align: center; padding: 3px; border: 1px solid var(--nx-ring-strong); border-radius: 6px; background: var(--nx-plane); color: var(--nx-ink); }
.ed-of, .ed-zoom { font-size: 13px; color: var(--nx-ink-2); min-width: 40px; text-align: center; }
.ed-hint { flex: 1 1 240px; font-size: 12.5px; color: var(--nx-ink-2); text-align: end; }
.ed-body { display: grid; grid-template-columns: 130px minmax(0, 1fr) 290px; height: 78vh; min-height: 520px; border: 1px solid var(--nx-ring-strong); border-top: 0; border-radius: 0 0 var(--nx-r-xs) var(--nx-r-xs); overflow: hidden; background: var(--nx-surface); }
.ed-thumbs { overflow-y: auto; padding: 10px 8px; border-inline-end: 1px solid var(--nx-ring-strong); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ed-thumb { border: 2px solid transparent; background: transparent; padding: 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--nx-ink-2); }
.ed-thumb canvas { box-shadow: 0 1px 3px rgba(0,0,0,.25); background: #fff; display: block; }
.ed-thumb.is-on { border-color: var(--nx-accent); }
.ed-stage { overflow: auto; background: #e6e7ec; padding: 14px 10px; position: relative; }
.ed-stage .ed-pages { margin: 0 auto; width: 100%; }
.ed-stage .sg-page { max-width: none; }
.ed-side { overflow-y: auto; border-inline-start: 1px solid var(--nx-ring-strong); padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.ed-side h3 { margin: 0 0 8px; font-size: 13px; }
.ed-person { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-inline-start: 3px solid transparent; background: transparent; color: var(--nx-ink); font: inherit; font-size: 13px; text-align: start; cursor: pointer; border-radius: 4px; }
.ed-person:hover { background: var(--nx-surface-3, rgba(0,0,0,.05)); }
.ed-person.is-on { background: rgba(15,118,110,.12); border-inline-start-color: #0f766e; }
.ed-av { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.ed-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-tool { display: flex; align-items: stretch; justify-content: space-between; border: 1px solid #0f766e; background: var(--nx-plane); color: var(--nx-ink); border-radius: 3px; padding: 0; font: inherit; font-size: 12px; cursor: grab; overflow: hidden; touch-action: none; }
.ed-tool-name { padding: 6px 8px; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-tool-ico { background: #0f766e; color: #fff; width: 26px; display: grid; place-items: center; font-size: 12px; flex: none; }
.ed-tool.is-on { box-shadow: 0 0 0 2px rgba(15,118,110,.4); }
.ed-ghost { position: fixed; z-index: 1000; pointer-events: none; border: 2px dashed #0f766e; padding: 4px 10px; font-size: 12px; border-radius: 3px; background: rgba(15,118,110,.2); color: #0f766e; font-weight: 600; }
.ed-props-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ed-props-head h3 { margin: 0; font-size: 15px; }
.ed-x { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--nx-ink-2); }
.ed-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; font-size: 12px; color: var(--nx-ink-2); }
.ed-row.is-inline { flex-direction: row; align-items: center; gap: 8px; color: var(--nx-ink); font-size: 13px; }
.ed-row input[type="text"], .ed-row input[type="number"], .ed-row input[type="date"], .ed-row select, .ed-row textarea { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: var(--nx-plane); color: var(--nx-ink); width: 100%; box-sizing: border-box; }
.ed-help { color: var(--nx-ink-2); font-size: 11px; }
.ed-del { width: 100%; border: 1px solid #fca5a5; background: transparent; color: #b91c1c; border-radius: var(--nx-r-xs); padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; margin-top: 6px; }
.ed-menu { position: fixed; z-index: 1001; min-width: 190px; background: var(--nx-plane); border: 1px solid var(--nx-ring-strong); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.2); padding: 4px; display: flex; flex-direction: column; }
.ed-menu button { border: 0; background: transparent; color: var(--nx-ink); font: inherit; font-size: 13px; text-align: start; padding: 6px 10px; border-radius: 4px; cursor: pointer; white-space: pre; }
.ed-menu button:hover { background: var(--nx-surface-3, rgba(0,0,0,.06)); }
.ed-menu button.is-danger { color: #b91c1c; }
.ed-menu-sep { height: 1px; background: var(--nx-ring-strong); margin: 4px 0; }
.ed-menu-head { font-size: 11px; color: var(--nx-ink-2); padding: 4px 10px 2px; }
.ed-toast { position: fixed; z-index: 1002; left: 50%; bottom: 28px; transform: translateX(-50%); background: #1f2937; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.ed-toast button { border: 0; background: transparent; color: #7dd3fc; font: inherit; font-weight: 700; cursor: pointer; margin-inline-start: 8px; }
.sg-box { border-style: dashed; }
@media (max-width: 1000px) { .ed-body { grid-template-columns: 1fr; height: auto; } .ed-thumbs { display: none; } .ed-stage { max-height: 70vh; } .ed-side { border-inline-start: 0; border-top: 1px solid var(--nx-ring-strong); } }
.sg-fld.sg-fld-radio { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 2px 6px; font-size: 12px; overflow: hidden; }
.sg-fld.sg-fld-radio label { display: flex; align-items: center; gap: 4px; cursor: pointer; line-height: 1.2; }
.sg-fld.is-bad { border-color: #dc2626 !important; background: rgba(220,38,38,.12) !important; }
.sg-fld input[type="date"] { width: 100%; height: 100%; box-sizing: border-box; border: 0; background: transparent; font: inherit; font-size: 12px; padding: 0 4px; color: #14162e; }

/* E-signature documents list */
.es-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 12px; border-bottom: 1px solid var(--nx-ring-strong); }
.es-tab { border: 0; background: transparent; color: var(--nx-ink-2); font: inherit; font-size: 13.5px; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.es-tab:hover { color: var(--nx-ink); }
.es-tab.is-on { color: var(--nx-accent); border-bottom-color: var(--nx-accent); font-weight: 600; }
/* Written terms on a request, suggested changes and versions (#367 E3); clause library; record keeping (E4) */
.es-terms { padding-inline-start: 1.4rem; margin: 4px 0 10px; }
.es-terms li { margin: 0 0 12px; }
.es-term-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-term-actions { display: inline-flex; gap: 2px; }
.es-term-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--nx-ink-2); font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.es-term-add { border-top: 1px solid var(--nx-ring); padding-top: 10px; margin-top: 6px; }
.es-term-own summary { cursor: pointer; color: var(--nx-accent); font-size: 13.5px; margin: 4px 0 8px; }
.es-term-sub { font-size: 14px; font-weight: 600; margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.es-sugg { border: 1px solid var(--nx-ring); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.es-sugg.is-open { border-color: var(--nx-accent); }
.es-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0; }
.es-old { text-decoration: line-through; opacity: .75; }
.es-new { color: var(--nx-ink); }
@media (max-width: 640px) { .es-diff { grid-template-columns: 1fr; } }
.es-company { border: 1px solid var(--nx-ring); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.es-company-opts { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.es-clause-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 4.5em; overflow: hidden; color: var(--nx-ink-2); font-size: 12.5px; }
.es-badge { background: #dc2626; color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; min-width: 18px; text-align: center; line-height: 18px; }
.es-cols { position: relative; margin-inline-start: auto; }
.es-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30; background: var(--nx-plane); border: 1px solid var(--nx-ring-strong); border-radius: 8px; padding: 8px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 6px; min-width: 190px; font-size: 13px; }
.es-wrap { overflow-x: auto; }
.es-people div { white-space: nowrap; font-size: 12.5px; }
.es-act { position: relative; text-align: end; }
.es-modal { position: fixed; inset: 0; z-index: 1100; background: rgba(15,18,40,.45); display: grid; place-items: center; padding: 16px; }
.es-modal-card { background: var(--nx-plane); border-radius: 12px; padding: 20px; width: min(640px, 100%); max-height: 86vh; overflow: auto; box-shadow: 0 16px 48px rgba(0,0,0,.35); }
.es-modal-card h3 { margin: 0 0 4px; }
.es-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.es-hist { max-height: 50vh; overflow: auto; margin-top: 8px; }
.es-kind { display: inline-block; font-size: 10.5px; font-weight: 700; border: 1px solid var(--nx-ring-strong); border-radius: 4px; padding: 0 5px; margin-inline-end: 4px; text-transform: uppercase; }
.es-recent { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }

/* e-signature: recipients table and people picker */
.rc-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rc-row { border: 1px solid var(--nx-border, #e3e5ef); border-radius: 10px; padding: 8px; background: var(--nx-surface, #fff); }
.rc-main { display: grid; grid-template-columns: auto 1fr 1.2fr 150px auto auto; gap: 8px; align-items: center; }
.rc-main:not(:has(.rc-order)) { grid-template-columns: 1fr 1.2fr 150px auto; }
.rc-order { display: flex; align-items: center; gap: 4px; }
.rc-num { width: 56px; padding-inline: 6px; text-align: center; }
.rc-arrow { border: 1px solid var(--nx-border, #e3e5ef); background: transparent; border-radius: 6px; width: 26px; height: 30px; cursor: pointer; color: inherit; }
.rc-arrow:disabled { opacity: .35; cursor: default; }
.rc-custom { border: 1px solid var(--nx-border, #e3e5ef); background: transparent; border-radius: 8px; padding: 6px 12px; cursor: pointer; color: inherit; font: inherit; font-size: .85rem; white-space: nowrap; }
.rc-custom.is-on, .rc-custom.has-value { border-color: var(--nx-primary, #5b4bdb); color: var(--nx-primary, #5b4bdb); }
.rc-custom:disabled { opacity: .4; cursor: default; }
.rc-custom-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--nx-border, #e3e5ef); }
.rc-picker { border: 1px solid var(--nx-border, #e3e5ef); border-radius: 10px; padding: 10px; margin: 8px 0 12px; max-height: 360px; overflow: auto; }
.rc-picker-bar { display: grid; grid-template-columns: 1fr 160px auto; gap: 8px; align-items: center; margin-bottom: 8px; position: sticky; top: 0; background: var(--nx-surface, #fff); padding-bottom: 6px; }
.rc-group { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin: 10px 0 4px; }
.rc-pick { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; }
.rc-pick:hover { background: rgba(91, 75, 219, .07); }
.rc-pick small { opacity: .65; margin-inline-start: 6px; }
.rc-pick.is-added { opacity: .55; cursor: default; }
.rc-pick em { margin-inline-start: auto; font-size: .75rem; }
@media (max-width: 800px) { .rc-main, .rc-main:not(:has(.rc-order)) { grid-template-columns: 1fr 1fr; } .rc-picker-bar { grid-template-columns: 1fr; } }

/* e-signature: list toolbar, advanced search, filter row */
.es-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 4px; font-size: .85rem; }
.es-toolbar .es-show { display: inline-flex; align-items: center; gap: 6px; }
.es-toolbar .es-show select { width: 76px; padding-block: 4px; }
.es-toolbar .es-sel { font-weight: 600; }
.es-pager { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; }
.es-check { width: 32px; }
.es-filter-row th { padding: 4px; background: transparent; font-weight: normal; }
.es-filter-row .set-input { padding: 4px 8px; font-size: .8rem; width: 100%; min-width: 80px; }
.es-adv { border: 1px solid var(--nx-border, #e3e5ef); border-radius: 10px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.es-adv-row { display: grid; grid-template-columns: 220px auto 1fr auto auto; gap: 8px; align-items: center; }
.es-adv-op { opacity: .7; font-size: .85rem; }
.es-adv-actions { display: flex; justify-content: flex-end; }
@media (max-width: 800px) { .es-adv-row { grid-template-columns: 1fr 1fr; } }

/* e-signature: handwriting styles (SIL Open Font License, see /lib/sign-fonts), pen colours and the picture upload */
@font-face { font-family: 'Great Vibes'; font-display: swap; src: url('/lib/sign-fonts/great-vibes-latin-400-normal.woff2') format('woff2'), url('/lib/sign-fonts/great-vibes-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'Dancing Script'; font-display: swap; src: url('/lib/sign-fonts/dancing-script-latin-400-normal.woff2') format('woff2'), url('/lib/sign-fonts/dancing-script-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'Caveat'; font-display: swap; src: url('/lib/sign-fonts/caveat-latin-400-normal.woff2') format('woff2'), url('/lib/sign-fonts/caveat-latin-400-normal.woff') format('woff'); }
.sg-font-script { font-family: 'Great Vibes', cursive !important; font-style: normal !important; }
.sg-font-flow { font-family: 'Dancing Script', cursive !important; font-style: normal !important; }
.sg-font-hand { font-family: 'Caveat', cursive !important; font-style: normal !important; }
.sg-fonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 8px 0; }
.sg-font { display: flex; align-items: center; gap: 8px; border: 1.5px solid rgba(23,21,59,.2); border-radius: 10px; padding: 8px 12px; cursor: pointer; background: #fff; }
.sg-font:has(input:checked) { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79,70,229,.18); }
.sg-font-preview { font-size: 1.7rem; line-height: 1.2; color: #1e1b6b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-colours { display: flex; gap: 10px; margin: 8px 0 4px; }
.sg-colour { position: relative; width: 26px; height: 26px; cursor: pointer; }
.sg-colour input { position: absolute; opacity: 0; inset: 0; }
.sg-colour span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(23,21,59,.3); }
.sg-colour input:checked + span { box-shadow: 0 0 0 2.5px #4f46e5; }
.sg-c-black span { background: #111111; } .sg-c-blue span { background: #1b3fa0; } .sg-c-red span { background: #b3261e; } .sg-c-green span { background: #1b7f3b; }
.sg-upload-preview { display: block; max-width: 300px; max-height: 120px; margin: 8px 0; }
.sg-upload-preview:not([src]) { display: none; }

/* ---- Billing page ---- */
.bl-status{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding:22px 24px;border-radius:18px;background:linear-gradient(135deg,#312e81 0%,#4f46e5 60%,#7c3aed 120%);color:#fff;margin-bottom:26px;box-shadow:0 14px 34px -18px rgba(79,70,229,.7)}
.bl-eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.bl-status-title{font-size:26px;font-weight:750;letter-spacing:-.02em;margin:2px 0 4px}
.bl-status-text{margin:0;max-width:56ch;opacity:.92;font-size:14px}
.bl-status-side{display:flex;flex-direction:column;gap:10px;min-width:230px}
.bl-people{font-size:14px}.bl-people strong{font-size:20px}
.bl-meter{height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}.bl-meter-fill{height:100%;border-radius:99px;background:#fff}
.bl-status .nx-btn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}.bl-status .nx-btn:hover{background:rgba(255,255,255,.24)}
.bl-h{font-size:18px;font-weight:700;margin:0 0 4px}
.bl-note{color:var(--nx-muted,#5b6082);font-size:13.5px;margin:4px 0 16px}
/* Billing: the payments list (#634) scrolls sideways on a phone rather than squeezing. */
.bl-table-wrap{overflow-x:auto}
.bl-table-wrap td.num,.bl-table-wrap th.num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.bl-invoice-btn{padding:4px 10px;font-size:13px;white-space:nowrap}
/* The currency switch beside the price note on the Billing page; it drops below the note on a phone. */
.bl-cur-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}.bl-cur-row .bl-note{flex:1 1 320px}
.bl-cur{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--nx-muted,#5b6082);margin:0 0 14px}.bl-cur .set-input{width:auto;min-width:200px;max-width:100%}
@media (max-width:600px){.bl-cur{flex:1 1 100%;flex-wrap:wrap}.bl-cur .set-input{flex:1 1 100%;min-width:0}}
.bl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px, 100%),1fr));gap:16px;margin-bottom:22px}
.bl-plan{position:relative;text-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 20px 18px;border-radius:18px;border:1.5px solid var(--nx-ring,#e1e4f2);background:var(--nx-surface,#fff);cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.bl-plan:hover{transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(20,22,46,.35)}
.bl-plan.is-on{border-color:#4f46e5;box-shadow:0 0 0 4px rgba(79,70,229,.14),0 14px 30px -16px rgba(79,70,229,.5)}
.bl-ribbon{position:absolute;top:-11px;inset-inline-start:18px;background:#4f46e5;color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:99px}
.bl-plan-name{font-size:18px;font-weight:750}.bl-plan-tag{font-size:13px;color:var(--nx-muted,#5b6082)}
.bl-price{display:flex;align-items:baseline;gap:6px;margin:8px 0 6px}.bl-price b{font-size:34px;letter-spacing:-.03em}.bl-price i{font-style:normal;font-size:12.5px;color:var(--nx-muted,#5b6082)}
.bl-feats{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;font-size:13px;flex:1}
.bl-feats li{padding-inline-start:22px;position:relative}.bl-feats li::before{content:"";position:absolute;inset-inline-start:2px;top:.45em;width:10px;height:6px;border-inline-start:2px solid #16a34a;border-bottom:2px solid #16a34a;transform:rotate(-45deg)}
.bl-pick{align-self:flex-start;font-weight:650;font-size:13px;padding:7px 14px;border-radius:10px;background:#eef0ff;color:#4338ca}.bl-plan.is-on .bl-pick{background:#4f46e5;color:#fff}
.bl-pay{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;padding:20px 22px;border-radius:18px;background:var(--nx-surface,#fff);border:1px solid var(--nx-ring,#e1e4f2);box-shadow:0 8px 24px -16px rgba(20,22,46,.25);margin-bottom:10px}
.bl-seats label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--nx-muted,#5b6082);margin-bottom:6px}
.bl-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--nx-ring,#d9dcee);border-radius:12px;overflow:hidden}
.bl-step{width:40px;height:42px;border:0;background:#f4f5fc;font-size:20px;cursor:pointer;color:inherit}.bl-step:hover{background:#e9ebfb}
.bl-num{width:76px;height:42px;border:0;text-align:center;font:inherit;font-size:17px;font-weight:700;background:transparent;color:inherit;-moz-appearance:textfield}.bl-num::-webkit-outer-spin-button,.bl-num::-webkit-inner-spin-button{-webkit-appearance:none}
.bl-total{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px}.bl-total span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--nx-muted,#5b6082)}
.bl-total strong{font-size:26px;letter-spacing:-.02em}.bl-total small{color:var(--nx-muted,#5b6082);font-size:12.5px}
.bl-go{padding:12px 28px;font-size:15px}
/* Storage on Settings > Billing: the same card surface as the payment box, a meter on a light track, the kinds of file, the largest files and buying packs. */
.bl-card{padding:20px 22px;border-radius:18px;background:var(--nx-surface,#fff);border:1px solid var(--nx-ring,#e1e4f2);box-shadow:0 8px 24px -16px rgba(20,22,46,.25);margin-bottom:26px}
.bl-storage-head{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:flex-start}
.bl-storage-head .bl-note{margin-bottom:12px}
.bl-storage-big strong{font-size:26px;letter-spacing:-.02em}.bl-storage-big span{color:var(--nx-muted,#5b6082);font-size:13.5px;margin-inline-start:4px}
.bl-gauge{height:10px;border-radius:99px;background:var(--nx-surface-3,#f1f1f3);overflow:hidden}
.bl-gauge>i{display:block;height:100%;border-radius:99px;background:#4f46e5;transition:width .4s ease}
.bl-gauge.is-warn>i{background:var(--nx-warning,#FAB219)}.bl-gauge.is-full>i{background:var(--nx-critical,#D03B3B)}
.bl-storage-sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:12.5px;color:var(--nx-muted,#5b6082);margin:6px 0 14px}
.bl-sub-h{font-size:14px;font-weight:700;margin:16px 0 8px}
.bl-kinds{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bl-kinds li{display:grid;grid-template-columns:minmax(150px,1.2fr) 2fr minmax(70px,auto);gap:12px;align-items:center;font-size:13px}
.bl-kind-name small{display:block;color:var(--nx-muted,#5b6082);font-size:11.5px}
.bl-kind-bar{height:6px;border-radius:99px;background:var(--nx-surface-3,#f1f1f3);overflow:hidden}.bl-kind-bar>i{display:block;height:100%;background:var(--nx-ord-1,#818CF8);border-radius:99px}
.bl-kind-size{text-align:end;font-variant-numeric:tabular-nums;font-weight:600}
.bl-largest{margin-top:16px;border-top:1px solid var(--nx-ring,#e1e4f2);padding-top:12px}
.bl-largest>summary{cursor:pointer;font-weight:650;font-size:14px}
.bl-scroll{overflow-x:auto;margin-top:10px}
.bl-file{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-buy{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:16px;border-top:1px solid var(--nx-ring,#e1e4f2);padding-top:14px}
.bl-buy>div:first-child{flex:1 1 260px}.bl-buy .bl-note{margin-bottom:0}
.bl-buy-hint{flex-basis:100%}
.bl-feats li.bl-feat-space{font-weight:650}
@media (max-width:640px){.bl-kinds li{grid-template-columns:1fr auto}.bl-kind-bar{grid-column:1 / -1;order:3}.bl-buy .nx-btn{width:100%}}

/* ---- Email events page ---- */
.ev-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:14px;background:#f4f5fd;border:1px solid var(--nx-ring,#e1e4f2);margin-bottom:16px}
.ev-to{font-size:14px}.ev-to b{margin-inline-start:4px}
.ev-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.ev-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1px solid var(--nx-ring,#e1e4f2);background:var(--nx-surface,#fff);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:inherit}
.ev-tab:hover{background:#f4f5fd}.ev-tab.is-on{background:#4f46e5;border-color:#4f46e5;color:#fff}
.ev-count{font-size:11.5px;min-width:20px;text-align:center;padding:1px 6px;border-radius:99px;background:rgba(79,70,229,.12);color:#4338ca}.ev-tab.is-on .ev-count{background:rgba(255,255,255,.25);color:#fff}
.ev-list{display:grid;gap:10px}
.ev-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--nx-surface,#fff);border:1px solid var(--nx-ring,#e1e4f2);transition:box-shadow .15s,border-color .15s}
.ev-row:hover{border-color:#c7cbf5;box-shadow:0 8px 22px -16px rgba(79,70,229,.6)}
.ev-icon{width:36px;height:36px;border-radius:10px;background:#eef0ff;color:#4f46e5;display:grid;place-items:center;flex:none}
.ev-main{flex:1;min-width:0}.ev-name{font-weight:700;font-size:14.5px}.ev-when{font-size:13px;color:var(--nx-muted,#5b6082);margin-top:1px}
.ev-to-who{font-size:12.5px;color:var(--nx-muted,#5b6082);margin-top:3px}.ev-to-who span{font-weight:650;color:inherit;margin-inline-end:4px}
.ev-chip{margin-inline-start:8px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:#fef3c7;color:#92400e}
.ev-send{white-space:nowrap}
@media (max-width:640px){.ev-row{flex-wrap:wrap}.ev-send{width:100%}.bl-go{width:100%}}
.bl-plan>span,.bl-plan>ul{text-align:start;width:100%}.bl-plan>.bl-pick{width:auto}

/* ---- comments: pasted tables, editing ---- */
.comment-body .cm-text { white-space: pre-wrap; }
.cm-table-wrap { overflow-x: auto; margin: 6px 0; border: 1px solid var(--nx-ring, #e1e4f2); border-radius: 10px; }
.cm-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.cm-table th, .cm-table td { padding: 7px 11px; border-bottom: 1px solid var(--nx-ring, #e1e4f2); border-inline-end: 1px solid var(--nx-ring, #e1e4f2); text-align: start; vertical-align: top; white-space: pre-wrap; }
.cm-table th:last-child, .cm-table td:last-child { border-inline-end: 0; }
.cm-table tr:last-child td { border-bottom: 0; }
.cm-table th { background: rgba(79, 70, 229, .08); font-weight: 650; }
.cm-table tbody tr:nth-child(even) td, .cm-table tr:nth-child(even) td { background: rgba(120, 120, 160, .05); }
.cm-edited { font-style: italic; }
.cm-edit { margin-top: 4px; }
.cm-edit-box { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--nx-ring-strong, #c9cdea); border-radius: 10px; font: inherit; font-size: .86rem; background: var(--nx-card, #fff); color: inherit; resize: vertical; }
.cm-edit-box:focus { outline: 0; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.cm-edit-actions { display: flex; gap: 10px; margin-top: 4px; }
.cm-edit-error { color: #b91c1c; font-size: .8rem; margin-top: 4px; }
.cm-link.is-primary { color: #4f46e5; font-weight: 650; }

/* Project readiness badge: a count that opens the list of what is still missing (the list opens in a pop-up that is not clipped by the header) */
.rb-wrap{display:inline-flex}
.rb-badge{cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 7px;border-radius:999px;background:#FFFAEB;border:1px solid #FEDF89;color:#93370D;font-size:.8rem;font-weight:650}
.rb-count{min-width:1.1em;text-align:center}
.rb-popover{width:min(360px,88vw);max-width:none;border-radius:14px!important;border:1px solid #EAECF0;box-shadow:0 16px 40px -8px rgba(16,24,40,.22),0 4px 12px -4px rgba(16,24,40,.08)!important}
.rb-popover .mud-list{padding:0}
.rb-pop{padding:0;font-size:.875rem;color:#344054;white-space:normal;line-height:1.45}
.rb-pop-head{display:flex;align-items:center;gap:12px;padding:16px 18px 12px}
.rb-pop-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#FFF6E0;color:#B54708;flex:none}
.rb-pop-title{font-weight:650;font-size:.95rem;color:#101828;line-height:1.25}
.rb-pop-sub{font-size:.78rem;color:#667085;margin-top:1px}
.rb-pop-list{list-style:none;margin:0;padding:4px 6px 6px}
.rb-pop-list li{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:8px}
.rb-pop-list li+li{border-top:1px solid #F2F4F7;border-radius:0}
.rb-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#F79009;margin-top:.5em;box-shadow:0 0 0 3px #FEF0C7}
.rb-pop-foot{padding:11px 18px 14px;font-size:.78rem;color:#667085;background:#F9FAFB;border-top:1px solid #EAECF0;border-radius:0 0 14px 14px}
html[data-theme="dark"] .rb-badge{background:#4E3A0E;border-color:#7A5A12;color:#FEDF89}
html[data-theme="dark"] .rb-popover{border-color:#344054}
html[data-theme="dark"] .rb-pop{color:#D0D5DD}
html[data-theme="dark"] .rb-pop-title{color:#F2F4F7}
html[data-theme="dark"] .rb-pop-icon{background:#4E3A0E;color:#FEC84B}
html[data-theme="dark"] .rb-pop-list li+li{border-color:#344054}
html[data-theme="dark"] .rb-dot{box-shadow:0 0 0 3px #4E3A0E}
html[data-theme="dark"] .rb-pop-foot{background:#182230;border-color:#344054;color:#98A2B3}

/* My Tasks: project filter */
.mt-filter{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.mt-filter label{font-size:.85rem;font-weight:600;color:#475467}
.mt-filter select{max-width:320px}
/* My Tasks: the help-desk tickets given to the person (#596), under the tasks */
.mt-tickets-head{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-size:1rem;font-weight:700}
.mt-tickets-head .count{font-size:.75rem;font-weight:600;padding:1px 8px;border-radius:999px;background:#F2F4F7;color:#475467}
html[data-theme="dark"] .mt-tickets-head .count{background:#1D2939;color:#D0D5DD}

/* Support desk: clean-up of junk email tickets */
.dk-junk{margin-bottom:12px;padding:14px 16px;border-color:#FEDF89;background:#FFFCF5}
.dk-junk p{margin:0 0 8px}.dk-junk ul{margin:0 0 10px;padding-inline-start:18px}.dk-junk li{margin:3px 0}
html[data-theme="dark"] .dk-junk{background:#2A2210;border-color:#7A5A12}

/* Projects toolbar: the search box sits on the same line as the filters (an older rule gave it a bottom margin) */
.pl-toolbar .pl-search{margin-bottom:0}

/* ── New project: one full page ───────────────────────────────────────────────────────── */
.np-head{margin:4px 0 20px}.np-head h1{margin:0;font-size:1.65rem;font-weight:700;letter-spacing:-.01em}.np-head p{margin:4px 0 0;color:var(--nx-muted,#667085)}
.np-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.np-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.np-card{background:var(--nx-surface,#fff);border:1px solid #EAECF0;border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.np-card-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}.np-card-head h2{margin:0;font-size:1.02rem;font-weight:650;color:#101828}.np-card-head span{font-size:.8rem;color:#667085}
.np-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.np-mode{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;text-align:start;padding:14px 16px;border:1.5px solid #E4E7EC;border-radius:12px;background:#fff;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s,background .15s}
.np-mode:hover{border-color:#B2B6FF}.np-mode.on{border-color:var(--nx-accent,#4F46E5);background:#F5F6FF;box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.np-mode b{font-size:.92rem;color:#101828}.np-mode small{font-size:.78rem;color:#667085;line-height:1.35}
.np-mode-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:#EEF0FF;color:var(--nx-accent,#4F46E5);font-size:1rem;margin-bottom:6px}
.np-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px, 100%),1fr));gap:10px;margin-top:16px}
.np-tpl{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:start;padding:11px 14px;border:1.5px solid #E4E7EC;border-radius:12px;background:#fff;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.np-tpl:hover{border-color:#B2B6FF}.np-tpl.on{border-color:var(--a,#4F46E5);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.np-tpl-ic{flex:none;width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;background:linear-gradient(135deg,var(--a),var(--b))}
.np-tpl-txt{display:flex;flex-direction:column;min-width:0;padding-inline-end:22px}.np-tpl-txt b{font-size:.88rem;line-height:1.25;color:#101828}.np-tpl-txt small{font-size:.74rem;color:#667085}
.np-tpl-check{position:absolute;top:8px;inset-inline-end:10px;width:18px;height:18px;border-radius:50%;background:var(--a,#4F46E5);color:#fff;font-size:.7rem;display:none;align-items:center;justify-content:center}.np-tpl.on .np-tpl-check{display:inline-flex}
.np-tpl-detail{display:grid;grid-template-columns:1fr 200px auto;gap:18px;align-items:center;margin-top:14px;padding:14px 16px;background:#F9FAFB;border:1px solid #EAECF0;border-radius:12px}
.np-tpl-detail p{margin:2px 0 0;font-size:.84rem;color:#475467;line-height:1.45}.np-tpl-mini{min-width:0}
.np-link{font-size:.84rem;font-weight:600;color:var(--nx-accent,#4F46E5);text-decoration:none;white-space:nowrap}.np-link:hover{text-decoration:underline}
.np-copy{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-width:560px}
.np-title-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.np-logo{flex:none;width:72px;height:72px;border-radius:14px}
.np-title-field{flex:1;min-width:0}.np-logo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;font-size:.8rem}
.np-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.np-desc{margin-top:14px!important}
.np-access{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.np-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;padding:12px 16px;border:1.5px solid #E4E7EC;border-radius:12px;background:#fff;cursor:pointer;font:inherit}
.np-opt.on{border-color:var(--nx-accent,#4F46E5);background:#F5F6FF;box-shadow:0 0 0 3px rgba(79,70,229,.12)}.np-opt b{font-size:.9rem}.np-opt small{font-size:.78rem;color:#667085}
.np-hint{font-size:.78rem;color:#667085;margin:-6px 0 8px 34px}
.np-tabs{margin-top:10px;border-top:1px solid #F2F4F7;padding-top:12px}.np-tabs summary{cursor:pointer;font-size:.86rem;font-weight:600;color:#344054}
.np-tab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 12px;margin-top:8px}
.np-side{position:sticky;top:84px}
.np-summary{background:var(--nx-surface,#fff);border:1px solid #EAECF0;border-radius:14px;padding:18px 20px;box-shadow:0 8px 24px -12px rgba(16,24,40,.16)}
.np-sum-head{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#667085}
.np-sum-name{margin-top:8px;font-size:1.1rem;font-weight:650;color:#101828;overflow-wrap:anywhere}.np-sum-code{font-size:.8rem;color:#667085;margin-top:2px}
.np-sum-list{margin:14px 0 16px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.84rem}.np-sum-list dt{color:#667085}.np-sum-list dd{margin:0;color:#101828;text-align:end;overflow-wrap:anywhere}
.np-actions{display:flex;flex-direction:column;gap:6px}
@media (max-width:1000px){.np-grid{grid-template-columns:1fr}.np-side{position:static;order:-1}.np-modes{grid-template-columns:1fr}.np-tpl-detail{grid-template-columns:1fr}}
@media (max-width:640px){.np-fields,.np-access{grid-template-columns:1fr}.np-card{padding:16px}}
html[data-theme="dark"] .np-card,html[data-theme="dark"] .np-summary{background:#101828;border-color:#344054}
html[data-theme="dark"] .np-card-head h2,html[data-theme="dark"] .np-mode b,html[data-theme="dark"] .np-tpl-txt b,html[data-theme="dark"] .np-sum-name,html[data-theme="dark"] .np-sum-list dd,html[data-theme="dark"] .np-opt b{color:#F2F4F7}
html[data-theme="dark"] .np-mode,html[data-theme="dark"] .np-tpl,html[data-theme="dark"] .np-opt{background:#182230;border-color:#344054}
html[data-theme="dark"] .np-mode.on,html[data-theme="dark"] .np-opt.on{background:#1D2A52}
html[data-theme="dark"] .np-tpl-detail{background:#182230;border-color:#344054}html[data-theme="dark"] .np-tpl-detail p{color:#D0D5DD}

/* Support desk list: bulk bar, selection column, age */
.dk-bulk{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 10px;padding:10px 14px;border:1px solid #C7D7FE;background:#F5F8FF;border-radius:10px}
.dk-bulk select{width:auto;min-width:170px}
.dk-sel{width:36px;text-align:center}
tr.dk-picked td{background:#F5F8FF}
.dk-age{font-size:.8rem;color:#475467;white-space:nowrap}.dk-age.mid{color:#B54708;font-weight:600}.dk-age.old{color:#B42318;font-weight:650}
html[data-theme="dark"] .dk-bulk,html[data-theme="dark"] tr.dk-picked td{background:#182A52;border-color:#2F4B8F}

/* ── Alignment polish: one control height, even gaps ─────────────────────────────────── */
.nx-page-head { align-items: center; }
.nx-page-head > :first-child { margin-inline-end: auto; }
.nx-page-head > div:last-child:not(:first-child) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nx-page-head .mud-button-root { min-height: 38px; }
.usr-filters .set-input, .usr-filters select.set-input { height: 38px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.usr-filters select.set-input { width: auto; min-width: 150px; }
.usr-filters .pl-count { margin-inline-start: auto; }
/* A label and its box stay together on one line when the filters wrap. */
.usr-filters .usr-pair { display: inline-flex; align-items: center; gap: .5rem; }
.usr-filters .usr-pair .set-input { width: auto; }
.nx-card > .dk-chips { padding-bottom: 4px; }

.dk-bulk .set-input{height:38px;box-sizing:border-box;padding-top:0;padding-bottom:0}
.dk-bulk .nx-btn,.dk-junk .nx-btn,.dk-junk .task-del-yes{height:38px;padding:0 16px;display:inline-flex;align-items:center}
.dk-junk.is-clear{background:#F6FEF9;border-color:#ABEFC6}
.dk-junk .nx-btn{margin-inline-end:8px}

.dk-starter{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;border-color:#C7D7FE;background:#F5F8FF}
.dk-canned-add{display:inline-block;margin-bottom:8px;font-size:.85rem}
html[data-theme="dark"] .dk-starter{background:#182A52;border-color:#2F4B8F}

/* Ticket messages written with the rich editor */
.msg-plain{white-space:pre-wrap}
.msg-rich{overflow-wrap:anywhere}.msg-rich p{margin:0 0 .5em}
.msg-rich table{border-collapse:collapse;max-width:100%;margin:.4em 0}
.msg-rich td,.msg-rich th{border:1px solid #D0D5DD;padding:6px 10px;vertical-align:top}
.msg-rich th{background:#F2F4F7;text-align:left}
.msg-rich ul,.msg-rich ol{margin:.3em 0;padding-inline-start:1.4em}

.dk-noclient{color:#B54708;font-size:.84rem}

.dk-junkbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.dk-junkbox .dk-sub{flex-basis:100%}
.dk-junkask{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem}
.dk-junk-btn{color:#B42318}

.mt-filter{flex-wrap:wrap}.mt-check{display:inline-flex;align-items:center;gap:6px;font-weight:500!important;cursor:pointer}.mt-check .count{background:#FEF0C7;color:#93370D;border-radius:999px;padding:0 7px;font-size:.72rem;font-weight:650}

/* Payments workspace: one list for every payment */
.pw-head-actions { display: flex; align-items: center; gap: .5rem; }
.pw-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .625rem; margin-bottom: .875rem; }
.pw-stages .pay-chip { margin: 0; }
.pw-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: .75rem; }
.pw-filters .pp-search { min-width: 240px; }
.pw-sel { display: grid; gap: 2px; font-size: .6875rem; font-weight: 600; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .04em; }
.pw-sel select, .pw-add select, .pw-add input[type=text], .pw-stage, .pw-date { height: 36px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r); background: var(--nx-surface, #fff); color: var(--nx-ink); font: inherit; font-size: .8125rem; padding: 0 .5rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.pw-add { padding: .875rem 1rem; margin-bottom: .875rem; }
.pw-add-grid { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1.2fr) minmax(110px, .7fr) minmax(150px, .8fr) auto; gap: .75rem; align-items: end; }
.pw-add-grid label { display: grid; gap: 2px; font-size: .6875rem; font-weight: 600; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .04em; }
.pw-add-go { display: flex; gap: .25rem; }
.pw-add-hint { margin-top: .5rem; font-size: .75rem; color: var(--nx-muted); }
.pw-card { padding: 0; overflow-x: auto; }
.pw-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.pw-table th { text-align: left; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nx-muted); padding: .625rem .625rem; border-bottom: 1px solid var(--nx-ring); white-space: nowrap; }
.pw-table td { padding: .375rem .625rem; border-bottom: 1px solid var(--nx-ring); vertical-align: middle; }
.pw-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-table tfoot td { border-top: 2px solid var(--nx-ring-strong); border-bottom: 0; font-weight: 620; }
.pw-group td { background: var(--nx-soft, #FAFAFE); padding: .5rem .625rem; }
.pw-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.pw-group-sum { display: flex; flex-wrap: wrap; gap: .25rem .875rem; font-size: .75rem; color: var(--nx-muted); }
.pw-group-sum span { display: inline-flex; align-items: center; gap: .3rem; }
.pw-group-sum b { color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.pw-contract { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--nx-muted); }
.pp-warn-inline { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: #8A5A00; }
.pw-proj { min-width: 120px; max-width: 200px; }
.pw-proj a { font-weight: 600; color: var(--nx-ink); text-decoration: none; display: block; }
.pw-proj a:hover { text-decoration: underline; }
.pw-proj span { font-size: .6875rem; color: var(--nx-muted); font-family: var(--nx-mono); }
.pw-label { min-width: 90px; width: 100%; }
.pw-amt { width: 110px; text-align: right; }
.pw-note { min-width: 100px; width: 100%; }
.pw-stage { font-weight: 600; }
.pw-act { white-space: nowrap; text-align: right; }
.pw-act .pp-go { font-size: .75rem; padding: .3rem .625rem; height: auto; }
.pw-date { width: 135px; padding: 0 .375rem; }
.pw-stage { width: 150px; }
.pw-table td { padding: .375rem .5rem; }
.pw-row.st-received td { opacity: .75; }
@media (max-width: 900px) { .pw-add-grid { grid-template-columns: 1fr 1fr; } }
.pw-row.st-awaitingsignoff .pw-stage { border-color: #A3A8BD; }
.pw-row.st-signedoff .pw-stage { border-color: #F59E0B; background: rgba(245,158,11,.08); }
.pw-row.st-invoiced .pw-stage { border-color: #0EA5E9; background: rgba(14,165,233,.08); }
.pw-row.st-received .pw-stage { border-color: #16A34A; background: rgba(22,163,74,.08); }
.pw-add-grid select, .pw-add-grid input[type=text] { width: 100%; min-width: 0; box-sizing: border-box; }
.pd-link { text-decoration: none; color: inherit; cursor: pointer; }
.pd-link:hover { border-color: var(--nx-ring-strong); }
.pd-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .8125rem; color: var(--nx-ink-2); margin-bottom: .5rem; }
.pd-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.pd-legend b { font-variant-numeric: tabular-nums; color: var(--nx-ink); }
.pd-legend em { font-style: normal; color: var(--nx-muted); font-size: .75rem; }
.pr-tabs { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.pr-tab { height: 34px; padding: 0 .875rem; border: 1px solid var(--nx-ring); border-radius: 999px; background: var(--nx-surface); font: inherit; font-size: .8125rem; font-weight: 600; color: var(--nx-ink-2); cursor: pointer; }
.pr-tab.is-on { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.pw-hint { font-size: .8125rem; color: var(--nx-muted); margin-bottom: .5rem; }

/* =============================================================================
   Design polish pass (one place, so the same fixes apply everywhere)
   ============================================================================= */
/* A statistic tile that is a button or a link must still lay out like the others. */
button.nx-stat, a.nx-stat { display: block; width: 100%; text-align: start; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
/* Secondary buttons made with .nx-btn.is-ghost get a visible edge, so they read as buttons. */
.nx-btn.is-ghost { background: var(--nx-surface); border-color: var(--nx-ring-strong); }
.nx-btn.is-ghost:hover { background: var(--nx-surface-3); }
/* The browser's own file picker is replaced by a button that matches the rest of the app. */
input[type="file"] { font: inherit; font-size: .8125rem; color: var(--nx-ink-2); max-width: 100%; }
input[type="file"]::file-selector-button {
    font: inherit; font-size: .8125rem; font-weight: 560; padding: 7px 14px; margin-inline-end: 10px; cursor: pointer;
    border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: var(--nx-surface); color: var(--nx-ink);
}
input[type="file"]::file-selector-button:hover { background: var(--nx-surface-3); }
/* An empty state inside a card does not draw a second box. */
.nx-card .nx-empty { border: 0; box-shadow: none; background: transparent; padding: 2.5rem 1.5rem; }
/* A card title that sits straight in the card gets the card's padding. */
.nx-card.is-titled > .pf-title { padding: 1rem 1.25rem 0; margin-bottom: .75rem; }
.nx-page-head .pw-head-actions { margin-inline-start: auto; }
/* Neighbouring row actions (for example Use and Edit) are not glued together. */
.set-edit + .set-edit { margin-inline-start: .75rem; }
.w-act { white-space: nowrap; text-align: end; }
/* Customer and contact tables fit a normal laptop screen. */
.crm-table td, .crm-table th { padding-inline: .625rem; }
/* The dashboard's seven tiles fill their rows (4 + 3) instead of leaving one on its own. */
@media (min-width: 1100px) {
    .pm-kpis:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pm-kpis > :nth-child(7):last-child { grid-column: span 2; }
}
/* Data and privacy: room between the heading, the text and the buttons. */
#data-export h3, #data-delete h3 { margin: 0 0 .5rem; font-size: 1rem; }
#data-export p, #data-delete p { margin: 0 0 .875rem; }
/* Small screens */
@media (max-width: 640px) {
    .gs { margin-right: .25rem; flex: 0 1 150px; min-width: 0; }
    .gs-box { width: 100%; }
    .nx-topbar-eyebrow { display: none; }
    .gs-box kbd { display: none; }
    .nx-topbar-title { min-width: 0; }
    .nx-topbar-title > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .activity-table { display: block; overflow-x: auto; max-width: 100%; }
    .pw-stages { grid-template-columns: 1fr 1fr; }
    .pw-stages .pay-chip { grid-template-columns: 12px 1fr; grid-template-areas: "sw name" ". amt" ". count"; }
    .pf-check { flex-wrap: wrap; }
}

.nx-card.is-titled + .nx-card, .nx-card.is-titled + .nx-card.is-titled { margin-top: 1rem; }
.crm-table td:first-child { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

/* Customer portal sign-in: room under the button and a more comfortable card */
form + .pt-help { margin-top: 1rem; }
.pt-card > .pt-title { margin-bottom: .25rem; }

/* Second design pass: long forms */
input[type="radio"], input[type="checkbox"] { accent-color: var(--nx-accent); }
.dk-add:has(> .dk-check) { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; }
.set-field > label + .dk-add, .set-field > label + .pf-hint { margin-top: .25rem; }
.pn-grid { display: block; overflow-x: auto; }
.pn-grid input, .pn-grid select { min-width: 0; }
.set-field label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: .5rem; margin: .125rem 0; font-weight: 450; }

/* Billing: the "Manage card, invoices or cancel" button sits on the dark purple banner, so it must be light-on-dark (it had turned white-on-white). */
.bl-status-side .nx-btn.is-ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); color: #fff; }
.bl-status-side .nx-btn.is-ghost:hover { background: rgba(255,255,255,.26); color: #fff; }

/* Invoices */
.inv-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.inv-total { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 1rem; }
.inv-total span { font-size: 0.75rem; color: var(--nx-muted); font-weight: 550; }
.inv-total strong { font-size: 1.25rem; letter-spacing: -0.01em; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.inv-total.is-late strong { color: #B91C1C; }
.inv-sheet { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.inv-sheet-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.inv-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-muted); margin-bottom: 0.25rem; }
.inv-text { white-space: pre-line; line-height: 1.5; font-size: 0.875rem; }
.inv-history { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--nx-ink-2); }
a.pw-inv { font-weight: 600; white-space: nowrap; margin-inline-end: 0.5rem; }
@media (max-width: 720px) {
  .inv-totals { grid-template-columns: 1fr; }
  .inv-sheet { padding: 1rem; }
  .inv-sheet-top { grid-template-columns: 1fr; gap: 0.875rem; }
}
html[data-theme="dark"] .inv-total.is-late strong { color: #FCA5A5; }

/* Tax-correct invoices per country (#300): the tax bar above a form's lines, a line's tax, the tax summary card, the tax rates and summary pages */
.tax-bar { border: 1px solid var(--nx-ring-strong); border-radius: 12px; background: var(--nx-soft, #FAFAFE); padding: 0.75rem 0.875rem; margin-bottom: 0.875rem; display: grid; gap: 0.5rem; }
.tax-bar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.tax-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-800); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.01em; white-space: nowrap; }
.tax-chip .mud-icon-root { font-size: 0.95rem; }
.tax-chip-title { vertical-align: middle; margin-inline-start: 0.5rem; font-size: 0.75rem; }
.tax-bar-country { font-size: 0.8125rem; color: var(--nx-ink-2); font-weight: 550; }
.tax-bar-note { font-size: 0.8125rem; color: var(--nx-muted); }
.tax-bar-why { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0; }
.tax-bar-why .mud-icon-root { color: #D97706; flex: none; margin-top: 1px; }
.tax-bar-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.25rem; }
.tax-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--nx-ink); cursor: pointer; }
.tax-pos { min-width: 240px; margin: 0; }
.tax-line-select { min-width: 150px; max-width: 220px; }
#lines-table .line-desc, #qt-lines-table .line-desc { min-width: 180px; }
#lines-table .line-code, #qt-lines-table .line-code { min-width: 80px; }
.tax-cell { white-space: nowrap; color: var(--nx-ink-2); }
tr.tax-row td { color: var(--nx-ink-2); }
.tax-summary-body { display: flex; gap: 1.25rem; align-items: flex-start; }
.tax-summary-main { flex: 1 1 auto; min-width: 0; }
.tax-summary-table { margin-bottom: 0.5rem; }
.tax-summary-table td { white-space: nowrap; }
.tax-summary-table td:first-child { white-space: normal; }
.tax-facts { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.875rem; }
.tax-facts span { color: var(--nx-muted); }
.tax-facts small { color: var(--nx-muted); margin-inline-start: 0.25rem; }
.tax-note { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.875rem; color: var(--nx-ink); background: var(--nx-accent-soft); border-radius: 10px; padding: 0.5rem 0.65rem; margin-top: 0.4rem; }
.tax-note .mud-icon-root { color: var(--nx-accent); flex: none; margin-top: 1px; }
.tax-actions { margin-top: 0.75rem; }
/* Withholding tax and ZATCA e-invoicing (audit section 4): the certificate typed in place, the onboarding steps, long identifiers. */
.tax-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.wht-cert { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.wht-cert-edit { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.wht-cert-edit .set-input { width: auto; min-width: 0; max-width: 11rem; }
.wht-cert-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.6rem; flex-wrap: wrap; }
.zatca-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; overflow-wrap: anywhere; }
.zatca-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.75rem; padding: 0; counter-reset: zs; }
.zatca-steps li { counter-increment: zs; font-size: 0.8125rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-muted); }
.zatca-steps li::before { content: counter(zs) ". "; }
.zatca-steps li.is-done { background: rgba(46,158,107,.15); color: #1F7A50; }
html[data-theme="dark"] .zatca-steps li.is-done { color: #7DDBA9; }
.zatca-details { margin: 0.5rem 0; }
.zatca-details > summary { cursor: pointer; margin-bottom: 0.5rem; }
.zatca-onboard { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-top: 0.75rem; }
.zatca-onboard .set-field { max-width: 22rem; margin: 0; }
.tax-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.875rem; }
.tax-qr { flex: none; margin: 0; text-align: center; width: 160px; }
.tax-qr svg { width: 160px; height: 160px; display: block; background: #fff; border-radius: 8px; padding: 6px; border: 1px solid var(--nx-ring-strong); }
.tax-qr figcaption { font-size: 0.75rem; color: var(--nx-muted); margin-top: 0.3rem; }
.tax-lib-pick { max-width: 360px; margin: 0.6rem 0; }
.tax-lib-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; }
.tax-lib-list .pf-check span { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }
.tax-lib-note { flex-basis: 100%; font-size: 0.8125rem; color: var(--nx-muted); }
.tax-have { font-size: 0.75rem; color: #15803D; font-weight: 600; }
.tax-group { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-muted); margin: 0.9rem 0 0.25rem; }
.tax-filter { display: grid; gap: 0.75rem; }
.tax-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tax-dates { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tax-dates .set-field { margin: 0; min-width: 170px; }
.tax-details summary { cursor: pointer; padding: 0.25rem 0; }
@media (max-width: 720px) {
  .tax-summary-body { flex-direction: column-reverse; align-items: stretch; }
  .tax-qr { align-self: center; }
  .tax-line-select { min-width: 120px; }
  .tax-pos { min-width: 0; width: 100%; }
  .tax-dates .set-field { flex: 1 1 140px; min-width: 0; }
}
html[data-theme="dark"] .tax-bar { background: var(--nx-surface-2); border-color: var(--nx-ring); }
html[data-theme="dark"] .tax-chip { background: rgba(139, 140, 245, 0.18); color: #C7C8FF; }
html[data-theme="dark"] .tax-note { background: rgba(139, 140, 245, 0.12); color: var(--nx-ink); }
html[data-theme="dark"] .tax-have { color: #4ADE80; }
html[data-theme="dark"] .tax-bar-why .mud-icon-root { color: #FBBF24; }

/* Integrations */
.is-secret { border-color: #F59E0B !important; background: #FFFBEB; }
html[data-theme="dark"] .is-secret { background: rgba(245,158,11,.1); }
.inv-secret { display: block; padding: .625rem .75rem; margin: .5rem 0; background: var(--nx-surface-3, #F1F1F5); border-radius: var(--nx-r-xs, 8px); font-size: .9rem; word-break: break-all; user-select: all; }
.inv-inline { display: flex; gap: .625rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.inv-code { background: var(--nx-surface-3, #F1F1F5); padding: .75rem; border-radius: var(--nx-r-xs, 8px); overflow-x: auto; font-size: .8125rem; margin: .5rem 0 1rem; }
/* Connected apps (#385 G13): access chips, credentials, the app form and the webhook delivery log. */
.ca-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ca-search { max-width: 260px; }
.ca-scopes { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.ca-scope { font: 600 .72rem/1.5 ui-monospace, Consolas, monospace; padding: 1px 7px; border-radius: 999px; background: var(--nx-accent-soft, #EEF2FF); color: var(--nx-accent, #4338CA); }
.ca-scope.is-write { background: #FEF3C7; color: #92400E; }
html[data-theme="dark"] .ca-scope.is-write { background: rgba(245,158,11,.16); color: #FCD34D; }
.ca-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.ca-cred { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: .25rem 0; }
.ca-cred > span { min-width: 7.5rem; font-weight: 600; font-size: .8125rem; color: var(--nx-muted, #5B5F7A); }
.ca-cred code { word-break: break-all; }
.ca-id { font-size: .78rem; }
.ca-can { margin: 0; padding-inline-start: 1.1rem; white-space: normal; font-size: .8125rem; }
.ca-form { border: 1px solid var(--nx-line, #E4E4EC); border-radius: var(--nx-r-sm, 12px); padding: 1rem; margin: .5rem 0 1rem; background: var(--nx-surface-2, #FAFAFC); }
.ca-scope-checks code { font-size: .72rem; opacity: .75; margin-inline-start: .25rem; }
.ca-log-filter { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; }
.ca-log-filter .set-input { width: auto; min-width: 150px; }
.ca-detail { margin-top: .75rem; }
.ca-detail pre { max-height: 320px; }
.ca-banner { display: flex; gap: .5rem; align-items: flex-start; padding: .625rem .75rem; border-radius: var(--nx-r-xs, 8px); background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; margin-bottom: .75rem; font-size: .875rem; }
html[data-theme="dark"] .ca-banner { background: rgba(220,38,38,.12); color: #FCA5A5; border-color: rgba(220,38,38,.35); }
.ca-head { flex-wrap: wrap; gap: .5rem; }
@media (max-width: 600px) { .ca-tools { width: 100%; } .ca-search { max-width: none; flex: 1; min-width: 0; } .ca-cred > span { min-width: 0; } }
.inv-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .25rem .75rem; }
.crm-wrap { word-break: break-all; }
/* AI tools (MCP): the three "Connect ..." cards side by side on wide screens, one under the other on a phone. */
.mcp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; align-items: start; }
.mcp-steps { margin: .25rem 0 .5rem; padding-inline-start: 1.25rem; font-size: .875rem; line-height: 1.55; }
.mcp-steps li { margin-bottom: .35rem; }
.mcp-make { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: flex-end; margin-bottom: 1rem; }
.mcp-make .set-field { margin: 0; }
.mcp-grid .inv-code { white-space: pre-wrap; word-break: break-all; }

/* Customer help articles (written by the team, read on the portal) */
.kb-write { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.kb-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; }
.kb-preview { border: 1px solid var(--nx-ring); border-radius: var(--nx-r-xs, 8px); padding: .75rem 1rem; min-height: 8rem; background: var(--nx-surface, #fff); }
.kb-body { line-height: 1.6; }
.kb-body h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
.kb-body h3 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.kb-body p, .kb-body li { font-size: .95rem; }
.kb-body code { background: var(--nx-surface-3, #F1F1F5); border-radius: 5px; padding: 1px 6px; font-size: .9em; }
.kb-body .hc-call { display: block; margin: 1rem 0; padding: .75rem 1rem; border-radius: 10px; border: 1px solid #C7D2FE; background: #EEF2FF; }
.kb-body .hc-call.tip { border-color: #BBF7D0; background: #F0FDF4; }
.kb-body .hc-call.warn { border-color: #FDE68A; background: #FFFBEB; }
.pt-search { display: flex; gap: .5rem; }
.pt-search input { flex: 1; min-width: 0; padding: .6rem .75rem; border: 1px solid #d9dcee; border-radius: 10px; font: inherit; }
@media (max-width: 800px) { .kb-write { grid-template-columns: 1fr; } }

/* Sign in with Google / Microsoft on the login page */
.lg-sso { margin-top: 1rem; display: grid; gap: 0.6rem; }
.lg-or { display: flex; align-items: center; gap: 0.75rem; color: var(--nx-muted); font-size: 0.78rem; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; border-top: 1px solid var(--nx-border, #dfe3ea); }
.lg-sso-btn { display: block; text-align: center; padding: 0.7rem 1rem; border: 1px solid var(--nx-border, #dfe3ea); border-radius: 10px; font-weight: 600; text-decoration: none; color: inherit; background: transparent; }
.lg-sso-btn:hover { background: rgba(127, 127, 127, 0.08); }

/* Single sign-on settings (Settings > Security > Single sign-on): values to copy, the provider's facts, certificates and check boxes */
.sso-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sso-head h3 { margin: 0; }
.sso-copy { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .4rem 0; border-bottom: 1px solid var(--nx-ring); }
.sso-copy-label { flex: 0 0 13rem; font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); }
.sso-copy code, .sso-facts code, .sso-txt { font-size: .8rem; background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-xs); padding: 2px 6px; overflow-wrap: anywhere; }
.sso-copy code { flex: 1 1 18rem; min-width: 0; }
.sso-facts { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .4rem 1rem; align-items: center; font-size: .875rem; }
.sso-facts > span:nth-child(odd) { font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); }
.sso-cert { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sso-cert small { color: var(--nx-muted); font-family: ui-monospace, monospace; }
.sso-check { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .3rem 0; font-size: .875rem; }
.sso-check small { color: var(--nx-muted); }
.sso-pem { max-width: 640px; font-family: ui-monospace, monospace; font-size: .75rem; }
.sso-narrow { max-width: 240px; }
.sso-scroll { overflow-x: auto; }
.sso-manual > summary { cursor: pointer; font-weight: 600; font-size: .875rem; color: var(--nx-accent); }
.sso-test-result { padding: .75rem; border: 1px solid var(--nx-ring); border-radius: 10px; background: var(--nx-surface-2); }
.sso-test-result p { overflow-wrap: anywhere; }
@media (max-width: 640px) { .sso-copy-label { flex-basis: 100%; } .sso-facts { grid-template-columns: 1fr; } .sso-narrow { max-width: none; } }

/* The AI assistant page */
.ai-card { display: grid; gap: 0.9rem; max-width: 820px; }
.ai-thread { display: grid; gap: 0.6rem; min-height: 160px; max-height: 60vh; overflow-y: auto; }
.ai-msg { max-width: 88%; padding: 0.6rem 0.85rem; border-radius: 12px; line-height: 1.5; }
.ai-me { justify-self: end; background: var(--mud-palette-primary, #5b4bdb); color: #fff; }
.ai-bot { justify-self: start; background: rgba(127, 127, 127, 0.12); }
.ai-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-sources { margin-top: 0.4rem; font-size: 0.8rem; opacity: 0.85; }
.ai-sources a, .ai-sources span { display: block; margin-top: 0.2rem; }
.ai-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ai-form .set-input { flex: 1 1 260px; }

/* The assistant's chat (Assistant/AssistantChat.razor): the Chat tab of Ask the assistant, and the Ask panel beside any page (Shared/AskPanel.razor).
   Conversations on the side (a drawer on narrow screens and in the panel), the thread, and the question box at the bottom. Colours come from the
   theme variables, so dark mode follows; sides use logical properties, so right-to-left languages mirror. */
.ac { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; height: calc(100vh - 230px); min-height: 460px; position: relative; }
.ac-side { display: flex; flex-direction: column; gap: .5rem; min-height: 0; overflow-y: auto; padding: .75rem; border: 1px solid var(--nx-ring); border-radius: 14px; background: var(--nx-surface); }
.ac-new { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 38px; border: 1px solid var(--nx-ring-strong); border-radius: 10px; background: var(--nx-surface); color: var(--nx-ink); font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer; }
.ac-new:hover:not(:disabled) { border-color: var(--nx-accent); color: var(--nx-accent); }
.ac-side-title { font-size: .6875rem; font-weight: 660; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-muted); margin-top: .5rem; }
.ac-side-empty { font-size: .8125rem; color: var(--nx-muted); }
.ac-convs { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.ac-conv { display: flex; align-items: center; gap: .125rem; border-radius: 9px; }
.ac-conv:hover, .ac-conv.is-on { background: var(--nx-surface-3); }
.ac-conv-open { flex: 1 1 auto; min-width: 0; display: grid; text-align: start; padding: .4rem .5rem; border: 0; background: transparent; color: var(--nx-ink); font: inherit; cursor: pointer; border-radius: 9px; }
.ac-conv-title { font-size: .8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-conv-when { font-size: .6875rem; color: var(--nx-muted); }
.ac-conv-tools { display: none; flex: 0 0 auto; }
.ac-conv:hover .ac-conv-tools, .ac-conv:focus-within .ac-conv-tools, .ac-conv.is-on .ac-conv-tools { display: inline-flex; }
.ac-rename { display: flex; align-items: center; gap: .25rem; width: 100%; padding: .25rem; }
.ac-rename .set-input { flex: 1 1 auto; min-width: 0; height: 32px; }
.ac-confirm-del { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .4rem .5rem; font-size: .8125rem; }
.ac-link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--nx-accent); cursor: pointer; }
.ac-link-btn.is-danger { color: var(--nx-critical, #c62828); }
.ac-icon { width: 32px; height: 32px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--nx-ink-2); cursor: pointer; text-decoration: none; }
.ac-icon:hover:not(:disabled) { background: var(--nx-surface-3); color: var(--nx-ink); }
.ac-icon.is-on { color: var(--nx-accent); }
.ac-icon:disabled { opacity: .5; cursor: default; }
.ac-icon:focus-visible, .ac-conv-open:focus-visible, .ac-new:focus-visible, .ac-send:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.ac-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--nx-ring); border-radius: 14px; background: var(--nx-surface); overflow: hidden; }
.ac-head { display: flex; align-items: center; gap: .25rem; padding: .5rem .75rem; border-bottom: 1px solid var(--nx-ring); min-height: 48px; }
.ac-head-title { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-list-toggle { display: none; }
.ac-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; scroll-behavior: smooth; }
.ac-welcome { margin: auto 0; text-align: center; display: grid; justify-items: center; gap: .5rem; padding: 1rem 0; }
.ac-welcome h2 { font-size: 1.375rem; font-weight: 700; margin: 0; color: var(--nx-ink); }
.ac-welcome p { margin: 0; max-width: 520px; color: var(--nx-ink-2); font-size: .9375rem; }
.ac-welcome .ac-off { text-align: start; max-width: 560px; }
.ac-welcome-mark { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--nx-accent-soft); color: var(--nx-accent); }
.ac-context-note { font-size: .8125rem !important; color: var(--nx-muted) !important; }
.ac-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .5rem; max-width: 640px; }
.ac-next { justify-content: flex-start; margin: 0; margin-inline-start: calc(32px + .6rem); }
.ac-chip { min-height: 34px; text-align: start; }
.ac-msg { display: flex; gap: .6rem; align-items: flex-start; max-width: 100%; }
.ac-me { justify-content: flex-end; }
.ac-me .ac-bubble { background: var(--nx-accent); color: #fff; border-radius: 16px 16px 4px 16px; padding: .55rem .85rem; max-width: min(78%, 640px); white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-bot .ac-bubble { flex: 1 1 auto; min-width: 0; max-width: 760px; color: var(--nx-ink); line-height: 1.55; }
.ac-avatar { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--nx-accent-soft); color: var(--nx-accent); }
.ac-text { overflow-wrap: anywhere; font-size: .9375rem; }
.ac-text p { margin: 0 0 .5rem; }
.ac-text p:last-child, .ac-text ul:last-child, .ac-text ol:last-child { margin-bottom: 0; }
.ac-text ul, .ac-text ol { margin: 0 0 .5rem; padding-inline-start: 1.25rem; }
.ac-text li { margin: .15rem 0; }
.ac-text h2, .ac-text h3 { font-size: .9375rem; margin: .5rem 0 .25rem; }
.ac-text a { color: var(--nx-accent); font-weight: 600; }
.ac-text code { font-size: .85em; background: var(--nx-surface-3); padding: 0 .25rem; border-radius: 4px; }
.ac-muted { color: var(--nx-muted); }
.ac-small { font-size: .75rem; }
.ac-looked { font-size: .75rem; color: var(--nx-muted); margin-bottom: .25rem; }
.ac-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.ac-link { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .2rem .6rem; border: 1px solid var(--nx-ring); border-radius: 99px; font-size: .78rem; font-weight: 600; color: var(--nx-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-link:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.ac-tools { display: flex; gap: .125rem; margin-top: .25rem; margin-inline-start: -.4rem; }
.ac-status { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.ac-status-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 99px; background: var(--nx-accent-soft); color: var(--nx-accent); font-size: .78rem; font-weight: 600; }
.ac-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: ac-spin .8s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-typing { display: inline-flex; gap: 4px; padding: .5rem 0; }
.ac-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-muted); animation: ac-dot 1.2s infinite ease-in-out; }
.ac-typing span:nth-child(2) { animation-delay: .15s; }
.ac-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ac-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
html[data-motion="reduce"] .ac-typing span, html[data-motion="reduce"] .ac-spin { animation: none; }
@media (prefers-reduced-motion: reduce) { .ac-typing span, .ac-spin { animation: none; } .ac-thread { scroll-behavior: auto; } }
.ac-action { margin-top: .6rem; border: 1px solid var(--nx-ring-strong); border-radius: 12px; padding: .75rem .875rem; background: var(--nx-surface-2); }
.ac-action.is-done { border-color: rgba(46, 125, 50, .45); }
.ac-action.is-cancelled { opacity: .75; }
.ac-action-head { display: flex; align-items: center; gap: .35rem; font-weight: 650; font-size: .875rem; margin-bottom: .4rem; }
.ac-action-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .75rem; margin: 0 0 .5rem; font-size: .8125rem; }
.ac-action-facts dt { color: var(--nx-muted); }
.ac-action-facts dd { margin: 0; overflow-wrap: anywhere; }
.ac-pre { white-space: pre-wrap; }
.ac-action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ac-action-state { display: flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 600; }
.ac-action-state.is-done { color: var(--mud-palette-success, #2e7d32); }
.ac-action-error { margin-top: .4rem; font-size: .8125rem; color: #B42318; }
html[data-theme="dark"] .ac-action-error { color: #FCA5A5; }
.ac-error { margin: 0 1rem .5rem; }
.ac-composer { display: flex; align-items: flex-end; gap: .5rem; margin: 0 1rem; padding: .4rem .4rem .4rem .75rem; border: 1px solid var(--nx-ring-strong); border-radius: 16px; background: var(--nx-surface); }
.ac-composer:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.ac-input { flex: 1 1 auto; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--nx-ink); font: inherit; font-size: .9375rem; line-height: 1.45; padding: .45rem 0; max-height: 200px; }
.ac-send { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; border: 0; background: var(--nx-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ac-send:disabled { opacity: .4; cursor: default; }
.ac-stop { background: var(--nx-ink); }
.ac-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .4rem 1rem .75rem; font-size: .7188rem; color: var(--nx-muted); }
.ac-foot a { color: inherit; text-decoration: underline; }
.ac-quick { padding: .75rem 1rem 1rem; border-top: 1px solid var(--nx-ring); }
/* Narrow screens and the panel: the conversations become a drawer opened from the header. */
.ac-compact { grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; gap: 0; }
.ac-compact .ac-main { border: 0; border-radius: 0; }
.ac-compact .ac-list-toggle { display: inline-flex; }
.ac-compact .ac-side { position: absolute; inset-block: 48px 0; inset-inline-start: 0; width: min(280px, 85%); z-index: 3; border-radius: 0; border-width: 0; border-inline-end: 1px solid var(--nx-ring); box-shadow: var(--nx-sh-pop); display: none; }
.ac-compact.ac-list-open .ac-side { display: flex; }
.ac-compact .ac-thread { padding: .875rem 1rem; }
.ac-compact .ac-welcome h2 { font-size: 1.125rem; }
.side-panel.ask-panel { width: min(480px, 100vw); z-index: 1350; }
.side-panel-scrim.ask-scrim { z-index: 1349; }
body:has(.ask-panel) .gd-offer { display: none; }   /* the "Set Kaam360 up" offer waits while the chat is open */
.ask-btn { width: auto; padding: 0 .65rem 0 .5rem; gap: .3rem; font: inherit; font-size: .8125rem; font-weight: 600; }
.ask-btn.is-on { background: var(--nx-accent-soft); color: var(--nx-accent); }
@media (max-width: 900px) {
    .ac:not(.ac-compact) { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 210px); }
    .ac:not(.ac-compact) .ac-list-toggle { display: inline-flex; }
    .ac:not(.ac-compact) .ac-side { position: absolute; inset-block: 49px 1px; inset-inline-start: 1px; width: min(280px, 85%); z-index: 3; border-radius: 0 0 0 14px; box-shadow: var(--nx-sh-pop); display: none; }
    .ac:not(.ac-compact).ac-list-open .ac-side { display: flex; }
}
@media (max-width: 600px) {
    .ac:not(.ac-compact) { height: calc(100vh - 190px); min-height: 380px; }
    .ac-thread { padding: .75rem; }
    .ac-composer { margin: 0 .5rem; }
    .ac-foot { padding: .35rem .5rem .6rem; }
    .ac-keys { display: none; }
    .ac-me .ac-bubble { max-width: 88%; }
    .ac-next { margin-inline-start: 0; }
    .side-panel.ask-panel { width: 100vw; }
    .ask-btn-text { display: none; }
    .ask-btn { width: 40px; padding: 0; }
}

/* The project assistant (Ask the assistant): tabs, ready-made questions, links to projects and tasks, notes to tasks, briefing */
.as-tabs { margin-bottom: 1rem; flex-wrap: wrap; }
.as-card { max-width: 820px; display: grid; gap: .25rem; }
.as-quick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.as-quick .as-project { flex: 0 1 240px; min-width: 0; }
.as-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.as-chip { border: 1px solid var(--nx-ring); background: var(--nx-surface-2, transparent); color: inherit; border-radius: 999px; padding: .3rem .75rem; font-size: .82rem; cursor: pointer; }
.as-chip:hover:not(:disabled) { border-color: var(--mud-palette-primary, #5b4bdb); color: var(--mud-palette-primary, #5b4bdb); }
.as-chip:disabled { opacity: .55; cursor: default; }
.as-links { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.as-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; overflow-wrap: anywhere; }
.as-link > a { font-weight: 600; }
.as-meta { display: inline-flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .8rem; color: var(--nx-muted); }
.as-late { color: var(--mud-palette-error, #d32f2f); }
.as-pill { font-size: .72rem; font-weight: 650; padding: .05rem .5rem; border-radius: 999px; background: rgba(127, 127, 127, .15); }
.as-pill.is-off { background: rgba(211, 47, 47, .15); color: var(--mud-palette-error, #c62828); }
.as-pill.is-risk { background: rgba(237, 108, 2, .16); color: var(--mud-palette-warning, #b45309); }
.as-pill.is-ok { background: rgba(46, 125, 50, .15); color: var(--mud-palette-success, #2e7d32); }
.as-notes { width: 100%; resize: vertical; min-height: 140px; }
.as-proposals { display: grid; gap: .5rem; }
.as-proposal { display: grid; grid-template-columns: auto minmax(0, 1fr) 160px 150px 150px; gap: .4rem; align-items: center; padding: .4rem; border: 1px solid var(--nx-ring); border-radius: 10px; }
.as-proposal.is-off { opacity: .55; }
.as-proposal .set-input { min-width: 0; width: 100%; }
.as-pick { width: 18px; height: 18px; }
.as-day { max-width: 240px; }
.as-brief { margin-top: 1rem; }
.as-brief-stats { margin-bottom: .5rem; }
.pu-draft-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.pu-draft-note { margin-bottom: .75rem; }
.pu-draft-why { font-size: .8rem; margin-top: .25rem; opacity: .85; }
@media (max-width: 720px)
{
    .as-proposal { grid-template-columns: auto minmax(0, 1fr); }
    .as-proposal .as-who, .as-proposal .as-due, .as-proposal .as-list { grid-column: 2; }
    .as-quick .as-project { flex: 1 1 100%; }
}

/* Live preview of a pasted spreadsheet table under the comment box */
.cm-preview { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--nx-ring, #e1e4f2); border-radius: 10px; background: rgba(127, 127, 127, 0.05); }
.cm-preview > .cm-hint { display: block; margin-bottom: 4px; }

/* Social post previews (an approximate look of each network) and per-network cards */
.sp-card { border: 1px solid #E5E7EF; border-radius: 12px; padding: 12px; background: #fff; color: #1c1e21; font-size: .86rem; max-width: 520px; }
.sp-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.sp-head small { display: block; opacity: .65; font-size: .72rem; }
.sp-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4f46e5; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.sp-avatar.sp-sq { border-radius: 6px; }
.sp-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-linkcard { margin-top: 8px; background: #F0F2F5; border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
.sp-url { color: #1d4ed8; overflow-wrap: anywhere; }
.sp-foot { display: flex; gap: 18px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #E5E7EF; opacity: .7; font-size: .78rem; }
.sp-ig-pic { aspect-ratio: 1 / 1; max-height: 220px; width: 100%; background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e9eaee 10px, #e9eaee 20px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; border-radius: 6px; margin-bottom: 8px; opacity: .8; }
.sp-wa { background: #ECE5DD; border-radius: 10px; padding: 14px; }
.sp-bubble { background: #DCF8C6; border-radius: 10px; padding: 8px 10px; max-width: 85%; margin-inline-start: auto; }
.sp-bubble small { display: block; text-align: end; opacity: .55; font-size: .68rem; }
.sp-note { display: block; margin-top: 6px; opacity: .65; }
.sp-net { margin-top: 14px; }
.sp-net-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-status { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: #E5E7EB; color: #374151; }
.sp-status.is-scheduled { background: #E0E7FF; color: #3730A3; }
.sp-status.is-published { background: #DCFCE7; color: #166534; }
.sp-status.is-failed { background: #FEE2E2; color: #991B1B; }
.sp-status.is-publishing { background: #FEF3C7; color: #92400E; }
.sp-status.is-cancelled { background: #F3F4F6; color: #6B7280; text-decoration: line-through; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.sp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.sp-chip-net { font-weight: 700; margin-inline-end: 4px; }
.so-chip.is-draft { background: #F3F4F6; color: #374151; }
.so-chip.is-failed { background: #FEE2E2; color: #991B1B; }
.so-chip.is-cancelled { background: #F3F4F6; color: #5F6672; text-decoration: line-through; }
.so-chip.is-published { background: #DCFCE7; color: #166534; }
.so-chip.is-publishing { background: #FEF3C7; color: #92400E; }
.so-cell.is-week { min-height: 160px; }
.task-del-no.is-on { background: #E0E7FF; color: #3730A3; border-color: transparent; }

/* Media on social posts */
.sm-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.sm-item { position: relative; width: 132px; }
.sm-item img, .sm-item video { width: 132px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid #E5E7EF; background: #f3f4f6; display: block; }
.sm-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 100px; border: 1px solid #E5E7EF; border-radius: 8px; background: #f3f4f6; font-weight: 700; overflow: hidden; }
.sm-doc small { font-weight: 400; font-size: .68rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
.sm-tools { display: flex; gap: 4px; margin-top: 4px; }
.sm-tools button { border: 1px solid #E5E7EF; background: #fff; border-radius: 6px; padding: 0 8px; cursor: pointer; }
.sm-alt { width: 100%; margin-top: 4px; font-size: .72rem; padding: 3px 6px; border: 1px solid #E5E7EF; border-radius: 6px; }
.sm-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; max-height: 260px; overflow-y: auto; padding: 4px; }
.sm-lib-item { position: relative; }
.sm-lib-item.is-added { opacity: .45; }
.sm-lib-pick { padding: 0; border: 1px solid #E5E7EF; background: #fff; border-radius: 8px; width: 100%; cursor: pointer; overflow: hidden; }
.sm-lib-pick img, .sm-lib-pick .sm-doc { width: 100%; height: 78px; object-fit: cover; display: block; border: 0; }
.sm-lib-del { position: absolute; top: 2px; inset-inline-end: 2px; border: 0; background: rgba(255, 255, 255, .85); border-radius: 6px; cursor: pointer; font-size: .75rem; }
.sm-upload { cursor: pointer; position: relative; }
.sm-upload .di-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sp-media { display: grid; gap: 2px; margin: 8px 0; border-radius: 8px; overflow: hidden; }
.sp-media.n1 { grid-template-columns: 1fr; }
.sp-media.n2, .sp-media.n4 { grid-template-columns: 1fr 1fr; }
.sp-media.n3 { grid-template-columns: 1fr 1fr; }
.sp-media img, .sp-media video { width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block; background: #f3f4f6; }
.sp-media.n3 > :first-child { grid-row: span 2; }
.sp-ig-pic img, .sp-ig-pic video { width: 100%; height: 100%; object-fit: cover; }
.sp-ig-dots { text-align: center; opacity: .6; letter-spacing: 3px; margin-bottom: 4px; }
.sp-docchip { display: inline-block; margin: 6px 0; padding: 6px 10px; border: 1px solid #E5E7EF; border-radius: 8px; background: #F0F2F5; font-size: .78rem; }
.sp-net .set-input, .sp-net textarea, .sm-alt { box-sizing: border-box; max-width: 100%; }
.so-cell.can-drop { outline: 1px dashed #a5b4fc; }
.so-chip[draggable="true"] { cursor: grab; }

/* Help & support page: tabs, filters and the list of requests */
.sup-tabs { display: flex; gap: 4px; border-bottom: 1px solid #E5E7EF; margin: 4px 0 16px; }
.sup-tab { background: none; border: 0; padding: 10px 16px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; color: inherit; opacity: .7; display: inline-flex; align-items: center; gap: 8px; }
.sup-tab.is-on { border-bottom-color: #4f46e5; opacity: 1; color: #3730A3; }
.sup-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #E5E7EB; color: #374151; font-size: .72rem; text-align: center; line-height: 20px; }
.sup-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sup-chip { border: 1px solid #E5E7EF; background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 600; font-size: .82rem; display: inline-flex; gap: 8px; align-items: center; color: inherit; }
.sup-chip.is-on { background: #E0E7FF; border-color: #A5B4FC; color: #3730A3; }
.sup-chip.is-alert .sup-count { background: #FEE2E2; color: #991B1B; }
.sup-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.sup-filters .eg-search { flex: 1 1 260px; max-width: 420px; }
.sup-listcard { padding: 0; overflow: hidden; }
.sup-table tr.is-unread td { font-weight: 600; background: rgba(79, 70, 229, .04); }
.sup-mark { width: 22px; }
.sup-title { display: block; }
.sup-who { display: block; opacity: .65; font-weight: 400; }
.sup-type { opacity: .8; font-size: .8rem; }
.sup-new { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sup-form, .sup-tips { padding: 18px; }
.sup-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sup-cat { text-align: start; border: 1px solid #E5E7EF; background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; color: inherit; }
.sup-cat small { opacity: .65; }
.sup-cat.is-on { border-color: #4f46e5; background: #EEF2FF; box-shadow: 0 0 0 1px #4f46e5 inset; }
.sup-tips ul { padding-inline-start: 18px; display: grid; gap: 8px; margin: 8px 0 12px; }
.sup-empty { display: grid; gap: 12px; justify-items: center; padding: 28px; }
@media (max-width: 860px) { .sup-new { grid-template-columns: 1fr; } }

/* ---- rich comments and files on comments ---------------------------------------------------- */
/* margin: 0 undoes the card's ".tp-card .nx-rich" pull-out, which pushed the editor 1px past the comment box and hid its side lines. */
.cm-compose-box .nx-rich, .cm-edit .nx-rich { border: 0; border-radius: var(--nx-r); margin: 0; }
.cm-compose-box .nx-rich:focus-within { box-shadow: none; }
.cm-edit .nx-rich { border: 1px solid var(--nx-ring-strong, #c9cdea); }
.nx-rich.is-compact .nx-rich-body { min-height: 4.5rem; max-height: 40vh; padding: 0.625rem 0.75rem; font-size: 0.875rem; }
.nx-rich.is-compact .nx-rich-toolbar { border-radius: 0; }
.cm-foot-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; flex: 1 1 auto; min-width: 0; }
.cm-foot-tools .cm-link { display: inline-flex; align-items: center; gap: 4px; }
.cm-foot-tools .mud-icon-root { width: 16px; height: 16px; }
.cm-attach { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.cm-attach label.cm-link { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cm-attach .doc-input:focus-visible + label { outline: 2px solid var(--nx-accent); }
.cm-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; height: 24px; padding: 0 4px 0 8px; border-radius: 999px; background: var(--nx-surface-3); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-chip button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--nx-muted); padding: 0 4px; }
.cm-chip button:hover { color: #A32222; }
.cm-mention-wrap { position: relative; display: inline-flex; }
.cm-mention-list { top: auto; bottom: calc(100% + 4px); width: min(320px, 80vw); }
.cm-mention-search { width: 100%; box-sizing: border-box; margin-bottom: 4px; padding: 6px 8px; border: 1px solid var(--nx-ring-strong, #c9cdea); border-radius: 7px; font: inherit; font-size: .84rem; background: transparent; color: inherit; }
.cm-html { overflow-wrap: anywhere; }
.cm-html p, .cm-html div { margin: 0 0 0.35rem; }
.cm-html ul, .cm-html ol { margin: 0.25rem 0 0.5rem; padding-inline-start: 1.5rem; }
.cm-html ul { list-style: disc; }
.cm-html ol { list-style: decimal; }
.cm-html blockquote { margin: 0.25rem 0 0.5rem 1.5rem; }
.cm-html a { color: var(--nx-accent); text-decoration: underline; }
.cm-html table { border-collapse: collapse; margin: 6px 0; max-width: 100%; display: block; overflow-x: auto; font-size: .82rem; }
.cm-html td, .cm-html th { border: 1px solid var(--nx-ring-strong, #c9cdea); padding: 5px 9px; vertical-align: top; text-align: start; }
.cm-html th { background: rgba(79, 70, 229, .08); font-weight: 650; }
.cm-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cm-file { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--nx-ring-strong, #c9cdea); border-radius: 999px; background: var(--nx-surface, #fff); font-size: .78rem; color: var(--nx-ink); text-decoration: none; }
.cm-file:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.cm-file .mud-icon-root { width: 16px; height: 16px; }
.cm-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cm-file-size { color: var(--nx-muted); font-size: .7rem; }

/* ---- expenses -------------------------------------------------------------------------------- */
.ex-receipt { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 0.8125rem; color: var(--nx-accent); text-decoration: none; }
.ex-receipt:hover { text-decoration: underline; }
.ex-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; margin: 0 0 0.75rem; }
.ex-totals > div { padding: 0.5rem 0.75rem; border-radius: var(--nx-r); background: var(--nx-surface-2); display: grid; gap: 2px; }
.ex-totals span { font-size: 0.75rem; color: var(--nx-muted); }
.ex-totals b { font-size: 0.9375rem; }
.ex-amount { display: grid; grid-template-columns: 1fr 96px; gap: 0.5rem; }
.ri-line { display: grid; grid-template-columns: minmax(0, 1fr) 64px 84px auto; gap: 0.375rem; align-items: center; margin-bottom: 0.375rem; }
.ri-num { text-align: right; }

/* ---- approvals (one look for every kind of record: the list rows, badges and cards are the shared lv- and crm- ones) ---------- */
.ap-steps { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.ap-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.625rem; align-items: start; }
.ap-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.75rem; font-weight: 700; background: var(--nx-surface-3); color: var(--nx-muted); }
.ap-dot.is-pending { background: rgba(245,165,36,.18); color: #8A5A00; }
.ap-dot.is-approved { background: rgba(46,158,107,.15); color: #1F7A50; }
.ap-dot.is-rejected { background: rgba(208,59,59,.1); color: #A32222; }
.ap-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.25rem; font-size: 0.8125rem; }
.ap-arrow { color: var(--nx-muted); }
.ap-chip { padding: 2px 10px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-accent); font-size: 0.75rem; font-weight: 600; }
.ap-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 0.75rem; }
.ap-sub { margin: 0.75rem 0 0.5rem; }
.ap-step-edit { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.ap-step-edit .set-input { max-width: none; }
.ap-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.5rem; }
.ap-pick { accent-color: var(--nx-accent); width: 16px; height: 16px; flex: none; }
.ap-title { color: inherit; text-decoration: none; }
.ap-list-badge { margin-inline-start: 6px; white-space: nowrap; text-decoration: none; }
.ap-title:hover { color: var(--nx-accent); text-decoration: underline; }
.pt-btn.is-approve { background: #1F7A50; }
.pt-btn.is-reject { background: #A32222; }
.pt-btn + .pt-btn { margin-inline-start: 6px; }
@media (max-width: 600px) {
    /* Tab rows (Timesheet, Approvals) scroll sideways on a phone instead of pushing the page wider. */
    .ts-tabs { overflow-x: auto; scrollbar-width: none; }
    .ts-tab { white-space: nowrap; flex: none; }
    .ap-step-edit { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .ap-step-edit > :nth-child(3) { grid-column: 2 / 3; grid-row: 2; }
    .lv-decide { width: 100%; }
    .lv-decide .lv-note { flex: 1 1 160px; width: auto; }
}
html[data-theme="dark"] .ap-dot.is-pending { background: rgba(245, 158, 11, .2); color: #FCD34D; }
html[data-theme="dark"] .ap-dot.is-approved, html[data-theme="dark"] .lv-status.is-approved { background: rgba(34, 197, 94, .16); color: #86EFAC; }
html[data-theme="dark"] .ap-dot.is-rejected, html[data-theme="dark"] .lv-status.is-rejected { background: rgba(248, 113, 113, .16); color: #FCA5A5; }
html[data-theme="dark"] .lv-row, html[data-theme="dark"] .pt-row { border-color: var(--nx-ring); }
html[data-theme="dark"] .ap-chip { background: rgba(139, 140, 245, .16); color: #C9CAFB; }

/* ---- custom fields --------------------------------------------------------------------------- */
.cf-bare { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--nx-ring); }
.cf-bare .pf-title, .cf-project-card .pf-title { margin-bottom: 0.5rem; }
.cf-project-card { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 1rem; }
.cf-project-card > .pf-title { grid-column: 1 / -1; }
.cf-field { margin-bottom: 0.625rem; }
.cf-field textarea { width: 100%; box-sizing: border-box; font: inherit; resize: vertical; }
.cf-req { color: #A32222; }
.cf-static { font-size: 0.875rem; min-height: 1.25rem; overflow-wrap: anywhere; }
.cf-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.cf-error { margin-top: 2px; font-size: 0.75rem; color: #A32222; }
.cf-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 1rem; }
.cf-tab { height: 34px; padding: 0 0.875rem; border: 1px solid var(--nx-ring-strong); border-radius: 999px; background: var(--nx-surface); font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--nx-ink-2); cursor: pointer; }
.cf-tab.is-on { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }

/* ---- Page layouts: the designer and the fields it arranges ---- */
.lay-slot { display: contents; }
.lay-slot.is-req label::after { content: " *"; color: var(--nx-danger, #c0392b); font-weight: 700; }
.lay-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lay-title { flex: 1 1 180px; min-width: 0; font-weight: 600; }
.lay-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--nx-border, #e2e6ee); border-radius: 8px; background: var(--nx-surface, #fff); cursor: grab; flex-wrap: wrap; }
.lay-row.is-hidden { opacity: .55; }
.lay-row.is-drag { outline: 2px dashed var(--mud-palette-primary, #5b4bd6); }
.lay-grip { color: var(--nx-muted, #8a93a6); letter-spacing: -3px; user-select: none; }
.lay-name { flex: 1 1 160px; min-width: 0; font-weight: 500; }
.lay-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lay-move { width: auto; min-width: 120px; padding: 4px 8px; }
.lay-empty { padding: 14px; text-align: center; border: 1px dashed var(--nx-border, #e2e6ee); border-radius: 8px; }
.lay-actions { display: flex; align-items: center; gap: 14px; margin: 10px 0; flex-wrap: wrap; }
.lay-templates { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.lay-template { text-align: start; padding: 8px 10px; border: 1px solid var(--nx-border, #e2e6ee); border-radius: 8px; background: transparent; cursor: pointer; color: inherit; }
.lay-template:hover { border-color: var(--mud-palette-primary, #5b4bd6); }

/* ---- Page layouts: the whole page, with the fixed parts locked ---- */
.lay-legend { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--mud-palette-background-grey, #f4f5fb); font-size: .875rem; }
.lay-page { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--nx-border, #e2e6ee); border-radius: 12px; background: var(--mud-palette-background-grey, #f7f8fc); }
.lay-top { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; border-bottom: 1px dashed var(--nx-border, #e2e6ee); }
.lay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.lay-main-col, .lay-side-col { display: grid; gap: 10px; min-width: 0; align-content: start; }
.lay-fixed { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px dashed var(--nx-border, #c9cfdd); border-radius: 8px; background: transparent; color: var(--nx-muted, #6b7385); font-size: .875rem; cursor: not-allowed; user-select: none; }
.lay-fixed-block { display: flex; padding: 18px 12px; }
.lay-lock { font-size: .8rem; opacity: .7; }
.lay-addrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; align-items: start; }
@media (max-width: 900px) { .lay-grid, .lay-addrow { grid-template-columns: minmax(0, 1fr); } }

/* ---- Payments: the panel opened under a payment (proof of sign-off) ---- */
.pw-detail > td { background: var(--mud-palette-background-grey, #f7f8fc); padding: .75rem 1rem; }
.pd-panel { display: grid; gap: 1rem; }
.pd-sec { display: grid; gap: .5rem; max-width: 52rem; }
.pd-title { font-weight: 700; font-size: .875rem; }
.pd-need { padding: .5rem .75rem; border-radius: 8px; background: #fff7e6; border: 1px solid #f5c26b; font-size: .8438rem; }
.pd-file { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; font-size: .8438rem; }
.pd-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pw-proof.is-missing { color: var(--nx-danger, #c0392b); font-weight: 600; }
.pd-remark-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.pd-remark-add textarea { flex: 1 1 22rem; min-width: 0; }
.pd-remark { padding: .5rem .75rem; border-radius: 8px; background: var(--mud-palette-surface, #fff); border: 1px solid var(--nx-border, #e2e6ee); }
.pd-remark-meta { font-size: .75rem; color: var(--nx-muted, #6b7385); margin-bottom: .125rem; }
.pd-remark-text { white-space: pre-wrap; font-size: .8438rem; overflow-wrap: anywhere; }
.pd-sum { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; }
.pd-owing { color: var(--nx-danger, #c0392b); }
.pd-receipt-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; align-items: end; max-width: 52rem; }
.pd-receipt-add label { display: grid; gap: .125rem; font-size: .75rem; color: var(--nx-muted, #6b7385); }
.pw-part { font-size: .7188rem; color: var(--nx-muted, #6b7385); margin-top: .125rem; }

/* ---- Icon actions in grids and lists (one look everywhere) ---- */
.ia-row { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.ia-badge .mud-badge { font-size: .6rem; min-width: 15px; height: 15px; padding: 0 3px; }
.mud-icon-button.ia-on { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }

/* ---- Sales leads: form, list with filters, board and detail (kept to the same look as Customers and Deals) ---- */
.lead-form .pf-title { margin: 1rem 0 .5rem; padding-bottom: .375rem; border-bottom: 1px solid var(--nx-ring); }
.lead-form .pf-title:first-of-type { margin-top: 0; }
.lead-grid.nf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.lead-name { display: flex; gap: .5rem; }
.lead-name .lead-sal { flex: 0 0 96px; width: 96px; }
.lead-avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 1.125rem; background: var(--nx-accent-soft); color: var(--nx-accent); flex: 0 0 auto; }
.lead-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1.5rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 12px; padding: .875rem 1.125rem; margin-bottom: 1rem; }
.lead-strip span { display: block; font-size: .75rem; color: var(--nx-muted); }
.lead-strip strong { display: block; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.lead-sections .cf-bare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: .125rem; margin-bottom: 1.25rem; align-content: start; }
.lead-sections .cf-bare > .pf-title { grid-column: 1 / -1; margin-bottom: .5rem; padding-bottom: .375rem; border-bottom: 1px solid var(--nx-ring); }
.lead-sections .cf-bare .crm-dl { padding: .3rem 0; }
.lead-wrap { display: block; }
.lead-wrap.has-filters { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; }
.lead-main { min-width: 0; }
.lead-filters { padding: 1rem; position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow-y: auto; }
.lead-fgroup { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.lead-fhead { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--nx-muted); margin-bottom: .125rem; }
.lead-fcount { margin-inline-start: auto; font-size: .6875rem; color: var(--nx-muted); }
.lead-filters .tb-toggle { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; }
.lead-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: var(--nx-accent-soft); border: 1px solid var(--nx-ring); border-radius: 10px; padding: .5rem .875rem; margin-bottom: .75rem; }
.lead-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .625rem 1rem; border-top: 1px solid var(--nx-ring); font-size: .8125rem; color: var(--nx-ink-2); flex-wrap: wrap; }
.lead-pager-nav { display: inline-flex; align-items: center; gap: .5rem; }
.lead-pager-nav .set-input { width: 76px; height: 34px; padding-top: 0; padding-bottom: 0; }
.crm-table tr.is-selected td { background: var(--nx-accent-soft); }
.lead-rating { display: inline-block; font-size: .6875rem; font-weight: 650; padding: .125rem .5rem; border-radius: 999px; }
.lead-rating.is-hot { background: #FEF3F2; color: #B42318; }
.lead-rating.is-warm { background: #FFFAEB; color: #B54708; }
.lead-rating.is-cold { background: #EFF8FF; color: #175CD3; }
html[data-theme="dark"] .lead-rating.is-hot { background: rgba(240, 68, 56, .16); color: #FDA29B; }
html[data-theme="dark"] .lead-rating.is-warm { background: rgba(247, 144, 9, .16); color: #FEC84B; }
html[data-theme="dark"] .lead-rating.is-cold { background: rgba(21, 112, 239, .18); color: #84CAFF; }
@media (max-width: 900px) {
  .lead-wrap.has-filters { grid-template-columns: minmax(0, 1fr); }
  .lead-filters { position: static; max-height: none; }
}
@media (max-width: 700px) {
  .lead-grid.nf-grid, .lead-sections .cf-bare { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Sales activities: notes block and calendar ---- */
.rel-note-form { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .75rem; }
.rel-note-form textarea { flex: 1 1 auto; }
.rel-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.rel-notes li { border: 1px solid var(--nx-ring); border-radius: 10px; padding: .625rem .75rem; background: var(--nx-surface); }
.rel-note-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; }
.rel-note-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .25rem; font-size: .75rem; color: var(--nx-muted); }
.act-ico { vertical-align: middle; opacity: .75; }
.cal-title { margin: 0 .5rem; font-size: 1rem; }
.sc-cal { padding: .5rem; overflow-x: auto; }
.sc-head, .sc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 680px; }
.sc-head div { padding: .375rem .5rem; font-size: .75rem; font-weight: 650; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .03em; }
.sc-day { border: 1px solid var(--nx-ring); margin: -1px 0 0 -1px; min-height: 104px; padding: .25rem; display: flex; flex-direction: column; gap: 2px; cursor: pointer; background: var(--nx-surface); }
.sc-cal.is-week .sc-day { min-height: 320px; }
.sc-day.is-other { background: var(--nx-surface-2); }
.sc-day.is-other .sc-num { opacity: .5; } /* days of the next or previous month: fainter, but still readable (see the Accessibility section) */
.sc-day.is-today { box-shadow: inset 0 0 0 2px var(--nx-accent); }
.sc-day.is-over { background: var(--nx-accent-soft); }
.sc-num { font-size: .75rem; font-weight: 650; color: var(--nx-ink-2); padding: 0 .25rem; }
.sc-item { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; font-size: .75rem; cursor: grab; border-inline-start: 3px solid; overflow: hidden; white-space: nowrap; }
.sc-item .mud-icon-root { font-size: .875rem; flex: 0 0 auto; }
.sc-sub { overflow: hidden; text-overflow: ellipsis; }
.sc-time { font-variant-numeric: tabular-nums; opacity: .8; }
.sc-item.is-done { opacity: .55; text-decoration: line-through; }
.sc-item.is-late { outline: 1px solid #F04438; }
.k-task { background: #EEF4FF; color: #3538CD; border-color: #6172F3; }
.k-meeting { background: #ECFDF3; color: #067647; border-color: #17B26A; }
.k-call { background: #FFFAEB; color: #B54708; border-color: #F79009; }
html[data-theme="dark"] .k-task { background: rgba(97, 114, 243, .18); color: #B2CCFF; }
html[data-theme="dark"] .k-meeting { background: rgba(23, 178, 106, .16); color: #75E0A7; }
html[data-theme="dark"] .k-call { background: rgba(247, 144, 9, .16); color: #FEC84B; }
.sc-more { font-size: .6875rem; color: var(--nx-muted); padding: 0 .375rem; }
/* Busy times from the person's own Google or Outlook calendar (#303): grey, hatched, never draggable. */
.k-busy { background: repeating-linear-gradient(135deg, var(--nx-surface-2), var(--nx-surface-2) 6px, var(--nx-surface-3) 6px, var(--nx-surface-3) 12px); color: var(--nx-ink-2); border-color: var(--nx-ring-strong); }
.sc-item.k-busy { cursor: default; }
.sc-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; font-size: .75rem; }
.sc-legend span { padding: 2px 10px; border-radius: 999px; border-inline-start: 3px solid; }
@media (max-width: 700px) { .sc-day { min-height: 84px; } }

/* ---- Sales dashboard, reports and documents ---- */
.sd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.sd-grid .crm-section { margin-bottom: 0; }
.sd-wide { grid-column: 1 / -1; }
.sr-h { margin: 1.25rem 0 .5rem; font-size: 1rem; }
.sr-date { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--nx-ink-2); }
.sr-date .set-input { height: 38px; padding-top: 0; padding-bottom: 0; }
.sd-cat { max-width: 420px; margin: 0 0 .75rem; }
.crm-kpi small { display: block; font-size: .6875rem; color: var(--nx-muted); margin-top: 2px; }
a.crm-kpi.sd-link { text-decoration: none; color: inherit; }
a.crm-kpi.sd-link:hover { border-color: var(--nx-ring-strong); }
.crm-kpi.is-late strong { color: #D92D20; }
.sd-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sd-acts li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8125rem; }
.sd-acts li.is-late .sd-when { color: #D92D20; font-weight: 600; }
.sd-when { color: var(--nx-muted); font-variant-numeric: tabular-nums; }
.sd-rel { color: var(--nx-ink-2); }
.sd-rel::before { content: "· "; }
.sd-bars { display: flex; flex-direction: column; gap: .5rem; }
.sd-bar { display: grid; grid-template-columns: minmax(80px, 140px) 1fr auto; align-items: center; gap: .625rem; font-size: .8125rem; }
.sd-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-bar-track { height: 10px; background: var(--nx-surface-3); border-radius: 999px; overflow: hidden; }
.sd-bar-track i { display: block; height: 100%; background: var(--nx-accent); border-radius: 999px; }
.sd-bar-num { font-variant-numeric: tabular-nums; color: var(--nx-ink-2); }

/* ---- Boards (deals, leads, tasks): one look for the cards, collapsible columns, smooth moves ---- */
.crm-col { transition: flex-basis .2s ease, background-color .15s ease, box-shadow .15s ease; }
.crm-col-head { display: flex; align-items: center; gap: .375rem; }
.crm-col-title { min-width: 0; flex: 1 1 auto; }
.crm-col-fold, .kanban-head .crm-col-fold { flex: 0 0 auto; border: 0; background: transparent; color: var(--nx-muted); cursor: pointer; border-radius: 6px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; }
.crm-col-fold:hover { background: var(--nx-accent-soft); color: var(--nx-accent); }
/* A folded column stays as tall as the others and still shows its name, how many cards it holds and their total. */
.crm-col.is-collapsed { flex: 0 0 60px; align-self: stretch; min-height: 240px; display: flex; flex-direction: column; }
.crm-col.is-collapsed .crm-col-head { flex: 1 1 auto; flex-direction: column; padding: .5rem .25rem; border-radius: 12px; border-bottom: 0; }
.crm-col.is-collapsed .crm-col-title { writing-mode: vertical-rl; transform: rotate(180deg); text-align: end; display: flex; gap: .25rem; align-items: center; justify-content: flex-end; }
.crm-col.is-collapsed .crm-col-name { justify-content: flex-start; align-items: center; gap: .5rem; white-space: nowrap; }
.crm-col.is-collapsed .crm-col-name span { writing-mode: horizontal-tb; transform: rotate(180deg); min-width: 22px; padding: .0625rem .375rem; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: .6875rem; text-align: center; }
.crm-col.is-collapsed .crm-col-sum { margin-top: 0; white-space: nowrap; }
.crm-col.is-over { outline: 2px dashed color-mix(in srgb, var(--col, #6366F1) 55%, transparent); outline-offset: -4px; }
.crm-card { position: relative; border-inline-start: 3px solid var(--col, var(--nx-accent)); border-radius: 12px; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, opacity .15s ease; will-change: transform; }
.crm-card:hover { box-shadow: var(--nx-sh-2); transform: translateY(-1px); }
.crm-card.is-dragging { opacity: .4; transform: scale(.97) rotate(-1deg); }
.crm-card-foot { align-items: center; gap: .5rem; }
.crm-card-contact { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-muted); min-width: 0; }
.crm-card-owner { display: flex; align-items: center; gap: .375rem; }
.crm-avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent); font-size: .5938rem; font-weight: 700; flex: 0 0 auto; }
.crm-chip { font-size: .6875rem; padding: .0625rem .5rem; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); white-space: nowrap; }
.crm-chip.is-late { background: #FEF3F2; color: #B42318; }
html[data-theme="dark"] .crm-chip.is-late { background: rgba(240, 68, 56, .16); color: #FDA29B; }
.crm-card.is-compact { padding: .375rem .625rem; }
.crm-card.is-compact .crm-card-co { display: none; }
.crm-card.is-compact .crm-card-foot { margin-top: .125rem; }
.kanban-column.is-collapsed { flex: 0 0 52px !important; min-width: 52px; max-width: 52px; min-height: 240px; align-self: stretch; overflow: hidden; }
.kanban-column.is-collapsed .kanban-head { flex-direction: column; height: 100%; }
.kanban-column.is-collapsed .kanban-head-name { writing-mode: vertical-rl; transform: rotate(180deg); }
.kanban-card { transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease; will-change: transform; border-radius: 12px; }
.kanban-card:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .crm-card, .kanban-card, .crm-col { transition: none; } .crm-card:hover, .kanban-card:hover { transform: none; } }


/* =============================================================================
   Sales dashboard and reports. Built from the same pieces as the project dashboards (stat tiles, pm-card, pm-table, pm-list); only what they
   do not have is here: the change arrows, the bar list, the column chart, the hero and the period bar.
   ============================================================================= */
.sx-link { color: inherit; text-decoration: none; display: block; }
.sx-stats { margin-bottom: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sx-stats { gap: .625rem; } }
.sx-delta + span { margin-inline-start: .3em; }
.sx-stat { min-width: 0; }
.sx-stat .nx-stat-value { overflow-wrap: anywhere; }
.sx-delta { font-weight: 650; }
.sx-delta.is-good { color: #15803D; } .sx-delta.is-bad { color: #B91C1C; } .sx-delta.is-flat { color: var(--nx-muted); }
html[data-theme="dark"] .sx-delta.is-good { color: #4ADE80; } html[data-theme="dark"] .sx-delta.is-bad { color: #F87171; }
.sx-progress { height: 8px; border-radius: 999px; background: var(--nx-surface-3); margin: .5rem 0 .125rem; overflow: hidden; }
.sx-progress i { display: block; height: 100%; border-radius: 999px; background: var(--nx-500); }
.sx-progress i.is-done { background: #22A55B; }
.sx-h { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-ink-2); margin: 1.5rem 0 .625rem; }
.sx-h:first-child { margin-top: 0; }

.sx-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.sx-cols2.is-wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sx-cols2 > .pm-card, .sx-full.pm-card { margin-bottom: 0; }
.sx-full.pm-card { margin-bottom: 1rem; }
/* A tall card on the left with two cards stacked beside it, so neither side is left with a gap. */
.sx-cols2.has-tall > :first-child { grid-row: span 2; }
@media (max-width: 1000px) { .sx-cols2, .sx-cols2.is-wide-left { grid-template-columns: minmax(0, 1fr); } .sx-cols2.has-tall > :first-child { grid-row: auto; } }

.sx-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem 2rem; align-items: center; margin-bottom: 1rem; }
.sx-hero-main .sx-hero-label { font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sx-hero-value { font-size: 2.25rem; font-weight: 660; letter-spacing: -.03em; line-height: 1.1; margin-top: .25rem; color: var(--nx-ink); }
.sx-hero-value small { font-size: 1rem; font-weight: 520; color: var(--nx-muted); letter-spacing: 0; }
.sx-hero-line { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: .75rem; color: var(--nx-ink-2); margin-top: .375rem; }
.sx-hero .pm-progress-track { margin-top: .625rem; height: 12px; }
.sx-hero-facts { display: grid; gap: 0; border-inline-start: 1px solid var(--nx-ring); padding-inline-start: 2rem; }
.sx-fact { padding: .625rem 0; border-bottom: 1px solid var(--nx-ring); }
.sx-fact:first-child { padding-top: 0; } .sx-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-fact span { display: block; font-size: .75rem; color: var(--nx-ink-2); }
.sx-fact strong { font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; }
.sx-fact small { color: var(--nx-muted); font-size: .75rem; margin-inline-start: .375rem; }
@media (max-width: 900px) { .sx-hero { grid-template-columns: minmax(0, 1fr); } .sx-hero-facts { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--nx-ring); padding-top: 1rem; } }
.sx-target-edit { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .875rem; padding: .75rem; border: 1px dashed var(--nx-ring-strong); border-radius: 10px; }
.sx-target-edit .set-input { height: 38px; width: 180px; }
.sx-target-edit label { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--nx-ink-2); }

.sx-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 0 0 1rem; }
.sx-field { display: flex; flex-direction: column; gap: 4px; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); }
.sx-field .set-input { height: 38px; min-width: 160px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .875rem; color: var(--nx-ink); }
.sx-compare { margin-inline-start: auto; font-size: .75rem; color: var(--nx-muted); padding-bottom: .625rem; }

.sx-bars { display: flex; flex-direction: column; gap: .625rem; }
.sx-bar-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px; align-items: center; gap: .75rem; font-size: .8125rem; }
.sx-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-ink); }
.sx-bar-track { position: relative; height: 10px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; }
.sx-bar-track i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; }
.sx-bar-main { background: var(--nx-300, #A5B4FC); } .sx-bar-inner { background: var(--nx-600, #4F46E5); }
.sx-bar-num { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--nx-ink); white-space: nowrap; }
.sx-bar-num small { display: block; font-size: .6875rem; font-weight: 500; color: var(--nx-muted); }

.sx-cols-chart { display: flex; align-items: stretch; gap: 6px; height: 220px; }
.sx-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.sx-col-val { height: 16px; font-size: .6875rem; font-weight: 600; text-align: center; color: var(--nx-ink-2); white-space: nowrap; overflow: visible; font-variant-numeric: tabular-nums; }
.sx-col-plot { position: relative; flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--nx-ring-strong); }
.sx-col-plot i { position: absolute; bottom: 0; width: min(64%, 44px); border-radius: 6px 6px 0 0; }
.sx-col-main { background: var(--nx-300, #A5B4FC); } .sx-col-inner { background: var(--nx-600, #4F46E5); }
.sx-col-target { position: absolute; width: min(90%, 60px); inset-inline-start: 50%; transform: translateX(-50%); height: 0; border-top: 2px dashed #F59E0B; }
html[dir="rtl"] .sx-col-target { transform: translateX(50%); }
.sx-col-label { height: 20px; font-size: .6875rem; color: var(--nx-muted); text-align: center; padding-top: 4px; white-space: nowrap; }
.sx-cols-chart.is-dense .sx-col-val { font-size: 0; }
.sx-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: var(--nx-muted); margin-top: .75rem; }
.sx-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; background: var(--nx-300, #A5B4FC); vertical-align: -1px; }
.sx-legend .is-inner::before { background: var(--nx-600, #4F46E5); }
.sx-legend .is-target::before { background: none; height: 0; width: 14px; border-radius: 0; border-top: 2px dashed #F59E0B; vertical-align: 3px; }

.sx-att { margin-bottom: .75rem; }
.sx-att:last-child { margin-bottom: 0; }
.sx-att .pm-h3 { display: flex; align-items: center; gap: .5rem; margin-top: 0; }
.sx-att-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: #FEE2E2; color: #B91C1C; font-size: .6875rem; font-weight: 650; text-align: center; text-transform: none; letter-spacing: 0; }
.sx-name { display: block; font-weight: 600; color: var(--nx-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sx-name:hover { color: var(--nx-accent); text-decoration: underline; }
.sx-grow { flex: 1 1 auto; min-width: 0; }
.sx-meta { font-size: .75rem; color: var(--nx-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-late { font-size: .75rem; font-weight: 650; color: #B91C1C; white-space: nowrap; }
.sx-table-total td { font-weight: 650; border-top: 2px solid var(--nx-ring); }
.sx-rate { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-hero-line a { margin-inline-start: .35em; }
.sx-note { font-size: .75rem; color: var(--nx-muted); margin-top: .625rem; }
@media (max-width: 640px) {
    .sx-cols-chart { height: 180px; }
    .sx-bar-row { grid-template-columns: 84px minmax(0, 1fr) 112px; gap: .5rem; }
    .sx-hero-value { font-size: 1.875rem; }
    .sx-stat .nx-stat-value { font-size: 1.5rem; }
    .sx-field, .sx-field .set-input { width: 100%; }
    .sx-compare { margin-inline-start: 0; padding-bottom: 0; width: 100%; }
}

/* =============================================================================
   Sales reports: the library, an open report, and the report builder
   ============================================================================= */
.rp-crumb { font-size: .75rem; color: var(--nx-muted); margin-bottom: 2px; }
.rp-crumb a { color: var(--nx-accent); text-decoration: none; }
.rp-library { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.rp-folders { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.rp-folder { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 0; background: transparent; border-radius: 8px; font: inherit; font-size: .875rem; color: var(--nx-ink-2); cursor: pointer; text-align: start; }
.rp-folder b { font-size: .75rem; font-weight: 600; color: var(--nx-muted); }
.rp-folder:hover { background: var(--nx-surface-2); }
.rp-folder.is-on { background: var(--nx-accent-soft); color: var(--nx-700); font-weight: 600; }
.rp-search { position: relative; margin-bottom: .875rem; max-width: 420px; display: flex; align-items: center; }
.rp-search .mud-icon-root { position: absolute; inset-inline-start: 10px; color: var(--nx-muted); pointer-events: none; }
.rp-search .set-input { width: 100%; height: 38px; padding-inline-start: 34px; }
.rp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
.rp-card { display: flex; flex-direction: column; justify-content: space-between; padding: 0; overflow: hidden; }
.rp-card-main { display: flex; gap: .75rem; padding: 1rem 1.125rem .75rem; text-decoration: none; color: inherit; flex: 1; }
.rp-card-main:hover strong { color: var(--nx-accent); }
.rp-card-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--nx-accent-soft); color: var(--nx-700); flex: none; }
.rp-card-text strong { display: block; font-size: .9375rem; font-weight: 640; letter-spacing: -.01em; }
.rp-card-text small { display: block; font-size: .8125rem; color: var(--nx-ink-2); margin-top: 2px; line-height: 1.4; }
.rp-card-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .25rem .75rem .25rem 1.125rem; border-top: 1px solid var(--nx-ring); min-height: 46px; }
.rp-tag { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); }
.rp-card-actions { display: flex; align-items: center; gap: 2px; }
.rp-confirm { gap: .5rem; font-size: .8125rem; color: var(--nx-ink); }
@media (max-width: 900px) { .rp-library { grid-template-columns: minmax(0, 1fr); } .rp-folders { flex-direction: row; flex-wrap: wrap; position: static; } .rp-cards { grid-template-columns: minmax(0, 1fr); } }

.rp-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.rp-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem .25rem .75rem; border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); border-radius: 999px; font: inherit; font-size: .8125rem; color: var(--nx-ink); }
.rp-chip i { font-style: normal; font-weight: 600; }
.rp-chip-x { border: 0; background: transparent; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--nx-muted); padding: 0 .25rem; }
.rp-chip-x:hover { color: #B91C1C; }
.rp-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rp-add .set-input { height: 36px; min-width: 140px; }
.rp-summary { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; font-size: .8125rem; color: var(--nx-ink-2); margin: 0 0 .75rem; }
.rp-warn { color: #B45309; }
.rp-sort { border: 0; background: transparent; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; padding: 0; font-weight: inherit; }
.rp-sort:hover { color: var(--nx-accent); }
.rp-pager { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; padding-top: .75rem; font-size: .8125rem; color: var(--nx-muted); }
.rp-table td, .rp-table th { white-space: nowrap; }
.rp-table td:first-child { white-space: normal; min-width: 160px; }
.rp-save { margin-bottom: 1rem; }
.rp-save .set-input { width: 260px; }

.rb-card { margin-bottom: 1rem; }
.rb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .875rem; }
.rb-wide { grid-column: span 2; }
@media (max-width: 640px) { .rb-wide { grid-column: auto; } }
.rb-check { display: flex; gap: .5rem; align-items: center; font-size: .8125rem; color: var(--nx-ink-2); margin-top: .875rem; }
.rb-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .625rem; }
.rb-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: .75rem 1rem; border: 1px solid var(--nx-ring-strong); border-radius: 10px; background: var(--nx-surface); font: inherit; font-size: .875rem; font-weight: 600; color: var(--nx-ink); cursor: pointer; text-align: start; }
.rb-choice small { font-weight: 400; color: var(--nx-muted); font-size: .75rem; }
.rb-choice:hover { border-color: var(--nx-accent); }
.rb-choice.is-on { border-color: var(--nx-accent); background: var(--nx-accent-soft); box-shadow: 0 0 0 2px var(--nx-accent-soft); }
.rb-cols { list-style: none; margin: 0 0 .5rem; padding: 0; }
.rb-cols li { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .75rem; border: 1px solid var(--nx-ring); border-radius: 8px; margin-bottom: .375rem; flex-wrap: wrap; }
.rb-cols li > span:first-child { flex: 1 1 auto; font-size: .875rem; }
.rb-avail { display: flex; flex-wrap: wrap; gap: .375rem; }
.rb-add { cursor: pointer; padding: .25rem .75rem; }
.rb-add:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.rb-agg .set-input { height: 34px; min-width: 120px; }
.rb-muted { color: var(--nx-muted); font-weight: 400; }

.sx-h-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 1.5rem 0 .25rem; }
.sx-h-row .sx-h { margin: 0; }
.sx-h-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.sx-h-tools .set-input { height: 36px; min-width: 150px; width: auto; }
.sx-compare-line { font-size: .75rem; color: var(--nx-muted); margin: 0 0 .75rem; }
.sx-kv .pm-row { gap: .75rem; }
.sx-kv strong { min-width: 48px; text-align: end; font-variant-numeric: tabular-nums; }
.sx-kv .sx-meta { min-width: 110px; text-align: end; }

.sx-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.sx-cols3 > .pm-card { margin-bottom: 0; }
@media (max-width: 1100px) { .sx-cols3 { grid-template-columns: minmax(0, 1fr); } }

/* Quotation: "one total" or "list of items" switch, and the price-list picker */
.qt-mode { display: inline-flex; border: 1px solid var(--nx-border, #e3e5f1); border-radius: 10px; overflow: hidden; }
.qt-mode button { border: 0; background: transparent; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.qt-mode button.is-on { background: var(--mud-palette-primary, #4338ca); color: #fff; }
.qt-pick { margin: 0 0 10px; max-width: 360px; }

/* Share a document on WhatsApp, inside the send form */
.sd-wa { margin: 6px 0 14px; padding: 12px 14px; border: 1px dashed var(--nx-border, #E3E5F1); border-radius: 10px; }
.sd-wa-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sd-wa-row .set-input { flex: 1 1 220px; min-width: 0; }
.sd-wa-go { text-decoration: none; }

/* Emails on a lead, customer or deal */
.se-form { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--nx-border, #E3E5F1); border-radius: 10px; }
.se-body summary { cursor: pointer; font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 4px; }
.se-body .rel-note-text { white-space: pre-line; margin-top: 6px; }

/* Lead score badges and the duplicate warning */
.lead-score { display: inline-block; min-width: 30px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; }
.lead-score.is-high { background: #DCFCE7; color: #166534; }
.lead-score.is-medium { background: #FEF3C7; color: #92400E; }
.lead-score.is-low { background: #F1F2F8; color: #6B6F8F; }
html[data-theme="dark"] .lead-score.is-high { background: #14532D; color: #BBF7D0; }
html[data-theme="dark"] .lead-score.is-medium { background: #78350F; color: #FDE68A; }
html[data-theme="dark"] .lead-score.is-low { background: #2A2D45; color: #A5A9C8; }
.ld-dups { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid #F59E0B; }
.ld-dup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ld-dup-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; }
.ld-dup-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 6px; background: var(--mud-palette-background-gray, #F1F2F8); color: var(--mud-palette-text-secondary); }
.ld-dup-merge { margin-inline-start: auto; }
.ld-dup-confirm { margin-inline-start: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ls-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin: 8px 0 14px; }
.ls-rules { margin: 0 0 10px; padding-inline-start: 20px; display: grid; gap: 4px; }

/* Customer health, and the extra kinds of event on a customer's timeline */
.ch-badge { display: inline-flex; gap: 6px; align-items: center; padding: 3px 12px; border-radius: 999px; font-size: 13px; }
.ch-badge.is-good { background: #DCFCE7; color: #166534; }
.ch-badge.is-watch { background: #FEF3C7; color: #92400E; }
.ch-badge.is-risk { background: #FEE2E2; color: #991B1B; }
html[data-theme="dark"] .ch-badge.is-good { background: #14532D; color: #BBF7D0; }
html[data-theme="dark"] .ch-badge.is-watch { background: #78350F; color: #FDE68A; }
html[data-theme="dark"] .ch-badge.is-risk { background: #7F1D1D; color: #FECACA; }
.ch-factors { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.ch-pts { display: inline-block; min-width: 34px; font-weight: 700; }
.ch-factors .is-good .ch-pts { color: #166534; }
.ch-factors .is-bad .ch-pts { color: #B91C1C; }
html[data-theme="dark"] .ch-factors .is-good .ch-pts { color: #86EFAC; }
html[data-theme="dark"] .ch-factors .is-bad .ch-pts { color: #FCA5A5; }
.ca-email { background:#8B5CF6; } .ca-note { background:#64748B; } .ca-activity { background:#14B8A6; } .ca-invoice { background:#16A34A; } .ca-ticket { background:#EF4444; }

/* Ready-made plans (industry templates) */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-top: 10px; }
.ip-card { border: 1px solid var(--nx-border, #E3E5F1); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
.ip-industry { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }

/* Quick actions: big tap targets for a phone, and the dictation microphone */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.qa-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1.125rem 1.125rem 1rem; min-height: 120px;
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); color: inherit; text-decoration: none;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.qa-tile:hover { border-color: var(--nx-accent); box-shadow: var(--nx-sh-2); transform: translateY(-1px); }
.qa-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--nx-accent-soft); color: var(--nx-accent); margin-bottom: .375rem; }
.qa-name { font-weight: 650; font-size: 1rem; }
.qa-desc { font-size: .8125rem; color: var(--nx-ink-2); line-height: 1.4; }
@media (max-width: 600px) { .qa-grid { grid-template-columns: 1fr 1fr; } .qa-tile { min-height: 110px; } }
.nx-mic {
    position: absolute; z-index: 1300; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--nx-ring); cursor: pointer;
    background: var(--nx-surface); color: var(--nx-accent); box-shadow: var(--nx-sh-2); display: none; align-items: center; justify-content: center; padding: 0;
}
.nx-mic svg { width: 20px; height: 20px; fill: currentColor; }
.nx-mic.is-on { display: flex; }
.nx-mic.is-listening { background: #dc2626; color: #fff; border-color: #dc2626; animation: nx-mic-pulse 1.2s ease-in-out infinite; }
@keyframes nx-mic-pulse { 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, .18); } }
@media (prefers-reduced-motion: reduce) { .nx-mic.is-listening { animation: none; } }

/* Table headers that stick while the list scrolls must be opaque, otherwise the rows show through them and the words overlap. */
.nx-table thead th, .pay-grid thead th, .load-grid thead th { background: var(--nx-surface) !important; }
.nx-table thead .nx-sticky-actions { background: var(--nx-surface) !important; }

/* Dark theme: native tick boxes drew black on dark, the filled button's lighter blue made its white words faint, and the package cards kept light colours. */
html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { color-scheme: light; }
html[data-theme="dark"] .mud-button-filled.mud-button-filled-primary { background-color: #4F46E5 !important; color: #fff !important; }
html[data-theme="dark"] .mud-button-filled.mud-button-filled-primary:hover { background-color: #6058F0 !important; }
html[data-theme="dark"] .mud-button-filled.mud-button-filled-primary.mud-disabled { opacity: .5; }
html[data-theme="dark"] .bl-pick { background: rgba(139, 140, 245, .16); color: #C9CAFB; }
html[data-theme="dark"] .bl-plan.is-on .bl-pick { background: #4F46E5; color: #fff; }
html[data-theme="dark"] .bl-step { background: var(--nx-surface-3); color: var(--nx-ink); }
html[data-theme="dark"] .bl-step:hover { background: var(--nx-ring-strong); }
html[data-theme="dark"] .bl-plan:hover { box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .bl-pay { box-shadow: none; }
html[data-theme="dark"] .bl-card { box-shadow: none; }
html[data-theme="dark"] .bl-gauge > i { background: #8B8CF5; }
html[data-theme="dark"] .bl-gauge.is-warn > i { background: var(--nx-warning); }
html[data-theme="dark"] .bl-gauge.is-full > i { background: var(--nx-critical); }
html[data-theme="dark"] .ev-bar, html[data-theme="dark"] .ev-tab:hover { background: var(--nx-surface-2); }
html[data-theme="dark"] .ev-tab { color: var(--nx-ink); }
html[data-theme="dark"] .ev-tab.is-on { background: #4F46E5; color: #fff; }
html[data-theme="dark"] .ev-count { color: #C9CAFB; }
html[data-theme="dark"] .ev-icon { background: rgba(139, 140, 245, .16); color: #C9CAFB; }
html[data-theme="dark"] .ev-chip { background: rgba(251, 191, 36, .16); color: #FCD34D; }

/* ---- Purchases and suppliers (reuse the invoice and CRM styles; only the few extras live here) ---- */
.pur-warn-ic { vertical-align: -4px; margin-inline-start: .25rem; }
.pur-warn-list { margin: .25rem 0 .375rem; padding-inline-start: 1.1rem; }
.pur-sub-num { font-weight: 500; color: var(--nx-muted); font-size: .7em; }
.pur-done { color: #15803D; font-weight: 600; }
.pur-rep-note { padding: .875rem 1rem 0; }
.pur-rep-chart { padding: 1rem 1rem .25rem; }
.pur-lines-table .line-desc { min-width: 200px; }
.pur-lines-table input.set-input { min-width: 64px; }
.pur-lines-table .pur-line-account { margin-top: .25rem; font-size: .8125rem; min-width: 200px; }
.pur-dash { margin-top: .5rem; }
.bg-split { display: flex; flex-wrap: wrap; gap: .25rem .875rem; font-size: .8125rem; color: var(--nx-muted); margin: .5rem 0 0; }
.bg-committed { color: var(--nx-800); font-weight: 550; }
html[data-theme="dark"] .pur-done { color: #86EFAC; }
html[data-theme="dark"] .bg-committed { color: #C7D2FE; }

/* ---- Sales orders and delivery notes (reuse the invoice, purchase and CRM styles; only the few extras live here) ---- */
.sop-bar { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background: var(--nx-surface-2, rgba(23,21,59,.08)); overflow: hidden; vertical-align: middle; }
.sop-bar > i { display: block; height: 100%; background: #16A34A; border-radius: inherit; }
.sop-bar.is-wide { width: 140px; }
.sop-progress { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center; margin: .25rem 0 1rem; }
.sop-progress > div { display: flex; align-items: center; gap: .5rem; }
.sop-links { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0 0 .875rem; font-size: .8125rem; }
.sop-link { display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .625rem; border-radius: 999px; border: 1px solid var(--nx-ring-strong, rgba(23,21,59,.14));
    background: var(--nx-plane, #fff); color: var(--nx-ink); text-decoration: none; font-weight: 550; }
a.sop-link:hover { border-color: var(--nx-500, #4F46E5); color: var(--nx-500, #4F46E5); }
.sop-link.is-here { background: var(--nx-50, #EEF2FF); border-color: var(--nx-200, #C7D2FE); color: var(--nx-800, #3730A3); }
.sop-link.is-undone { text-decoration: line-through; opacity: .65; }
.sop-arrow { color: var(--nx-muted); }
.sop-undone td { opacity: .6; }
.sop-check { display: flex; gap: .5rem; align-items: center; margin: .75rem 0 .5rem; font-weight: 550; }
.sop-pad { margin: .25rem 0 .5rem; }
.sop-sig-wrap { display: flex; flex-direction: column; gap: .375rem; }
.sop-sig { width: 100%; max-width: 360px; aspect-ratio: 3 / 1; background: #fff; border: 1px solid rgba(23,21,59,.15); border-radius: 10px; }
.sop-sig path { fill: none; stroke: #1E1B6B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sop-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
@media (max-width: 640px) { .sop-hide-sm { display: none; } .sop-bar.is-wide { width: 96px; } }
html[data-theme="dark"] .sop-link.is-here { background: rgba(139, 140, 245, .16); border-color: rgba(139, 140, 245, .35); color: #C9CAFB; }
html[data-theme="dark"] .sop-bar > i { background: #4ADE80; }

/* ---- Customer feedback (NPS): the score badge, the promoter/passive/detractor bar, the monthly trend and the answer page ---- */
.nps-card .crm-empty a, .nps-banner a { margin-inline-start: .375rem; }
.nps-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.nps-top { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .25rem 0 .75rem; }
.nps-top-text { flex: 1 1 240px; min-width: 0; }
.nps-score { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; padding: .625rem .875rem; border-radius: 14px; background: var(--nx-surface-3); }
.nps-score strong { font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nps-score span { font-size: .75rem; font-weight: 600; }
.nps-score.is-good { background: #DCFCE7; color: #166534; }
.nps-score.is-watch { background: #FEF3C7; color: #92400E; }
.nps-score.is-risk { background: #FEE2E2; color: #991B1B; }
.nps-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--nx-surface-3); margin: .25rem 0 .375rem; }
.nps-bar i { display: block; height: 100%; }
.nps-bar .is-promoter, .nps-trend .is-good { background: #17B26A; }
.nps-bar .is-passive { background: #F79009; }
.nps-bar .is-detractor, .nps-trend .is-risk { background: #F04438; }
.nps-legend { display: flex; flex-wrap: wrap; gap: .25rem .875rem; font-size: .75rem; color: var(--nx-muted); margin-bottom: .25rem; }
.nps-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: .3rem; vertical-align: 0; }
.nps-legend .is-promoter::before { background: #17B26A; } .nps-legend .is-passive::before { background: #F79009; } .nps-legend .is-detractor::before { background: #F04438; }
.nps-alert { margin-top: .375rem; font-size: .8125rem; font-weight: 600; } .nps-alert a { color: #B42318; }
.nps-latest, .nps-answers { list-style: none; margin: 0; padding: 0; }
.nps-latest li, .nps-answer { display: flex; gap: .75rem; align-items: flex-start; padding: .625rem 0; border-top: 1px solid var(--nx-ring); }
.nps-answers .nps-answer { padding: .75rem 1rem; }
.nps-answer-body { flex: 1 1 auto; min-width: 0; }
.nps-who { font-size: .8438rem; } .nps-who .pf-hint { margin-inline-start: .375rem; }
.nps-comment { font-size: .875rem; margin: .125rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.nps-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 8px; font-weight: 700; font-size: .875rem; flex: 0 0 auto; }
.nps-chip.is-promoter { background: #DCFCE7; color: #166534; }
.nps-chip.is-passive { background: #FEF3C7; color: #92400E; }
.nps-chip.is-detractor { background: #FEE2E2; color: #991B1B; }
.nps-num { font-weight: 650; } .nps-num.is-good { color: #15803D; } .nps-num.is-risk { color: #B42318; } .nps-num.is-watch { color: #B54708; }
.nps-summary { padding: 1rem 1rem .25rem; } .nps-summary-bar { max-width: 640px; }
.nps-h { font-size: .875rem; font-weight: 650; margin: 1rem 1rem .5rem; }
.nps-trend { display: flex; gap: 6px; align-items: stretch; height: 180px; padding: 0 1rem 1rem; overflow-x: auto; }
.nps-trend-col { position: relative; display: flex; flex-direction: column; flex: 1 0 34px; min-width: 34px; }
.nps-trend-up, .nps-trend-down { flex: 1 1 50%; display: flex; justify-content: center; }
.nps-trend-up { align-items: flex-end; border-bottom: 1px solid var(--nx-ring-strong); }
.nps-trend-down { align-items: flex-start; }
.nps-trend-up i, .nps-trend-down i { display: block; width: 60%; max-width: 28px; min-height: 2px; }
.nps-trend-up i { border-radius: 4px 4px 0 0; } .nps-trend-down i { border-radius: 0 0 4px 4px; }
.nps-trend-val { font-size: .6875rem; font-weight: 650; text-align: center; }
.nps-trend-lbl { font-size: .6875rem; color: var(--nx-muted); text-align: center; white-space: nowrap; }
.nps-send { margin-bottom: 1rem; }
.nps-people { display: grid; gap: .25rem; margin: .5rem 0; }
.nps-person { margin: 0; } .nps-person .pf-hint { margin-inline-start: .375rem; } .nps-person .crm-pill { margin-inline-start: .375rem; }
.nps-preview-actions { justify-content: flex-start; }
.nps-preview { margin-top: .75rem; } .nps-preview iframe { width: 100%; height: 520px; border: 1px solid var(--nx-ring); border-radius: 10px; background: #F4F5FA; }
.nps-form .nps-intro { margin: 0 0 .75rem; white-space: pre-wrap; }
.nps-q { border: 0; padding: 0; margin: 0 0 1rem; } .nps-q legend { font-weight: 650; font-size: 1.05rem; margin-bottom: .625rem; }
.nps-scale { gap: 5px; }
.nps-scale .sv-pick span { min-width: 40px; padding: 10px 0; font-weight: 650; }
.nps-pick.is-detractor input:checked + span { background: #D92D20; border-color: #D92D20; }
.nps-pick.is-passive input:checked + span { background: #DC6803; border-color: #DC6803; }
.nps-pick.is-promoter input:checked + span { background: #079455; border-color: #079455; }
.nps-stop { text-align: center; margin: .5rem 0 1rem; font-size: .85rem; } .nps-stop .pt-linkbtn { color: #4A5069; text-decoration: underline; }
@media (max-width: 600px) {
    .nps-scale { display: grid; grid-template-columns: repeat(6, 1fr); }
    .nps-scale .sv-pick span { min-width: 0; width: 100%; }
    .nps-trend { height: 150px; }
}
html[data-theme="dark"] .nps-score.is-good, html[data-theme="dark"] .nps-chip.is-promoter { background: #14532D; color: #BBF7D0; }
html[data-theme="dark"] .nps-score.is-watch, html[data-theme="dark"] .nps-chip.is-passive { background: #78350F; color: #FDE68A; }
html[data-theme="dark"] .nps-score.is-risk, html[data-theme="dark"] .nps-chip.is-detractor { background: #7F1D1D; color: #FECACA; }
html[data-theme="dark"] .nps-num.is-good { color: #86EFAC; } html[data-theme="dark"] .nps-num.is-risk { color: #FCA5A5; } html[data-theme="dark"] .nps-num.is-watch { color: #FCD34D; }
html[data-theme="dark"] .nps-alert a { color: #FCA5A5; }
html[data-theme="dark"] .nps-preview iframe { background: #1C1F33; }

/* ---- Goals and key results (OKRs): progress bars with the expected-pace mark, the alignment tree, the goal page and the Dashboard card ---- */
.gl-bar { display: flex; align-items: center; gap: .5rem; min-width: 120px; }
.gl-track { position: relative; overflow: visible; }
.gl-fill { max-width: 100%; }
.gl-fill.is-OnTrack { background: #17B26A; }
.gl-fill.is-AtRisk { background: #F79009; }
.gl-fill.is-OffTrack { background: #F04438; }
.gl-fill.is-Done { background: var(--nx-ord-2); }
.gl-fill.is-closed { background: var(--nx-muted); }
.gl-expected { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-inline-start: -1px; border-radius: 1px; background: var(--nx-ink-2); opacity: .55; }
.gl-pad { padding: .875rem 1rem 0; }
/* The filter card above the stat tiles (Customer feedback, Goals) keeps the same gap as the other cards. */
.nps-filters { margin-bottom: 1rem; }
.gl-tree { list-style: none; margin: 0; padding: 0; padding-inline-start: 1.5rem; }
.gl-tree.is-root { padding: .5rem 1rem 1rem; }
.gl-node-row { display: flex; align-items: center; gap: .625rem; padding: .5rem .25rem; border-bottom: 1px solid var(--nx-ring); min-width: 0; }
.gl-node-row.is-closed .gl-title { color: var(--nx-muted); }
.gl-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; border: 0; background: transparent; border-radius: 6px; color: var(--nx-ink-2); cursor: pointer; padding: 0; }
.gl-toggle:hover { background: var(--nx-surface-3); }
.gl-toggle.is-leaf { cursor: default; }
.gl-level { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: var(--nx-surface-3); color: var(--nx-ink-2); }
.gl-level.is-Company { background: #EEF2FF; color: #4338CA; }
.gl-level.is-Team { background: #ECFDF3; color: #067647; }
.gl-level.is-Person { background: #FEF6EE; color: #B93815; }
.nx-page-icon.gl-level { width: auto; height: auto; flex: 0 0 auto; }
.gl-node-main { flex: 1 1 auto; min-width: 0; }
.gl-node-main .gl-title { overflow-wrap: anywhere; }
.gl-node-bar { flex: 0 0 200px; }
.gl-node-status { flex: 0 0 110px; display: flex; justify-content: flex-end; }
.gl-cell-title { display: flex; align-items: center; gap: .5rem; white-space: normal; min-width: 220px; }
.gl-table td:first-child { white-space: normal; }
.gl-col-bar { min-width: 170px; }
.gl-due td { background: var(--nx-accent-soft); }
.gl-due-link { font-size: .75rem; font-weight: 600; }
.gl-empty { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; }
.gl-empty .mud-icon-root { font-size: 2rem; color: var(--nx-muted); }
.gl-close { padding: 1rem 1.125rem; margin-bottom: 1rem; }
.gl-grade { width: 80px; }
.gl-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.gl-summary { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.gl-summary-ring { flex: 0 0 auto; }
.gl-summary-facts { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.gl-auto { margin-inline-start: .375rem; }
.gl-facts { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; font-size: .75rem; color: var(--nx-muted); }
.gl-facts b { display: block; color: var(--nx-ink); font-size: .8438rem; font-weight: 600; }
.gl-banner { margin: 0; }
.gl-desc { font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.gl-krs { list-style: none; margin: 0; padding: 0; }
.gl-kr { display: grid; grid-template-columns: minmax(0, 1fr) auto 180px; gap: .5rem 1rem; align-items: center; padding: .625rem 0; border-top: 1px solid var(--nx-ring); }
.gl-kr-values { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-note { color: #B54708; }
.gl-checkin .gl-ci-row label { font-weight: 600; }
.gl-ci-input { display: flex; align-items: center; gap: .5rem; }
.gl-ci-input .set-input { max-width: 180px; }
.gl-timeline { list-style: none; margin: 0; padding: 0; padding-inline-start: 1rem; border-inline-start: 2px solid var(--nx-ring-strong); }
.gl-timeline li { position: relative; padding: 0 0 .875rem; padding-inline-start: .875rem; font-size: .8438rem; }
.gl-timeline li::before { content: ""; position: absolute; inset-inline-start: -1.4rem; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-ord-2); box-shadow: 0 0 0 3px var(--nx-surface); }
.gl-timeline li.is-auto::before { background: var(--nx-muted); }
.gl-tl-when { font-size: .75rem; color: var(--nx-muted); }
.gl-tl-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.gl-comments { list-style: none; margin: 0 0 .75rem; padding: 0; }
.gl-comments li { display: flex; gap: .625rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--nx-ring); }
.gl-comment-body { flex: 1 1 auto; min-width: 0; }
.gl-comment-new { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.gl-child .gl-bar { margin-top: .25rem; }
.gl-kr-edit { border: 1px solid var(--nx-ring); border-radius: 10px; padding: .75rem; margin-bottom: .75rem; background: var(--nx-surface); }
.gl-kr-edit-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.gl-kr-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-800); font-size: .75rem; font-weight: 700; }
.gl-kr-title { font-weight: 600; }
.gl-carry { margin-top: 1.5rem; }
#pm-goals .pm-row .gl-bar { margin-top: .25rem; }
html[data-theme="dark"] .gl-level.is-Company { background: rgba(99, 102, 241, .2); color: #C7D2FE; }
html[data-theme="dark"] .gl-level.is-Team { background: rgba(34, 197, 94, .18); color: #86EFAC; }
html[data-theme="dark"] .gl-level.is-Person { background: rgba(249, 115, 22, .18); color: #FDBA74; }
html[data-theme="dark"] .gl-note { color: #FCD34D; }
html[data-theme="dark"] .gl-kr-num { color: #C7D2FE; }
@media (max-width: 900px) {
    .gl-detail { grid-template-columns: minmax(0, 1fr); }
    .gl-node-bar { flex-basis: 130px; }
}
@media (max-width: 600px) {
    .gl-node-row { flex-wrap: wrap; }
    .gl-node-main { flex-basis: calc(100% - 70px); }
    .gl-node-bar { flex: 1 1 auto; margin-inline-start: 58px; }
    .gl-node-status { flex: 0 0 auto; }
    .gl-tree { padding-inline-start: .75rem; }
    .gl-kr { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Wiki: spaces, the page tree, pages (read and edit), history and templates. Page text uses the editor's own styles (nx-rich-body). ---- */
.wk-spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.wk-spaces.is-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.wk-space { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 1.125rem; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.wk-space:hover { border-color: var(--nx-accent); box-shadow: 0 6px 18px rgba(67, 56, 202, .08); transform: translateY(-1px); }
.wk-space.is-archived { opacity: .7; }
.wk-space-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 auto; }
.wk-space-name { font-weight: 700; font-size: .9375rem; color: var(--nx-ink); overflow-wrap: anywhere; }
.wk-space-meta { font-size: .75rem; color: var(--nx-muted); }
.wk-space-desc { font-size: .8125rem; color: var(--nx-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-space-foot { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .75rem; color: var(--nx-muted); margin-top: .25rem; }
.wk-role { margin-inline-start: auto; padding: 0 .5rem; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); font-weight: 600; }
.wk-space-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: #EEF2FF; color: #4338CA; }
.wk-space-icon.is-small { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; }
.nx-page-icon.wk-space-icon { width: auto; height: auto; flex: 0 0 auto; }
.wk-space-icon.is-indigo, .wk-dot.is-indigo, .wk-pick-color.is-indigo { --wk-bg: #EEF2FF; --wk-fg: #4338CA; }
.wk-space-icon.is-violet, .wk-dot.is-violet, .wk-pick-color.is-violet { --wk-bg: #F5F3FF; --wk-fg: #6D28D9; }
.wk-space-icon.is-blue, .wk-dot.is-blue, .wk-pick-color.is-blue { --wk-bg: #EFF6FF; --wk-fg: #1D4ED8; }
.wk-space-icon.is-teal, .wk-dot.is-teal, .wk-pick-color.is-teal { --wk-bg: #F0FDFA; --wk-fg: #0F766E; }
.wk-space-icon.is-green, .wk-dot.is-green, .wk-pick-color.is-green { --wk-bg: #ECFDF3; --wk-fg: #067647; }
.wk-space-icon.is-amber, .wk-dot.is-amber, .wk-pick-color.is-amber { --wk-bg: #FFFAEB; --wk-fg: #B54708; }
.wk-space-icon.is-orange, .wk-dot.is-orange, .wk-pick-color.is-orange { --wk-bg: #FFF4ED; --wk-fg: #C4320A; }
.wk-space-icon.is-red, .wk-dot.is-red, .wk-pick-color.is-red { --wk-bg: #FEF3F2; --wk-fg: #B42318; }
.wk-space-icon.is-pink, .wk-dot.is-pink, .wk-pick-color.is-pink { --wk-bg: #FDF2FA; --wk-fg: #C11574; }
.wk-space-icon.is-slate, .wk-dot.is-slate, .wk-pick-color.is-slate { --wk-bg: #F1F5F9; --wk-fg: #334155; }
.wk-space-icon[class*="is-"] { background: var(--wk-bg, #EEF2FF); color: var(--wk-fg, #4338CA); }
.wk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wk-fg, #4338CA); margin-inline-end: .375rem; }
.wk-space-chip { display: inline-flex; align-items: center; white-space: nowrap; }
.wk-draft-pill, .wk-home-pill { display: inline-block; margin-inline-start: .375rem; padding: 0 .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 650; vertical-align: middle; }
.wk-draft-pill { background: #FFFAEB; color: #B54708; }
.wk-home-pill { background: var(--nx-accent-soft); color: var(--nx-accent); }
.wk-draft-dot { width: 7px; height: 7px; border-radius: 50%; background: #F79009; flex: 0 0 7px; }
.wk-list { list-style: none; margin: 0; padding: .25rem 1rem .5rem; }
.wk-list.is-dense { padding: 0; }
.wk-list li { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-top: 1px solid var(--nx-ring); min-width: 0; }
.wk-list li:first-child { border-top: 0; }
.wk-list-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wk-list-main a { overflow-wrap: anywhere; }
.wk-cell-title { white-space: normal; min-width: 240px; }
.wk-table td:first-child { white-space: normal; }

/* the space page: the tree on the side, the page beside it */
.wk-crumbs a { overflow-wrap: anywhere; }
.wk-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
.wk-layout.is-tree-closed { grid-template-columns: 56px minmax(0, 1fr); }
.wk-layout.is-tree-closed .wk-side > :not(.wk-side-head), .wk-layout.is-tree-closed .wk-side-space { display: none; }
.wk-side { position: sticky; top: .75rem; max-height: calc(100vh - 6rem); overflow: auto; padding: .75rem; }
.wk-side-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.wk-side-space { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--nx-ink); font-weight: 700; text-decoration: none; }
.wk-side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-side-meta { font-size: .75rem; color: var(--nx-muted); margin: .25rem 0 .5rem; }
.wk-archived { font-size: .75rem; font-weight: 650; color: #B54708; margin-bottom: .5rem; }
.wk-side-actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .5rem; }
.wk-side-hint { margin: 0 0 .5rem; }
.wk-tree { list-style: none; margin: 0; padding: 0; padding-inline-start: .875rem; }
.wk-tree.is-root { padding-inline-start: 0; }
.wk-node { display: flex; align-items: center; gap: .25rem; min-height: 32px; padding: 0 .25rem; border-radius: 7px; border: 1px solid transparent; }
.wk-node:hover { background: var(--nx-surface-3); }
.wk-node.is-current { background: var(--nx-accent-soft); }
.wk-node.is-current .wk-node-title { color: var(--nx-accent); font-weight: 650; }
.wk-node[draggable="true"] { cursor: grab; }
.wk-node.is-drop-inside { border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.wk-node.is-drop-before { box-shadow: inset 0 2px 0 var(--nx-accent); }
.wk-node.is-drop-after { box-shadow: inset 0 -2px 0 var(--nx-accent); }
.wk-node-title { flex: 1 1 auto; min-width: 0; font-size: .8438rem; color: var(--nx-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .25rem 0; }
.wk-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border: 0; background: transparent; border-radius: 5px; color: var(--nx-ink-2); cursor: pointer; padding: 0; }
.wk-toggle:hover { background: var(--nx-surface-2); }
.wk-toggle.is-leaf { cursor: default; }
.wk-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.wk-panel { padding: 1rem 1.125rem; }
.wk-inline-panel { margin: 0 0 1rem; padding: .875rem 1rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r); background: var(--nx-surface-2); }
.wk-page { padding: 1.25rem 1.5rem 1.5rem; min-width: 0; }
.wk-page-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: .75rem; }
.wk-page-titles { min-width: 0; flex: 1 1 320px; }
.wk-title { margin: 0 0 .25rem; font-size: 1.625rem; font-weight: 750; line-height: 1.25; color: var(--nx-ink); overflow-wrap: anywhere; }
.wk-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: var(--nx-muted); }
.wk-page-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.wk-star .mud-icon-root { color: #F5A524; }
.wk-banner { margin-bottom: .75rem; }
.wk-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--nx-ring); }
.wk-section h2 { font-size: .9375rem; font-weight: 700; margin: 0 0 .625rem; }
.wk-child-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.wk-child { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); color: var(--nx-ink); text-decoration: none; font-size: .8438rem; overflow-wrap: anywhere; }
.wk-child:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.wk-below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.wk-files { list-style: none; margin: 0; padding: 0 1rem .5rem; }
.wk-files li { display: flex; align-items: center; gap: .5rem; padding: .4375rem 0; border-top: 1px solid var(--nx-ring); min-width: 0; }
.wk-files li:first-child { border-top: 0; }
.wk-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8438rem; }
.wk-upload { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.wk-file-input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.wk-comments .gl-comments, .wk-comments .gl-comment-new { padding: 0 1rem; }
.wk-comments .gl-comment-new { padding-bottom: 1rem; }
.mention-list.is-below { top: calc(100% + 4px); bottom: auto; }

/* page text: headings, code, quotes, callout boxes, dividers and pictures (in the reader and in the editor) */
.wk-doc { min-height: 0; max-height: none; overflow: visible; padding: 0; font-size: .9375rem; line-height: 1.7; }
.wk-doc h1, .nx-rich.is-document .nx-rich-body h1 { font-size: 1.5rem; font-weight: 750; margin: 1.25rem 0 .5rem; line-height: 1.3; }
.wk-doc h2, .nx-rich.is-document .nx-rich-body h2 { font-size: 1.25rem; font-weight: 700; margin: 1.125rem 0 .5rem; line-height: 1.35; }
.wk-doc h3, .nx-rich.is-document .nx-rich-body h3 { font-size: 1.0625rem; font-weight: 700; margin: 1rem 0 .375rem; }
.wk-doc h4, .nx-rich.is-document .nx-rich-body h4 { font-size: .9375rem; font-weight: 700; margin: .875rem 0 .375rem; }
.wk-doc > :first-child { margin-top: 0; }
.wk-doc pre, .nx-rich.is-document .nx-rich-body pre { margin: .5rem 0 .75rem; padding: .75rem 1rem; border-radius: var(--nx-r-sm); background: var(--nx-surface-3); font-family: var(--nx-mono); font-size: .8125rem; line-height: 1.55; overflow-x: auto; white-space: pre; }
.wk-doc code, .nx-rich.is-document .nx-rich-body code { font-family: var(--nx-mono); font-size: .85em; }
.wk-doc blockquote, .nx-rich.is-document .nx-rich-body blockquote { margin: .5rem 0 .75rem; padding: .25rem 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--nx-ring-strong); color: var(--nx-ink-2); }
.wk-doc hr, .nx-rich.is-document .nx-rich-body hr { border: 0; border-top: 1px solid var(--nx-ring-strong); margin: 1.25rem 0; }
.wk-doc img, .nx-rich.is-document .nx-rich-body img { display: block; max-width: 100%; height: auto; border-radius: var(--nx-r-sm); margin: .5rem 0; }
.nx-callout { margin: .625rem 0 .875rem; padding: .625rem .875rem; border-radius: var(--nx-r-sm); border-inline-start: 4px solid #4338CA; background: #EEF2FF; }
.nx-callout > :last-child { margin-bottom: 0; }
.nx-callout.is-tip { border-color: #12B76A; background: #ECFDF3; }
.nx-callout.is-warning { border-color: #F79009; background: #FFFAEB; }
.nx-callout.is-danger { border-color: #F04438; background: #FEF3F2; }
.nx-rich.is-document .nx-rich-body { min-height: 55vh; max-height: none; font-size: .9375rem; line-height: 1.7; padding: 1.25rem 1.5rem; }
.nx-rich.is-document .nx-rich-toolbar { position: sticky; top: 0; z-index: 2; }

/* the editor page */
.wk-edit-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.wk-title-input { flex: 1 1 320px; min-width: 0; border: 0; border-bottom: 2px solid var(--nx-ring-strong); background: transparent; font: inherit; font-size: 1.5rem; font-weight: 750; color: var(--nx-ink); padding: .25rem 0; }
.wk-title-input:focus { outline: none; border-bottom-color: var(--nx-accent); }
.wk-edit-status { font-size: .75rem; color: var(--nx-muted); }
.wk-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.wk-edit-main { min-width: 0; }
.wk-edit-tools { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; flex-wrap: wrap; }
.wk-edit-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: .75rem; }
.wk-edit-side .set-field { padding: 0 1rem; }
.wk-edit-buttons { display: flex; flex-direction: column; gap: .5rem; padding: 0 1rem 1rem; }
.wk-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; padding: 0 1rem .75rem; }
.wk-thumb { aspect-ratio: 1; padding: 0; border: 1px solid var(--nx-ring-strong); border-radius: 7px; background: var(--nx-surface-2); cursor: pointer; overflow: hidden; }
.wk-thumb:hover { border-color: var(--nx-accent); }
.wk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-pick-hint { padding: 0 1rem .5rem; color: var(--nx-accent); font-weight: 600; }

/* history and comparing versions */
.wk-history { display: flex; flex-direction: column; gap: 1rem; }
.wk-row-on td { background: var(--nx-accent-soft); }
.wk-row-actions { white-space: nowrap; text-align: end; }
.wk-diff { list-style: none; margin: 0; padding: 0 1rem 1rem; font-size: .875rem; }
.wk-diff li { display: flex; gap: .5rem; padding: .3125rem .5rem; border-radius: 5px; overflow-wrap: anywhere; }
.wk-diff li.is-added { background: #ECFDF3; color: #054F31; }
.wk-diff li.is-removed { background: #FEF3F2; color: #7A271A; text-decoration: line-through; text-decoration-color: rgba(122, 39, 26, .5); }
.wk-diff-mark { flex: 0 0 1ch; font-weight: 700; font-family: var(--nx-mono); }
.wk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* choosing an icon, a colour, members and a template */
.wk-pick { display: flex; flex-wrap: wrap; gap: .375rem; }
.wk-pick-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--nx-ring-strong); border-radius: 8px; background: var(--nx-surface); color: var(--nx-ink-2); cursor: pointer; padding: 0; }
.wk-pick-icon.is-on { border-color: var(--nx-accent); background: var(--nx-accent-soft); color: var(--nx-accent); }
.wk-pick-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--nx-surface); background: var(--wk-fg); box-shadow: 0 0 0 1px var(--nx-ring-strong); cursor: pointer; padding: 0; }
.wk-pick-color.is-on { box-shadow: 0 0 0 2px var(--nx-ink); }
.wk-members { list-style: none; margin: 0 0 .5rem; padding: 0; }
.wk-members li { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; border-top: 1px solid var(--nx-ring); flex-wrap: wrap; }
.wk-members li > select:first-of-type { flex: 1 1 200px; min-width: 0; }
.wk-role-pick { flex: 0 0 140px; }
.wk-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.wk-template { display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .75rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); background: var(--nx-surface); color: var(--nx-ink); text-align: start; cursor: pointer; font: inherit; }
.wk-template span { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.wk-template small { color: var(--nx-muted); font-size: .75rem; line-height: 1.4; }
.wk-template.is-on { border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.wk-template .mud-icon-root { color: var(--nx-accent); flex: 0 0 auto; }
.wk-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.wk-tpl-card { padding: 1rem 1.125rem; min-width: 0; }
.wk-tpl-head { display: flex; align-items: center; gap: .625rem; }
.wk-tpl-titles { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.wk-tpl-preview { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--nx-ring); font-size: .8438rem; }
.wk-link-search { position: relative; padding: 0 1rem .75rem; }
.tp-card .wk-link-search { padding: .5rem 0 0; }
.wk-link-search .set-input { width: 100%; }
.wk-found { list-style: none; margin: .25rem 0 0; padding: .25rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); background: var(--nx-surface); box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.wk-found button { display: flex; align-items: center; gap: .375rem; width: 100%; padding: .375rem .5rem; border: 0; border-radius: 6px; background: transparent; color: var(--nx-ink); text-align: start; cursor: pointer; font: inherit; font-size: .8438rem; }
.wk-found button:hover { background: var(--nx-surface-3); }
.wk-project { display: flex; flex-direction: column; gap: 1rem; }

@media (max-width: 1100px) { .wk-edit { grid-template-columns: minmax(0, 1fr); } .wk-edit-side { position: static; } }
@media (max-width: 900px) {
  .wk-layout, .wk-layout.is-tree-closed { grid-template-columns: minmax(0, 1fr); }
  .wk-side { position: static; max-height: none; }
  .wk-below { grid-template-columns: minmax(0, 1fr); }
  .wk-page { padding: 1rem; }
  .wk-title { font-size: 1.375rem; }
  .nx-rich.is-document .nx-rich-body { padding: 1rem; min-height: 45vh; }
}

/* printing a page: only the page itself */
@media print {
  .wk-side, .wk-crumbs, .wk-page-actions, .wk-below, .wk-comments, .wk-banner, .wk-inline-panel, .crm-confirm { display: none !important; }
  .wk-layout { display: block; }
  .wk-page { border: 0 !important; box-shadow: none !important; padding: 0; }
  .wk-doc pre { white-space: pre-wrap; }
}

html[data-theme="dark"] .wk-space-icon[class*="is-"] { background: color-mix(in srgb, var(--wk-fg) 22%, transparent); color: color-mix(in srgb, var(--wk-fg) 45%, #ffffff); }
html[data-theme="dark"] .wk-dot, html[data-theme="dark"] .wk-pick-color { background: color-mix(in srgb, var(--wk-fg) 70%, #ffffff); }
html[data-theme="dark"] .wk-draft-pill { background: rgba(247, 144, 9, .18); color: #FCD34D; }
html[data-theme="dark"] .nx-callout { background: rgba(99, 102, 241, .14); }
html[data-theme="dark"] .nx-callout.is-tip { background: rgba(18, 183, 106, .14); }
html[data-theme="dark"] .nx-callout.is-warning { background: rgba(247, 144, 9, .14); }
html[data-theme="dark"] .nx-callout.is-danger { background: rgba(240, 68, 56, .14); }
html[data-theme="dark"] .wk-diff li.is-added { background: rgba(18, 183, 106, .16); color: #A6F4C5; }
html[data-theme="dark"] .wk-diff li.is-removed { background: rgba(240, 68, 56, .16); color: #FECDCA; }
html[data-theme="dark"] .wk-found { box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .wk-node.is-current { background: rgba(139, 140, 245, .16); }
html[data-theme="dark"] .wk-node.is-current .wk-node-title { color: #C7D2FE; }
html[data-theme="dark"] .wk-node-title, html[data-theme="dark"] .wk-child, html[data-theme="dark"] .wk-side-space { color: var(--nx-ink); }
html[dir="rtl"] .wk-toggle svg { transform: scaleX(-1); }

/* ---- Credit notes, refunds and customer statements (reuse the invoice, sales order and CRM styles; only the few extras live here) ---- */
.inv-total small { font-size: .75rem; color: var(--nx-muted); }
.inv-totals.cb-row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .5rem; }
.cn-reason { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-facts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1rem; }
.cn-facts > div { display: flex; flex-direction: column; gap: .125rem; }
.cn-facts strong { font-variant-numeric: tabular-nums; }
.cn-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; margin: 0 0 1rem; }
.cn-kind { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem .875rem; border: 1px solid var(--nx-ring-strong, rgba(23,21,59,.14)); border-radius: 12px; cursor: pointer; background: var(--nx-plane, #fff); }
.cn-kind input { margin-top: .2rem; }
.cn-kind span { display: flex; flex-direction: column; gap: .125rem; }
.cn-kind small { color: var(--nx-muted); font-size: .75rem; }
.cn-kind.is-on { border-color: var(--nx-500, #4F46E5); background: var(--nx-50, #EEF2FF); }
.cn-preview { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .5rem 1.5rem; margin-top: .75rem; font-variant-numeric: tabular-nums; }
.cn-preview b { margin-left: .25rem; }
.cn-preview-total b { font-size: 1.125rem; }
.cn-reasons { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.cn-line-tools { justify-content: flex-start; margin-top: .5rem; }
.cn-proof-pick { margin-left: .5rem; font-size: .75rem; }
.st-asof { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--nx-muted); }
.st-period { padding: 1rem 1.125rem; margin-bottom: 1rem; }
.st-quick { display: flex; flex-wrap: wrap; gap: .375rem; }
.st-summary .nx-stat-value { font-variant-numeric: tabular-nums; }
.st-edge td { font-weight: 600; background: var(--nx-surface-2, rgba(23,21,59,.03)); }
.st-buckets { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.st-buckets > div { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .75rem; border-radius: 10px; background: var(--nx-surface-2, rgba(23,21,59,.04)); }
.st-buckets strong { font-variant-numeric: tabular-nums; }
.st-buckets .is-late strong { color: #B91C1C; }
.st-buckets .is-total { background: var(--nx-50, #EEF2FF); }
.st-ageing td { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .st-buckets { grid-template-columns: repeat(4, minmax(0, 1fr)); } .inv-totals.cb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cn-kinds { grid-template-columns: 1fr; } .st-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cn-reason { max-width: 140px; } }
html[data-theme="dark"] .cn-kind { background: transparent; }
html[data-theme="dark"] .cn-kind.is-on, html[data-theme="dark"] .st-buckets .is-total { background: rgba(139, 140, 245, .16); border-color: rgba(139, 140, 245, .35); }
html[data-theme="dark"] .st-buckets .is-late strong { color: #FCA5A5; }

/* ---- Payment reminders (reuse the invoice, statement and CRM styles; only the few extras live here) ---- */
.inv-totals.rm-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rm-status { display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .75rem; border-radius: 10px; background: var(--nx-50, #EEF2FF); margin-bottom: .75rem; font-size: .875rem; }
.rm-status.is-held { background: var(--nx-surface-2, rgba(23,21,59,.04)); }
.rm-status .mud-icon-root { margin-top: 2px; flex: none; color: var(--nx-accent, #4F46E5); }
.rm-holds { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-bottom: .75rem; }
.rm-holds .set-input { flex: 1 1 260px; max-width: 420px; }
.rm-log { list-style: none; margin: 0; padding: 0; }
.rm-log li { display: grid; grid-template-columns: 96px auto minmax(0, 1fr); gap: .5rem .75rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--nx-ring, rgba(23,21,59,.08)); font-size: .875rem; }
.rm-log li:first-child { border-top: 0; }
.rm-log-date { color: var(--nx-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-log-main { min-width: 0; overflow-wrap: anywhere; }
.rm-narrow { max-width: 220px; }
.rm-days { width: 90px; max-width: 90px; }
.rm-to { max-width: 220px; overflow-wrap: anywhere; }
.rm-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.rm-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; background: #E8EFFF; color: #1D4ED8; }
.rm-chip.is-firm { background: #FEF3C7; color: #92400E; }
.rm-chip.is-final { background: #FEE2E2; color: #B42318; }
.rm-chip .mud-icon-root { font-size: .875rem; }
.rm-step { border: 1px solid var(--nx-ring-strong, rgba(23,21,59,.14)); border-radius: 12px; padding: .75rem .875rem; margin-bottom: .625rem; background: var(--nx-plane, #fff); }
.rm-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rm-step-head .set-input { margin: 0; }
.rm-step-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--nx-accent-soft, #EEF2FF); color: var(--nx-accent, #4F46E5); font-weight: 700; font-size: .75rem; flex: none; }
.rm-grow { flex: 1 1 auto; }
.rm-step-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: .5rem; }
.rm-fee { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rm-wording { margin-top: .5rem; }
.rm-wording summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--nx-accent, #4F46E5); padding: .25rem 0; }
.rm-langs { display: flex; flex-wrap: wrap; gap: .375rem; margin: .5rem 0; }
.rm-lang { border: 1px solid var(--nx-ring-strong, rgba(23,21,59,.14)); background: transparent; border-radius: 999px; padding: 2px 10px; font-size: .75rem; cursor: pointer; color: inherit; }
.rm-lang.has-text { border-color: var(--nx-accent, #4F46E5); }
.rm-lang.is-on { background: var(--nx-accent, #4F46E5); border-color: var(--nx-accent, #4F46E5); color: #fff; }
.rm-ph { font-size: .75rem; margin-right: .25rem; padding: 0 4px; border-radius: 4px; background: var(--nx-surface-2, rgba(23,21,59,.05)); }
.rm-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rm-preview { margin-top: .625rem; padding: .75rem .875rem; border-radius: 10px; background: var(--nx-surface-2, rgba(23,21,59,.04)); font-size: .875rem; }
.rm-preview-subject { font-weight: 700; margin-bottom: .5rem; }
.rm-preview-body { white-space: pre-line; line-height: 1.5; }
@media (max-width: 900px) { .inv-totals.rm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rm-log li { grid-template-columns: 1fr; gap: .25rem; } .rm-narrow, .rm-holds .set-input { max-width: none; } }
html[data-theme="dark"] .rm-status { background: rgba(139, 140, 245, .14); }
html[data-theme="dark"] .rm-status.is-held, html[data-theme="dark"] .rm-preview, html[data-theme="dark"] .rm-ph { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .rm-step { background: transparent; }
html[data-theme="dark"] .rm-chip { background: rgba(96, 165, 250, .16); color: #BFDBFE; }
html[data-theme="dark"] .rm-chip.is-firm { background: rgba(251, 191, 36, .16); color: #FDE68A; }
html[data-theme="dark"] .rm-chip.is-final { background: rgba(248, 113, 113, .16); color: #FECACA; }
.rm-gap { margin-inline-start: .375rem; }
.rm-fee .rm-narrow { max-width: 280px; }
.rm-foot { padding: .5rem 1rem .75rem; margin: 0; }
.st-asof { white-space: nowrap; }

/* --- Daily load (Schedule, Capacity, Dashboard) -------------------------------------
   One set of colours for a person's load everywhere: green under 80% of the hours they have,
   amber from 80% to 100%, red above. Drawn by the shared LoadMeter component. */
:root { --nx-load-ok: #16A34A; --nx-load-full: #F59E0B; --nx-load-over: #DC2626; --nx-load-track: rgba(23,21,59,.08); }
html[data-theme="dark"] { --nx-load-ok: #4ADE80; --nx-load-full: #FBBF24; --nx-load-over: #F87171; --nx-load-track: rgba(255,255,255,.12); }
.nx-load { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nx-load-track { position: relative; flex: 1 1 auto; min-width: 24px; height: 5px; border-radius: 999px; background: var(--nx-load-track); overflow: hidden; }
.nx-load-track i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; background: var(--nx-load-ok); }
.nx-load.tone-full .nx-load-track i { background: var(--nx-load-full); }
.nx-load.tone-over .nx-load-track i { background: var(--nx-load-over); }
.nx-load-txt { flex: none; font-size: 0.625rem; font-weight: 680; color: var(--nx-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-load.tone-over .nx-load-txt { color: var(--nx-load-over); }
.load-cell-meter { margin-top: 4px; }
.load-total .nx-load { margin-top: 4px; }
.load-cell.tone-ok { background: rgba(22,163,74,.05); }
.load-cell.tone-full { background: rgba(245,158,11,.10); }
.load-cell.tone-over { background: rgba(220,38,38,.08); }
.load-cell.is-past { opacity: .85; }
.load-legend .sw.ok { background: var(--nx-load-ok); opacity: .55; }
.load-legend .sw.full { background: var(--nx-load-full); opacity: .7; }
.load-legend .sw.over { background: var(--nx-load-over); opacity: .6; }
.load-legend .sw.late { background: transparent; border: 1.5px solid var(--nx-load-over); }
.load-legend .sw.planned { background: transparent; border: 1.5px dashed var(--nx-muted); opacity: .7; }
.load-legend .load-pin, .load-item .load-pin { font-size: .75rem; vertical-align: -2px; color: var(--nx-700); }
.load-item.is-late { border-color: color-mix(in srgb, var(--nx-load-over) 55%, transparent); background: color-mix(in srgb, var(--nx-load-over) 7%, var(--nx-surface)); }
.load-item.is-late .load-item-h { color: var(--nx-load-over); }
.load-item.is-hand { border-inline-start: 3px solid var(--nx-700); }
.load-item.is-logged { border-style: dashed; background: transparent; }
.load-item.is-logged[draggable="false"] { cursor: pointer; }
/* A past day the task was planned on, with no time logged: shown faded so last week still shows the plan. */
.load-item.is-planned-past { border-style: dashed; background: transparent; opacity: .6; cursor: pointer; }
.load-item.is-planned-past:hover, .load-item.is-planned-past:focus-visible { opacity: 1; }
.load-item-h.is-edit { border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 0 3px; margin-inline-start: -3px; cursor: pointer; font: inherit; font-size: 0.625rem; font-weight: 640; color: var(--nx-700); display: inline-flex; align-items: center; gap: 2px; }
.load-item-h.is-edit:hover, .load-item-h.is-edit:focus-visible { border-color: var(--nx-ring-strong); background: var(--nx-accent-soft); outline: none; text-decoration: underline; }
.cal-legend { border-top: 0; padding-top: 0; }
.cal-day { position: relative; }
.cal-load { position: absolute; inset-inline: 6px; bottom: 4px; }
.cal-load .nx-load-track { height: 4px; }
.cal-load-h { margin-inline-start: auto; margin-inline-end: 4px; font-size: 0.5938rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--nx-load-ok); }
.cal-load-h.tone-full { color: color-mix(in srgb, var(--nx-load-full) 80%, #000); }
.cal-load-h.tone-over { color: var(--nx-load-over); }
html[data-theme="dark"] .cal-load-h.tone-full { color: var(--nx-load-full); }
.pm-hours-track .is-plan.tone-ok { background: color-mix(in srgb, var(--nx-load-ok) 45%, transparent); }
.pm-hours-track .is-plan.tone-full { background: color-mix(in srgb, var(--nx-load-full) 65%, transparent); }
.pm-hours-track .is-plan.tone-over, .pm-hours-track .is-plan.is-over { background: color-mix(in srgb, var(--nx-load-over) 70%, transparent); }
.pm-legend .is-plan { background: color-mix(in srgb, var(--nx-load-ok) 45%, transparent); } .pm-legend .is-over { background: color-mix(in srgb, var(--nx-load-over) 70%, transparent); }
.pm-cap { color: var(--nx-muted); margin-inline-start: 4px; }
/* Open tasks with no dates, under the Schedule. */
.sched-unsched { margin-top: .75rem; padding: 0; overflow: hidden; }
.sched-unsched-head { width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border: 0; background: transparent; font: inherit; color: var(--nx-ink); cursor: pointer; text-align: start; }
.sched-unsched-head:hover, .sched-unsched-head:focus-visible { background: var(--nx-surface-2); outline: none; }
.sched-unsched-sub { flex: 1 1 260px; font-size: .75rem; color: var(--nx-muted); }
.sched-unsched-chev { margin-inline-start: auto; color: var(--nx-muted); }
.sched-unsched-list { list-style: none; margin: 0; padding: 0 0 .25rem; border-top: 1px solid var(--nx-ring); }
.sched-unsched-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 160px) auto; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 0; border-bottom: 1px solid var(--nx-line, #F2F3F9); background: transparent; font: inherit; font-size: .8125rem; color: var(--nx-ink); text-align: start; cursor: pointer; }
.sched-unsched-row:hover, .sched-unsched-row:focus-visible { background: var(--nx-accent-soft); outline: none; }
.sched-unsched-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.sched-unsched-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-muted); font-size: .75rem; }
.sched-unsched-h { font-size: .75rem; font-weight: 650; color: var(--nx-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sched-unsched-more { margin: .25rem 1rem .75rem; }
/* "Hours on this day": a small card over the page (a bottom sheet on phones). */
.dh-backdrop { position: fixed; inset: 0; background: rgba(15,17,40,.32); z-index: 1300; }
.dh-pop { position: fixed; z-index: 1301; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto; width: min(420px, calc(100vw - 32px)); padding: 1rem 1.125rem; box-shadow: 0 18px 48px rgba(15,17,40,.28); }
.dh-task { font-size: .8125rem; color: var(--nx-ink-2); margin: .25rem 0 .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .75rem; }
.dh-gap { flex: 1; }
@media (max-width: 640px) {
    .cal-load-h { display: none; }
    .sched-unsched-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .sched-unsched-row .project-code, .sched-unsched-who { display: none; }
    .dh-pop { inset: auto 0 0 0; margin: 0; width: auto; border-radius: 16px 16px 0 0; }
}

/* ---- exchange rates (#333) ---- */
.fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.fx-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .35rem; padding: .85rem 1rem; text-align: start; cursor: pointer; border: 1px solid transparent; font: inherit; color: inherit; }
.fx-card.is-on { border-color: var(--nx-accent, #6366F1); }
.fx-card-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fx-card-head span { color: var(--nx-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-card-head .cur-flag { width: 22px; height: 22px; }
.fx-card-rate { font-size: 1.3rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--nx-ink); }
.fx-card-rate small { font-size: .75rem; font-weight: 500; color: var(--nx-muted); }
.fx-card-foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .75rem; color: var(--nx-muted); }
.fx-up { color: #15803D; font-weight: 600; } .fx-down { color: #B42318; font-weight: 600; }
.fx-gain { color: #15803D; } .fx-loss { color: #B42318; }
html[data-theme="dark"] .fx-up, html[data-theme="dark"] .fx-gain { color: #86EFAC; }
html[data-theme="dark"] .fx-down, html[data-theme="dark"] .fx-loss { color: #FCA5A5; }
.fx-empty { padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.fx-form { padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.fx-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.fx-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; }
.fx-rate-input { display: flex; align-items: center; gap: .4rem; }
.fx-rate-input .set-input { flex: 1 1 auto; min-width: 0; text-align: end; font-variant-numeric: tabular-nums; }
.fx-eq { color: var(--nx-muted); white-space: nowrap; font-size: .875rem; }
.fx-base { color: var(--nx-muted); }
.fx-sample { background: var(--nx-surface-3, #F6F7FB); border-radius: 8px; padding: .6rem .8rem; font-size: .8rem; margin: 0; overflow-x: auto; }
.fx-import-result { display: flex; flex-direction: column; gap: .2rem; }
.fx-actions { white-space: nowrap; text-align: end; }
.fx-cur { display: inline-flex; align-items: center; gap: .4rem; }
.fx-cur .cur-flag { width: 20px; height: 20px; }
.fx-note { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; padding: .6rem .9rem; margin-bottom: .75rem; border-radius: 10px;
    background: var(--nx-accent-soft, #EEF0FF); color: var(--nx-800, #2B2F66); border: 1px solid rgba(99,102,241,.22); }
.fx-note .pf-hint { margin-inline-start: auto; }
.fx-auto { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.fx-auto-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fx-auto-status { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .875rem; color: var(--nx-muted); }
.fx-switch { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fx-switch input { width: 18px; height: 18px; accent-color: var(--nx-accent, #6366F1); }
@media (max-width: 760px) {
  .fx-form-grid { grid-template-columns: 1fr; }
  .fx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-auto-head { flex-direction: column; }
  .fx-note .pf-hint { margin-inline-start: 0; }
}
.fx-all { margin: -.5rem 0 1rem; }
.inv-total strong.fx-gain { color: #15803D; } .inv-total strong.fx-loss { color: #B42318; }
html[data-theme="dark"] .inv-total strong.fx-gain { color: #86EFAC; } html[data-theme="dark"] .inv-total strong.fx-loss { color: #FCA5A5; }

/* ---- Activity tracking (#375): the split bar, filters, timeline, screenshots, settings ---- */
.act-split { display: flex; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; background: var(--nx-surface-3); }
.act-split.is-thin { height: 8px; min-width: 90px; }
.act-split i { display: block; height: 100%; }
.act-split i + i { border-inline-start: 1px solid var(--nx-surface); }
.act-prod { --act-c: #16A34A; } .act-neutral { --act-c: #A5B4FC; } .act-unprod { --act-c: #DC2626; } .act-idle { --act-c: #D4D4D8; }
.act-split i { background: var(--act-c); }
.act-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: var(--nx-muted); margin-top: .6rem; }
.act-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; background: var(--act-c); vertical-align: -1px; }
.act-split-nums { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .6rem; font-size: .875rem; color: var(--nx-ink-2); }
.act-split-nums b { color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.act-split-cell { min-width: 110px; }
.act-filters { margin-bottom: .75rem; }
.act-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; }
.act-back { display: inline-block; font-size: .8125rem; margin-bottom: .2rem; }
.act-link { background: none; border: 0; padding: 0; color: var(--nx-accent); font: inherit; font-weight: 600; cursor: pointer; text-align: start; }
.act-link:hover { text-decoration: underline; }
.act-dismissed { opacity: .55; }
.act-under { color: #C2410C; font-weight: 600; }
.act-alert-line { padding: .45rem 0; border-top: 1px solid var(--nx-ring); font-size: .875rem; }
.act-alert-line:first-of-type { border-top: 0; }
.act-timeline { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; }
.act-tl-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .75rem; padding: .35rem .5rem; border-inline-start: 3px solid var(--act-c, #A5B4FC); font-size: .8125rem; }
.act-tl-row + .act-tl-row { margin-top: 2px; }
.act-tl-row.is-productive { --act-c: #16A34A; } .act-tl-row.is-unproductive { --act-c: #DC2626; } .act-tl-row.is-neutral { --act-c: #A5B4FC; }
.act-tl-row.is-idle { --act-c: #D4D4D8; color: var(--nx-muted); }
.act-tl-time { font-variant-numeric: tabular-nums; color: var(--nx-ink-2); }
.act-tl-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-tl-what small { display: block; color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; }
.act-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.act-shot { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; text-decoration: none; color: var(--nx-ink); }
.act-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--nx-r-sm); background: var(--nx-surface-3); }
.act-shot span { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-code-made { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem; margin-bottom: 1rem; border-radius: var(--nx-r); background: var(--nx-accent-soft); border: 1px solid rgba(99,102,241,.22); }
.act-code { display: flex; align-items: center; gap: .5rem; }
.act-code code { font-family: var(--nx-mono); font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; user-select: all; }
.act-assign { min-width: 160px; }
.act-install { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin-top: .9rem; }
.act-steps { margin: .35rem 0 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; color: var(--nx-ink-2); }
/* Commands and addresses are typed as they are, so they stay left to right in Arabic and Urdu too. */
/*rtl:ignore*/
.act-cmd { margin: .35rem 0; padding: .6rem .75rem; border-radius: var(--nx-r-sm); background: var(--nx-surface-3); font-family: var(--nx-mono); font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; user-select: all; }
/*rtl:ignore*/
.act-cmd-inline { font-family: var(--nx-mono); font-size: .8125rem; overflow-wrap: anywhere; direction: ltr; unicode-bidi: embed; user-select: all; }
.act-grid { margin-bottom: .5rem; }
.act-days { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.act-notice { width: 100%; min-height: 140px; resize: vertical; }
.act-save { position: sticky; bottom: 0; padding: .75rem 0; margin-bottom: 1rem; background: linear-gradient(to top, var(--nx-plane) 70%, transparent); z-index: 2; }
.act-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.act-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; background: var(--nx-surface-3); font-size: .8125rem; font-weight: 600; }
.act-chip small { font-weight: 500; color: var(--nx-muted); }
.act-chip button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--nx-muted); padding: 0 .1rem; }
.act-chip button:hover { color: #B42318; }
.pm-card .pf-check + .pf-check, .pm-card .pf-check { margin-bottom: .5rem; }
html[data-theme="dark"] .act-neutral, html[data-theme="dark"] .act-tl-row.is-neutral { --act-c: #6366F1; }
html[data-theme="dark"] .act-idle, html[data-theme="dark"] .act-tl-row.is-idle { --act-c: #52525B; }
html[data-theme="dark"] .act-under { color: #FDBA74; }
html[data-theme="dark"] .act-code-made { background: rgba(99,102,241,.12); }
@media (max-width: 760px) {
  .act-tl-row { grid-template-columns: 82px minmax(0, 1fr); }
  .act-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act-code code { font-size: 1rem; }
  .act-assign { min-width: 120px; }
  .act-install { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Task types (#377): the type badge, its picker on the task, and the settings page ---- */
.tt-type { display: inline-flex; align-items: center; gap: 4px; color: var(--tt-type, var(--nx-accent)); font-size: 0.8125rem; font-weight: 560; white-space: nowrap; vertical-align: middle; }
.tt-type .mud-icon-root { font-size: 1.05rem; }
.tt-type-name { color: var(--nx-ink); }
.tt-type.is-icon { margin-inline-end: 4px; }
.task-chip-type { display: inline-flex; align-items: center; gap: 4px; background: var(--tt-type, var(--nx-accent)); }
.task-chip-type .mud-icon-root { font-size: 0.95rem; }
.task-type-pick { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: var(--nx-r-xs); background: var(--tt-type, var(--nx-accent)); color: #fff; }
.task-type-pick .mud-icon-root { font-size: 0.95rem; }
.task-type-pick select { appearance: auto; border: 0; background: transparent; color: #fff; font: inherit; font-size: 0.6875rem; font-weight: 620; padding: 2px 2px; cursor: pointer; }
.task-type-pick select option { color: var(--nx-ink); background: var(--nx-surface); }
.tt-icon-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface); color: var(--nx-ink-2); cursor: pointer; }
.tt-icon-btn.is-on { border-color: var(--nx-accent); color: var(--nx-accent); box-shadow: 0 0 0 2px var(--nx-accent-soft); }
.tt-status-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }

/* ---- Table view of tasks (#377): a spreadsheet with a sticky heading and first column ---- */
.tt-surface { padding: 0; overflow: visible; }
.tt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--nx-ring); }
.tt-tools .spacer { flex: 1 1 auto; }
.tt-count { color: var(--nx-muted); font-size: 0.8125rem; }
.tt-colmenu { min-width: 280px; max-height: 60vh; overflow: auto; }
.tt-colrow { display: flex; align-items: center; gap: 2px; }
.tt-colrow .tb-colrow { flex: 1 1 auto; }
.tt-move { border: 0; background: transparent; color: var(--nx-ink-2); cursor: pointer; padding: 2px; border-radius: var(--nx-r-xs); }
.tt-move:hover { background: var(--nx-soft, #F4F4F6); }
.tt-bulk-select { appearance: auto; font: inherit; }
.tt-bulk-due { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--nx-ink-2); }
.tt-bulk-due input { font: inherit; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-xs); padding: 2px 6px; background: var(--nx-surface); color: var(--nx-ink); }
.tt-wrap { overflow: auto; max-height: calc(100vh - 260px); min-height: 160px; }
.tt-grid { width: max-content; min-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 0.8594rem; }
.tt-grid thead th {
    position: sticky; top: 0; z-index: 3; background: var(--nx-surface-2, #F6F7FB); text-align: start;
    font-size: 0.6563rem; font-weight: 650; letter-spacing: 0.055em; text-transform: uppercase; color: var(--nx-ink-2);
    padding: 0; border-bottom: 1px solid var(--nx-ring); border-inline-end: 1px solid var(--nx-line, #F2F3F9); white-space: nowrap; user-select: none;
}
.tt-grid thead th[draggable="true"] { cursor: grab; }
.tt-sort { display: flex; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; padding: 0.625rem 0.75rem; border: 0; background: transparent; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: start; overflow: hidden; text-overflow: ellipsis; }
.tt-sort .mud-icon-root { font-size: 0.9rem; }
.tt-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 4; touch-action: none; }
.tt-resize:hover { background: var(--nx-accent-soft); }
.tt-grid td { padding: 0.4375rem 0.75rem; border-bottom: 1px solid var(--nx-line, #F2F3F9); border-inline-end: 1px solid var(--nx-line, #F2F3F9); vertical-align: middle; background: var(--nx-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-grid td:focus { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.tt-grid td.is-edit { cursor: text; }
.tt-grid td.is-edit:hover { background: var(--nx-soft, #FAFAFC); }
.tt-grid td.is-calc { color: var(--nx-ink-2); font-style: italic; }
.tt-grid td.is-error { color: var(--nx-critical); }
.tt-grid td.is-late { color: var(--nx-critical); font-weight: 560; }
.tt-grid tr.is-picked td { background: var(--nx-accent-soft); }
.tt-grid .tt-num { text-align: end; font-variant-numeric: tabular-nums; }
.tt-grid .tt-check { width: 38px; text-align: center; padding-inline: 0; }
.tt-grid .tt-check input { accent-color: var(--nx-accent); cursor: pointer; }
.tt-grid .tt-sticky { position: sticky; inset-inline-start: 0; z-index: 1; }
.tt-grid .tt-sticky-2 { inset-inline-start: 38px; box-shadow: inset -1px 0 0 var(--nx-ring); }
.tt-grid thead .tt-sticky { z-index: 5; }
.tt-title-wrap { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tt-open { display: block; max-width: 100%; border: 0; background: transparent; padding: 0; font: inherit; font-weight: 560; color: var(--nx-ink); cursor: pointer; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-open:hover { color: var(--nx-accent); text-decoration: underline; }
.tt-parent { color: var(--nx-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
.tt-grid .tb-inline { width: 100%; min-width: 0; }
.tt-grid tr.tt-group td { background: var(--nx-soft, #F4F4F6); font-weight: 600; text-align: start; }
.tt-group-label { display: inline-flex; max-width: 100%; overflow: hidden; }
.tt-grid tr.tt-subtotal td, .tt-grid tfoot td { background: var(--nx-surface-2, #F6F7FB); color: var(--nx-ink-2); font-size: 0.8125rem; }
.tt-grid tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid var(--nx-ring); }
.tt-grid tfoot td.tt-sticky { z-index: 4; }
.tt-agg { font: inherit; font-size: 0.75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-xs); background: var(--nx-surface); color: var(--nx-ink-2); padding: 1px 2px; margin-inline-end: 6px; }
.tt-agg-val { font-weight: 600; color: var(--nx-ink); }
.tt-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tt-none { text-align: center; color: var(--nx-muted); padding: 24px !important; white-space: normal !important; }
.tt-na { display: block; height: 1em; background: repeating-linear-gradient(135deg, transparent 0 4px, var(--nx-line, #EEF0F6) 4px 5px); opacity: .7; }
.tt-err { display: inline-flex; align-items: center; gap: 3px; color: var(--nx-critical); font-style: normal; }
.tt-hint { padding: 8px 12px; }
.tt-cards { display: none; }
@media (max-width: 700px) {
    .tt-wrap, .tt-hint { display: none; }
    .tt-cards { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
    .tt-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; text-align: start; width: 100%; padding: 12px; border: 1px solid var(--nx-ring); border-radius: var(--nx-r); background: var(--nx-surface); color: var(--nx-ink); font: inherit; cursor: pointer; }
    .tt-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
    .tt-card-meta { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.8125rem; color: var(--nx-ink-2); }
    .tt-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 0.8125rem; }
    .tt-card-field small { display: block; color: var(--nx-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .04em; }
    .tt-card-group { font-weight: 650; margin-top: 6px; }
    .tt-tools { padding: 8px; }
}

/* ---- Formula and roll-up fields (#377) ---- */
.cf-calc { display: inline-block; margin-inline-start: 4px; font-style: italic; font-weight: 700; color: var(--nx-accent); }
.cf-calc-value { font-variant-numeric: tabular-nums; }
.lay-formula { font-family: var(--nx-mono); font-size: 0.8125rem; }
.lay-formula-ok { color: var(--nx-good); font-size: 0.8125rem; margin-top: 4px; }
.lay-formula-help { margin-top: 6px; font-size: 0.8125rem; }
.lay-formula-help summary { cursor: pointer; color: var(--nx-accent); }
.lay-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.lay-chip { border: 1px solid var(--nx-ring); border-radius: 999px; background: var(--nx-surface); color: var(--nx-ink-2); font-family: var(--nx-mono); font-size: 0.75rem; padding: 2px 8px; cursor: pointer; }
.lay-chip.is-custom { border-color: var(--nx-accent); color: var(--nx-accent); }
.lay-fn { margin: 6px 0 0; padding-inline-start: 18px; color: var(--nx-ink-2); }
.lay-fn code { font-family: var(--nx-mono); color: var(--nx-ink); margin-inline-end: 4px; }

/* ---- Task forms, share links and email to task (#377, part 2) ---- */
/* Shared filter row of the list pages (task forms, share links). */
.tf-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .875rem; align-items: center; }
.tf-filters .set-input { width: auto; flex: 1 1 180px; max-width: 320px; }
.tf-tabs { margin-bottom: .75rem; }
.tf-cols { align-items: start; }
.tf-q { border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm, 10px); padding: .75rem; margin-bottom: .75rem; background: var(--nx-surface-2); }
.tf-q-head { display: flex; align-items: center; gap: .375rem; margin-bottom: .5rem; }
.tf-q-head .set-input { max-width: none; flex: 1 1 auto; }
.tf-q-num { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--nx-accent-soft); color: var(--nx-accent); font-size: .75rem; font-weight: 600; }
.tf-q-req { margin-top: 1.4rem; }
.tf-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .125rem .75rem; max-height: 220px; overflow-y: auto; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-xs); padding: .5rem; }
.tf-preview-title { font-weight: 650; font-size: 1.05rem; margin-bottom: .375rem; }
.tf-preview-q { border-bottom: 1px dashed var(--nx-ring); padding: .375rem 0; font-size: .8125rem; }
.tf-preview-btn { display: inline-block; margin-top: .75rem; color: #fff; border-radius: 8px; padding: .4rem .9rem; font-size: .8125rem; font-weight: 600; }
.tf-answer { border-bottom: 1px solid var(--nx-ring); padding: .75rem 0; }
.tf-answer:last-child { border-bottom: 0; }
.tf-answer-head { font-size: .8438rem; }
.tf-answer-task { margin-inline-start: .5rem; }
.tf-answer-list { margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .375rem 1rem; }
.tf-answer-list dt { font-size: .7188rem; color: var(--nx-muted); }
.tf-answer-list dd { margin: 0; font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The public form pages (own address, portal, share link). */
.tf-card .pt-btn { background: var(--nx-accent, #4338CA); }
.tf-intro { white-space: pre-wrap; margin-top: 0; }
.tf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.tf-note { margin-top: .75rem; }
.pt-req-intro { display: block; color: #4A5069; font-weight: 400; }
/* Share link panel and list. */
.sl-made { border: 1px solid var(--nx-accent-soft-2, #C7D2FE); background: var(--nx-accent-soft, #EEF0FF); border-radius: 10px; padding: .875rem; margin-bottom: 1rem; }
.sl-copy { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.sl-copy .set-input { max-width: none; }
.sl-row { border-bottom: 1px solid var(--nx-ring); padding: .625rem 0; }
.sl-row:last-child { border-bottom: 0; }
.sl-row-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sl-row-actions { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-top: .25rem; }
.sl-visits { margin: .375rem 0 0; padding-inline-start: 1.1rem; font-size: .7813rem; color: var(--nx-ink-2); }
/* Email to task. */
.et-row { border-top: 1px solid var(--nx-ring); padding: .75rem 0; }
.et-row-head { margin-bottom: .375rem; }
.et-summary .pf-hint { margin-bottom: .375rem; }
.et-editor { border: 1px solid var(--nx-ring); border-radius: 10px; padding: .75rem; margin-top: .5rem; background: var(--nx-surface-2); }
.et-mail { border-bottom: 1px solid var(--nx-ring); padding: .5rem 0; font-size: .8125rem; }
.et-mail:last-child { border-bottom: 0; }
.et-how { margin: 0; padding-inline-start: 1.1rem; font-size: .8125rem; color: var(--nx-ink-2); }
.et-how li { margin-bottom: .375rem; }
/* Where a task came from (task page). */
.tp-origin-body { display: flex; gap: .625rem; align-items: flex-start; font-size: .8438rem; }
.tp-origin-reply .pt-linkbtn { color: var(--nx-accent); text-decoration: underline; overflow-wrap: anywhere; font-family: var(--nx-mono); font-size: .75rem; opacity: 1; }
/* The shared (read-only) pages. */
.pt-main:has(.sv-board), .pt-main:has(.sv-table-wrap), .pt-main:has(.pr-wrap) { max-width: 1180px; }
.sv-head { margin-bottom: .75rem; }
.sv-tabs { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .875rem; }
.sv-tabs a { padding: .4rem .9rem; border-radius: 999px; border: 1px solid #CDD1E0; text-decoration: none; color: inherit; font-size: .875rem; background: #fff; }
.sv-tabs a.is-on { background: #4338CA; border-color: #4338CA; color: #fff; }
.sv-stats { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; }
.sv-stats .pt-card b { display: block; font-size: 1.8rem; } .sv-stats small { color: #4A5069; }
.sv-late { color: #B42318; }
.sv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }
.sv-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.sv-col { flex: 0 0 260px; background: #EBEDF5; border-radius: 12px; padding: 8px; border-top: 3px solid var(--sv-col, #64748B); }
.sv-col header { display: flex; justify-content: space-between; font-weight: 600; font-size: .875rem; padding: 4px 4px 8px; }
.sv-card { background: #fff; border: 1px solid #E4E6F0; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.sv-card-title { font-weight: 600; font-size: .875rem; overflow-wrap: anywhere; }
.sv-card-desc { margin: 4px 0 0; font-size: .78rem; color: #4A5069; }
.sv-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .75rem; color: #4A5069; margin-top: 6px; }
.sv-empty { color: #667085; font-size: .8125rem; padding: 6px; }
.sv-pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--sv-col, #64748B) 16%, transparent); color: var(--sv-col, #64748B); white-space: nowrap; }
.sv-type { font-size: .75rem; color: var(--sv-col); font-weight: 600; }
.sv-row-main { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.sv-row-title { overflow-wrap: anywhere; }
.sv-row-desc { display: block; width: 100%; color: #4A5069; }
.sv-row.is-done .sv-row-title { text-decoration: line-through; opacity: .7; }
.sv-sub { padding-inline-start: 22px; }
.sv-table-wrap { overflow-x: auto; padding: 0; }
.sv-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.sv-table th, .sv-table td { padding: 8px 10px; border-bottom: 1px solid #F2F3F9; text-align: start; vertical-align: top; }
.sv-table th { background: #F7F8FC; font-weight: 600; white-space: nowrap; }
.sv-table .w-num { text-align: end; font-variant-numeric: tabular-nums; }
.sv-table tfoot td { font-weight: 600; }
.sv-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .8125rem; color: #4A5069; }
.sv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.sv-facts dt { font-size: .72rem; color: #667085; } .sv-facts dd { margin: 0; font-weight: 600; }
.sv-rich { line-height: 1.55; overflow-wrap: anywhere; }
.sv-rich img { max-width: 100%; height: auto; }
.sv-rich pre { overflow-x: auto; background: #F2F3F9; padding: 10px; border-radius: 8px; }
.sv-comment { border-top: 1px solid #F2F3F9; padding: 8px 0; }
.sv-desc { white-space: pre-wrap; }
.sv-lock { max-width: 420px; margin: 40px auto; }
@media (max-width: 640px) {
    .tf-pair { grid-template-columns: 1fr; }
    .sv-stats { grid-template-columns: 1fr 1fr; }
    .sv-stats .pt-card:first-child { grid-column: 1 / -1; }
    .sv-col { flex-basis: 78vw; }
    .sl-copy { flex-wrap: wrap; }
    .tf-filters .set-input { max-width: none; flex-basis: 100%; }
}
/* The portal and shared pages in dark mode (for people who chose it): same layout, dark surfaces. */
html[data-theme="dark"] .pt-page { background: var(--nx-bg, #12142A); color: var(--nx-ink); }
html[data-theme="dark"] .pt-card, html[data-theme="dark"] .sv-card, html[data-theme="dark"] .sv-tabs a { background: var(--nx-surface); border-color: var(--nx-ring); color: var(--nx-ink); }
html[data-theme="dark"] .sv-tabs a.is-on { background: #4F46E5; border-color: #4F46E5; color: #fff; }
html[data-theme="dark"] .sv-col, html[data-theme="dark"] .sv-table th, html[data-theme="dark"] .sv-rich pre { background: var(--nx-surface-2); }
html[data-theme="dark"] .sv-table th, html[data-theme="dark"] .sv-table td, html[data-theme="dark"] .sv-comment { border-color: var(--nx-ring); }
html[data-theme="dark"] .pt-field input, html[data-theme="dark"] .pt-field select, html[data-theme="dark"] .pt-field textarea { background: var(--nx-surface-2); border-color: var(--nx-ring-strong, #3A3F63); color: var(--nx-ink); }
html[data-theme="dark"] .pt-help, html[data-theme="dark"] .pt-asof, html[data-theme="dark"] .pt-row small, html[data-theme="dark"] .sv-card-meta, html[data-theme="dark"] .sv-card-desc, html[data-theme="dark"] .sv-row-desc,
html[data-theme="dark"] .sv-stats small, html[data-theme="dark"] .sv-meta, html[data-theme="dark"] .pt-req-intro, html[data-theme="dark"] .pt-stage { color: var(--nx-muted); }
html[data-theme="dark"] .sv-late { color: #FCA5A5; }
html[data-theme="dark"] .pt-err { background: var(--nx-bad-soft); border-color: transparent; color: #FCA5A5; }
html[data-theme="dark"] .sl-made { background: var(--nx-accent-soft); border-color: var(--nx-accent-soft-2); }

/* ---- Co-editing wiki pages (#377, K10): who is editing, and the others' cursors in the text ---- */
.co-people { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.co-avatar { --co: #6366F1; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--co); color: #fff; font-size: .7rem; font-weight: 700; box-shadow: 0 0 0 2px var(--nx-surface); }
.co-label { font-size: .8rem; color: var(--nx-muted); margin-inline-start: 4px; }
.co-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--nx-r); background: var(--nx-accent-soft); color: var(--nx-ink); }
.nx-rich.is-shared { position: relative; }
.nx-co-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.nx-co-caret { position: absolute; width: 0; border-inline-start: 2px solid; }
.nx-co-name { position: absolute; top: -17px; inset-inline-start: -2px; white-space: nowrap; color: #fff; font-size: 10.5px; font-weight: 600; line-height: 15px; padding: 0 5px; border-radius: 4px 4px 4px 0; }
.nx-co-sel { position: absolute; opacity: .18; border-radius: 2px; }
.wk-together { margin-top: 2px; }

/* ---- Proofing (#377, K12) ---- */
.pf-state { display: inline-flex; align-items: center; gap: 3px; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; white-space: nowrap; background: #E0E7FF; color: #3730A3; }
.pf-state .mud-icon-root { font-size: 14px; }
.pf-state.is-approved { background: #DCFCE7; color: #166534; }
.pf-state.is-changesneeded { background: #FEF3C7; color: #92400E; }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.pf-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 1px solid var(--nx-ring); cursor: pointer; text-align: start; font: inherit; color: var(--nx-ink); }
.pf-stat b { font-size: 1.5rem; line-height: 1.1; }
.pf-stat small { color: var(--nx-muted); }
.pf-stat.is-on { box-shadow: 0 0 0 2px var(--nx-accent); }
.pf-stat.pf-k-wait b { color: var(--nx-accent); } .pf-stat.pf-k-changes b { color: #B45309; } .pf-stat.pf-k-approved b { color: #15803D; }
.pf-reply b { margin-inline-end: 6px; }
.pf-name { display: inline-flex; align-items: center; gap: 6px; }
.pf-wait-pill { background: #EDE9FE; color: #5B21B6; margin-inline-start: 6px; }
.pf-late { color: var(--nx-critical); font-weight: 600; }
.pf-head { padding: 16px; margin-bottom: 14px; }
.pf-head-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-head-text { flex: 1 1 260px; min-width: 0; }
.pf-head-text h1 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.pf-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; margin-top: 4px; }
.pf-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pf-version-pick { max-width: 260px; }
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.pf-main { padding: 12px; min-width: 0; }
.pf-side { padding: 12px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.pf-tabs { margin-bottom: 10px; }
.pf-dot { background: #F59E0B !important; color: #fff !important; }
.pf-viewer-box { position: relative; min-height: 200px; direction: ltr; }   /* the file is a picture: pins sit where they were put, in every language */
.pf-viewer { display: block; }
.pf-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pf-media { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.pf-img { max-width: 100%; max-height: 78vh; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.pf-video-wrap { width: 100%; }
.pf-video { width: 100%; max-height: 72vh; display: block; background: #000; }
.pf-video-wrap .pf-layer { bottom: 52px; }
.pf-layer { position: absolute; inset: 0; touch-action: none; }
.pf-layer.can-pin { cursor: crosshair; }
/*rtl:ignore*/
.pf-pin { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50% 50% 50% 0; border: 2px solid #fff; background: #E11D48; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); padding: 0; line-height: 1; }
/*rtl:ignore*/
.pf-pin.has-box { transform: none; border-radius: 4px; background: rgba(225, 29, 72, .12); border: 2px solid #E11D48; box-shadow: none; display: block; }
/*rtl:ignore*/
.pf-pin.has-box .pf-pin-n { position: absolute; top: -12px; inset-inline-start: -12px; width: 24px; height: 24px; border-radius: 50%; background: #E11D48; color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.pf-pin.is-resolved { background: #64748B; opacity: .75; }
.pf-pin.has-box.is-resolved { background: rgba(100,116,139,.12); border-color: #64748B; }
.pf-pin.has-box.is-resolved .pf-pin-n { background: #64748B; }
.pf-pin.is-on { box-shadow: 0 0 0 4px rgba(225,29,72,.35), 0 2px 6px rgba(0,0,0,.35); z-index: 2; }
/*rtl:ignore*/
.pf-draft { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--nx-accent); color: #fff; display: grid; place-items: center; font-weight: 700; border: 2px solid #fff; pointer-events: none; }
.pf-draft.has-box { transform: none; border-radius: 4px; background: rgba(67,56,202,.12); border: 2px dashed var(--nx-accent); }
.pf-drag { position: absolute; border: 2px dashed var(--nx-accent); background: rgba(67,56,202,.10); pointer-events: none; }
.pf-timeline { position: relative; width: 100%; height: 26px; border-radius: 6px; background: var(--nx-soft, #F1F2F7); }
/*rtl:ignore*/
.pf-tick { position: absolute; top: 3px; transform: translateX(-50%); min-width: 20px; height: 20px; border-radius: 10px; border: 0; background: #E11D48; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0 4px; }
.pf-tick.is-resolved { background: #64748B; }
.pf-tick.is-on { box-shadow: 0 0 0 3px rgba(225,29,72,.35); }
.pf-wait { padding: 40px; color: var(--nx-muted); line-height: 1.4; }
.pf-viewer .sg-page { max-width: none; }
.pf-howto { margin: 8px 0 0; text-align: center; }
.pf-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pf-compare-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-compare-label { display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: 38px; }
.pf-composer { border: 1px solid var(--nx-accent); border-radius: var(--nx-r); padding: 10px; margin-bottom: 10px; background: var(--nx-surface); }
.pf-composer-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.pf-composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pf-composer-actions .spacer { flex: 1; }
.pf-filter { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.pf-chip { border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); color: var(--nx-ink); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: .8rem; cursor: pointer; }
.pf-chip.is-on { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.pf-pin-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: #E11D48; color: #fff; font-size: 11px; font-weight: 700; padding: 0 5px; }
.pf-pin-badge.is-new { background: var(--nx-accent); }
.pf-comment { border: 1px solid var(--nx-ring); border-radius: var(--nx-r); padding: 10px; margin-bottom: 8px; cursor: pointer; background: var(--nx-surface); }
.pf-comment.is-on { border-color: #E11D48; box-shadow: 0 0 0 1px #E11D48; }
.pf-comment.is-resolved { opacity: .8; }
.pf-comment.is-resolved .pf-pin-badge { background: #64748B; }
.pf-comment.is-flash, .pr-comment.is-flash { animation: pf-flash 1.4s ease-out; }
@keyframes pf-flash { 0% { background: #FFE4E6; } 100% { background: transparent; } }
.pf-comment header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .85rem; }
.pf-comment header .nx-avatar, .pf-reply .nx-avatar { width: 22px; height: 22px; font-size: 10px; }
.pf-body { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-ext { background: #E0F2FE; color: #075985; }
.pf-resolved, .pf-task { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--nx-muted); margin-top: 6px; }
.pf-reply { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding-inline-start: 12px; border-inline-start: 2px solid var(--nx-ring); font-size: .9rem; }
.pf-reply > div { flex: 1; min-width: 0; }
.pf-comment-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: .82rem; }
.pf-danger { color: var(--nx-critical) !important; }
.pf-reply-box { margin-top: 8px; cursor: default; }
.pf-approver { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--nx-ring); }
.pf-approver-name { flex: 1; }
.pf-decide { margin-top: 12px; padding: 10px; border-radius: var(--nx-r); background: var(--nx-soft, #F6F7FB); }
.pf-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: .85rem; }
.pf-versions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-versions li { border: 1px solid var(--nx-ring); border-radius: var(--nx-r); padding: 10px; font-size: .88rem; }
.pf-versions li.is-on { border-color: var(--nx-accent); }
.pf-version-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-approver-list { max-height: 210px; overflow: auto; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); padding: 6px 8px; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.pf-approver-list .nx-avatar { width: 22px; height: 22px; font-size: 10px; }
.pf-task-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.pf-task-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-task-start { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-task-start select { flex: 1 1 200px; }
.pf-doc-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .78rem; color: var(--nx-ink-2, #4B5563); text-decoration: none; }
.pf-file { margin-top: 6px; }
/* The customer portal and share links */
.pr-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pr-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-versions { display: flex; gap: 6px; }
.pr-versions a { border: 1px solid #D0D5DD; border-radius: 999px; padding: 2px 10px; text-decoration: none; color: inherit; font-size: .85rem; }
.pr-versions a.is-on { background: #4338CA; border-color: #4338CA; color: #fff; }
.pr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.pr-file { min-width: 0; }
.pr-side { min-width: 0; }
.pr-comment { padding: 8px 0; border-top: 1px solid #E4E6F0; }
.pr-comment.is-resolved { opacity: .75; }
.pr-reply { margin: 6px 0 0; padding-inline-start: 12px; border-inline-start: 2px solid #E4E6F0; font-size: .9rem; }
.pr-reply-box summary { cursor: pointer; font-size: .85rem; color: #4338CA; margin-top: 6px; }
.pr-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-btn-changes { background: #B45309 !important; }
.pr-btn-approve { background: #15803D !important; }
.pr-done { color: #15803D; }
@media (max-width: 1100px) {
    .pf-layout, .pr-layout { grid-template-columns: minmax(0, 1fr); }
    .pf-side { position: static; max-height: none; }
}
@media (max-width: 700px) {
    .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-compare { grid-template-columns: minmax(0, 1fr); }
    .pf-version-pick { max-width: none; flex: 1 1 100%; }
}
html[data-theme="dark"] .pf-state { background: #312E81; color: #C7D2FE; }
html[data-theme="dark"] .pf-state.is-approved { background: #14532D; color: #BBF7D0; }
html[data-theme="dark"] .pf-state.is-changesneeded { background: #78350F; color: #FDE68A; }
html[data-theme="dark"] .pf-wait-pill { background: #4C1D95; color: #DDD6FE; }
html[data-theme="dark"] .pf-ext { background: #0C4A6E; color: #BAE6FD; }
html[data-theme="dark"] .pf-timeline, html[data-theme="dark"] .pf-decide { background: var(--nx-surface-2); }
html[data-theme="dark"] .co-banner { background: var(--nx-surface-2); }

/* ---- Screen recordings (#482): the recorder panel, the Record button, the recordings of a record, the player ---- */
.rc-record-btn { display: inline-flex; align-items: center; gap: 4px; font: inherit; cursor: pointer; }
.rc-record-btn:not(.cm-link):not(.rc-icon-btn) { min-height: 32px; padding: 0 12px; border: 1px solid var(--nx-ring-strong); border-radius: 999px; background: var(--nx-surface); color: var(--nx-ink); font-size: .8125rem; font-weight: 600; }
.rc-record-btn:not(.cm-link):not(.rc-icon-btn):hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.rc-record-btn.cm-link { display: inline-flex; }
.rc-record-btn.rc-record-main { min-height: 36px; background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.rc-record-btn.rc-record-main:hover { background: var(--nx-700); color: #fff; }
.rc-icon-btn { width: 30px; height: 30px; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--nx-muted); vertical-align: middle; }
.rc-icon-btn:hover { background: var(--nx-surface-3); color: var(--nx-accent); }
.rc-record-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.rc-pill { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; }

.rc-rec .rc-unsupported, .rc-rec .rc-setup, .rc-rec .rc-stage, .rc-rec .rc-controls, .rc-rec .rc-review, .rc-rec .rc-phone-note, .rc-rec .rc-asking, .rc-rec .rc-count { display: none; }
.rc-rec[data-state="unsupported"] .rc-unsupported { display: flex; }
.rc-rec[data-state="idle"] .rc-setup, .rc-rec:not([data-state]) .rc-setup { display: block; }
.rc-rec.no-screen .rc-phone-note { display: block; }
.rc-rec.no-screen .rc-sound-opt, .rc-rec.no-screen .rc-bubble-opt { display: none; }
.rc-rec[data-state="asking"] .rc-stage, .rc-rec[data-state="countdown"] .rc-stage, .rc-rec[data-state="recording"] .rc-stage, .rc-rec[data-state="paused"] .rc-stage, .rc-rec[data-state="stopping"] .rc-stage { display: block; }
.rc-rec[data-state="asking"] .rc-asking { display: flex; }
.rc-rec[data-state="countdown"] .rc-count { display: flex; }
.rc-rec[data-state="countdown"] .rc-controls, .rc-rec[data-state="recording"] .rc-controls, .rc-rec[data-state="paused"] .rc-controls { display: flex; }
.rc-rec[data-state="countdown"] .rc-pause { display: none; }
.rc-rec[data-state="preview"] .rc-review, .rc-rec[data-state="uploading"] .rc-review, .rc-rec[data-state="saved"] .rc-review { display: block; }
.rc-unsupported { gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border: 1px solid var(--nx-ring); border-radius: 12px; background: var(--nx-surface-2); color: var(--nx-ink); }
.rc-unsupported p { margin: 0; font-size: .875rem; }
.rc-start { display: inline-flex; align-items: center; gap: 6px; margin-top: .25rem; }
.rc-start .mud-icon-root { color: #F87171; }
.rc-msg { margin: .75rem 0; padding: .625rem .875rem; border-radius: 10px; background: var(--nx-surface-2); border: 1px solid var(--nx-ring); font-size: .8438rem; color: var(--nx-ink); }
.rc-stage { position: relative; margin-top: .25rem; border-radius: 12px; overflow: hidden; background: #0B0D1A; aspect-ratio: 16 / 9; }
.rc-stage video, .rc-review video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0B0D1A; }
.rc-review video { border-radius: 12px; aspect-ratio: 16 / 9; height: auto; margin-bottom: .5rem; }
.rc-count, .rc-asking { position: absolute; inset: 0; align-items: center; justify-content: center; color: #fff; background: rgba(11, 13, 26, .55); text-align: center; padding: 1rem; }
.rc-count { font-size: 4.5rem; font-weight: 700; }
.rc-asking { font-size: .9375rem; }
.rc-controls { align-items: center; gap: .625rem; flex-wrap: wrap; margin-top: .75rem; }
.rc-dot { width: 10px; height: 10px; border-radius: 50%; background: #EF4444; flex: 0 0 auto; }
.rc-rec[data-state="recording"] .rc-dot { animation: rc-blink 1.2s ease-in-out infinite; }
.rc-rec[data-state="paused"] .rc-dot { background: var(--nx-muted); }
@keyframes rc-blink { 50% { opacity: .25; } }
html[data-motion="reduce"] .rc-rec .rc-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .rc-rec .rc-dot { animation: none; } }
.rc-time { font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--nx-muted); }
.rc-time b { color: var(--nx-ink); }
.rc-meter { position: relative; flex: 1 1 80px; min-width: 60px; height: 6px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; }
.rc-meter > span { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--nx-accent); border-radius: inherit; }
.rc-when-paused { display: none; }
.rc-rec[data-state="paused"] .rc-when-paused { display: inline; }
.rc-rec[data-state="paused"] .rc-when-rec { display: none; }
.rc-upload { display: flex; align-items: center; gap: .625rem; margin: .5rem 0; font-size: .8125rem; color: var(--nx-muted); }
.rc-done { display: flex; gap: .75rem; align-items: center; padding: .875rem 1rem; border: 1px solid var(--nx-ring); border-radius: 12px; background: var(--nx-surface-2); margin-bottom: 1rem; }
.rc-panel .set-actions .nx-btn { display: inline-flex; align-items: center; text-decoration: none; }

.rc-card { min-width: 0; }
.rc-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.rc-card-head .tp-card-head { margin-bottom: 0; }
.rc-card-head .rc-h2 { font-size: .9688rem; font-weight: 650; letter-spacing: -.01em; }
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.rc-item { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border: 1px solid var(--nx-ring); border-radius: 10px; text-decoration: none; color: var(--nx-ink); min-width: 0; }
.rc-item:hover { border-color: var(--nx-accent); background: var(--nx-surface-2); }
.rc-play { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nx-accent); color: #fff; flex: 0 0 auto; }
.rc-item-main { display: flex; flex-direction: column; min-width: 0; }
.rc-item-main b { font-weight: 600; font-size: .8438rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-item-main small { color: var(--nx-muted); font-size: .75rem; }
.nx-card.rc-card { padding: 1rem 1.125rem; margin-bottom: 1rem; }

.rc-page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
.rc-player-card { padding: .75rem; }
.rc-player video { display: block; width: 100%; max-height: 70vh; border-radius: 10px; background: #0B0D1A; aspect-ratio: 16 / 9; }
.rc-player-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .625rem; font-size: .8125rem; color: var(--nx-muted); }
.rc-player-bar .rc-speed { width: auto; max-width: 110px; padding: .3rem .5rem; }
.rc-player-bar .nx-btn { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; text-decoration: none; }
.rc-info { padding: 1rem 1.125rem; }
.rc-title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.rc-desc { white-space: pre-wrap; margin: 0 0 .75rem; color: var(--nx-ink-2); overflow-wrap: anywhere; }
.rc-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .375rem .75rem; margin: .75rem 0; font-size: .8438rem; }
.rc-facts dt { color: var(--nx-muted); }
.rc-facts dd { margin: 0; overflow-wrap: anywhere; }
.rc-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.rc-settings { margin-top: 1rem; }
.rc-name { display: inline-flex; align-items: center; gap: 4px; }
.rc-shared .rc-player video { max-height: 75vh; }
@media (max-width: 900px) {
    .rc-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .rc-count { font-size: 3rem; }
    .rc-player-bar .nx-btn { margin-inline-start: 0; }
    .rc-controls .nx-btn { flex: 1 1 auto; }
}
html[data-theme="dark"] .rc-stage, html[data-theme="dark"] .rc-player video { background: #05060D; }
html[data-theme="dark"] .rc-record-btn.rc-record-main { color: #fff; }
html[data-theme="dark"] .pr-comment, html[data-theme="dark"] .pr-reply { border-color: var(--nx-ring); }
html[data-theme="dark"] .pr-versions a { border-color: var(--nx-ring-strong); }
html[data-theme="dark"] .pf-doc-chip { color: var(--nx-ink-2); }
@keyframes pf-flash-dark { 0% { background: #4C1D2B; } 100% { background: transparent; } }
html[data-theme="dark"] .pf-comment.is-flash, html[data-theme="dark"] .pr-comment.is-flash { animation-name: pf-flash-dark; }
/* =============================================================================
   Guided first-day set-up (#385 G6): the Guide button, the tours, the tips, the set-up wizard, the sample data
   ============================================================================= */
.gd { margin-right: .25rem; }
.gd-count { background: var(--nx-accent); }
.gd-pop { width: min(380px, 94vw); }
.gd-body { padding: .75rem 1rem 1rem; display: flex; flex-direction: column; gap: .625rem; max-height: 70vh; overflow-y: auto; }
.gd-setup, .gd-row {
    display: flex; align-items: flex-start; gap: .625rem; width: 100%; text-align: start; font: inherit; cursor: pointer;
    padding: .625rem .75rem; border-radius: var(--nx-r-sm); border: 1px solid var(--nx-ring); background: var(--nx-surface); color: var(--nx-ink); text-decoration: none;
}
.gd-setup { background: var(--nx-accent-soft); border-color: rgba(99,102,241,.25); }
.gd-setup:hover, .gd-row:hover { border-color: var(--nx-accent); }
.gd-setup .mud-icon-root, .gd-row .mud-icon-root { color: var(--nx-accent); flex: 0 0 auto; margin-top: 1px; }
.gd-setup span, .gd-row span { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; }
.gd-setup small, .gd-row small { color: var(--nx-muted); font-size: .75rem; }
.gd-list-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; margin-top: .25rem; }
.gd-list-head span { color: var(--nx-muted); font-size: .75rem; }
.gd-bar, .ob-bar { height: 6px; border-radius: 99px; background: var(--nx-surface-3); overflow: hidden; }
.gd-bar i, .ob-bar i { display: block; height: 100%; background: var(--nx-accent); border-radius: 99px; transition: width .3s ease; }
.gd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; }
.gd-steps li { display: flex; align-items: center; gap: .5rem; }
.gd-steps li .mud-icon-root { color: var(--nx-muted); }
.gd-steps li.is-done { color: var(--nx-muted); }
.gd-steps li.is-done span { text-decoration: line-through; }
.gd-steps li.is-done .mud-icon-root { color: var(--nx-good); }
.gd-sep { height: 1px; background: var(--nx-ring); margin: .125rem 0; }
.gd-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; color: var(--nx-ink-2); cursor: pointer; }
.gd-check input { margin-top: 3px; accent-color: var(--nx-accent); }
.gd-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .75rem; font-weight: 600; }
.gd-link { text-align: start; }
.gd-offer {
    position: fixed; right: 20px; bottom: 76px; z-index: 1450; width: min(360px, calc(100vw - 32px));
    display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: var(--nx-r-lg);
    background: var(--nx-surface); color: var(--nx-ink); border: 1px solid var(--nx-ring); box-shadow: var(--nx-sh-pop);
    animation: gd-rise .25s ease both;
}
.gd-offer > .mud-icon-root { color: var(--nx-accent); flex: 0 0 auto; }
.gd-offer strong { display: block; font-size: .875rem; margin-bottom: 2px; }
.gd-offer span { display: block; font-size: .8125rem; color: var(--nx-ink-2); }
.gd-offer-actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.gd-offer-actions a.nx-btn { text-decoration: none; display: inline-flex; align-items: center; }
@keyframes gd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The tour: a dimmed screen with a hole around what is being explained, and a card beside it. */
.nx-tour { position: fixed; inset: 0; z-index: 1600; pointer-events: none; }
.nx-tour-shade {
    position: fixed; border-radius: 10px; pointer-events: none;
    box-shadow: 0 0 0 3px var(--nx-accent), 0 0 0 9999px rgba(12, 13, 24, .55);
    transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.nx-tour-shade.is-full { inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; background: rgba(12, 13, 24, .55); }
.nx-tour-card {
    position: fixed; pointer-events: auto; width: min(360px, calc(100vw - 24px)); padding: 1rem 1.125rem .875rem;
    background: var(--nx-surface); color: var(--nx-ink); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg);
    box-shadow: var(--nx-sh-pop); outline: none; animation: gd-rise .2s ease both;
}
.nx-tour-card.is-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); animation: none; }
.nx-tour-card.is-sheet { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
.nx-tour-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .375rem; }
.nx-tour-count { font-size: .75rem; color: var(--nx-muted); font-weight: 600; }
.nx-tour-x { border: 0; background: transparent; color: var(--nx-muted); font-size: 1.25rem; line-height: 1; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.nx-tour-x:hover { background: var(--nx-surface-3); color: var(--nx-ink); }
.nx-tour-x:focus-visible, .nx-tour-card .nx-btn:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.nx-tour-title { font-size: 1rem; margin: 0 0 .375rem; }
.nx-tour-text { font-size: .875rem; line-height: 1.5; color: var(--nx-ink-2); margin: 0 0 .75rem; }
.nx-tour-dots { display: flex; gap: 5px; margin-bottom: .75rem; }
.nx-tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-surface-3); }
.nx-tour-dots span.is-past { background: var(--nx-accent-soft-2); }
.nx-tour-dots span.is-on { background: var(--nx-accent); width: 18px; border-radius: 99px; }
.nx-tour-foot { display: flex; align-items: center; gap: .375rem; }
.nx-tour-gap { flex: 1 1 auto; }
.nx-tour-skip { padding-left: 8px; padding-right: 8px; }

/* One-time tips inside pages. */
.tip-card {
    display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; margin-bottom: 1rem; border-radius: var(--nx-r);
    background: var(--nx-accent-soft); border: 1px solid rgba(99,102,241,.22); color: var(--nx-800); font-size: .8125rem;
}
.tip-card > .mud-icon-root { flex: 0 0 auto; margin-top: 1px; }
.tip-card > div { flex: 1 1 auto; }
.tip-card strong { display: block; font-size: .8125rem; margin-bottom: 1px; }
.tip-card a { font-weight: 600; }
.tip-close { flex: 0 0 auto; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px 6px; border-radius: 6px; font: inherit; font-size: .75rem; font-weight: 600; opacity: .8; }
.tip-close:hover { opacity: 1; background: rgba(99,102,241,.12); }
.tip-close:focus-visible { outline: 2px solid var(--nx-accent); }

/* The Getting started card. */
.ob-card { padding: 1rem 1.125rem; margin-bottom: 1rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); }
.ob-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .625rem; }
.ob-head h2, .ob-head h3 { margin: 0; font-size: 1rem; }
.ob-head > .mud-button-root { flex-shrink: 0; }   /* "Hide" never gets squeezed, also in longer languages */
.ob-sub { font-size: .8125rem; color: var(--nx-muted); }
.ob-bar { margin-bottom: .75rem; }
.ob-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .25rem 1.25rem; }
.ob-steps li { display: flex; gap: .625rem; align-items: flex-start; padding: .375rem 0; }
.ob-steps li .mud-icon-root { flex: 0 0 auto; color: var(--nx-muted); }
.ob-steps li[data-done="yes"] .mud-icon-root { color: var(--nx-good); }
.ob-steps li[data-done="yes"] strong { color: var(--nx-muted); text-decoration: line-through; font-weight: 500; }
.ob-steps strong { font-size: .8125rem; }
.ob-steps .ob-hint { font-size: .75rem; color: var(--nx-muted); }
.ob-foot { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--nx-ring); }
.ob-sample { font-size: .75rem; color: var(--nx-muted); }
.ob-tag, .sample-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 99px; font-size: .6875rem; font-weight: 650; background: #FEF3C7; color: #92400E; }

/* The set-up wizard. */
.su-wrap { max-width: 980px; margin: 0 auto; }
.su-steps { display: flex; gap: .5rem; margin: .25rem 0 1.25rem; flex-wrap: wrap; list-style: none; padding: 0; }
.su-steps li { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--nx-muted); font-weight: 600; }
.su-steps li b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: .75rem; }
.su-steps li.is-on { color: var(--nx-ink); }
.su-steps li.is-on b, .su-steps li.is-past b { background: var(--nx-accent); color: #fff; }
.su-steps li + li::before { content: ""; width: 24px; height: 1px; background: var(--nx-ring-strong); margin-inline-end: .25rem; }
.su-card { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg); padding: 1.5rem; }
.su-card h2 { font-size: 1.125rem; margin-bottom: .25rem; }
.su-lead { color: var(--nx-ink-2); font-size: .875rem; margin: 0 0 1.25rem; }
.su-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .75rem; }
.su-type {
    display: flex; gap: .75rem; align-items: flex-start; text-align: start; font: inherit; cursor: pointer; padding: 1rem; border-radius: var(--nx-r);
    background: var(--nx-surface); color: var(--nx-ink); border: 1.5px solid var(--nx-ring); transition: border-color .14s ease, box-shadow .14s ease;
}
.su-type:hover { border-color: var(--nx-accent); }
.su-type[aria-pressed="true"] { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.su-type:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.su-type-icon { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--nx-accent-soft); color: var(--nx-accent); }
.su-type strong { display: block; font-size: .9375rem; margin-bottom: 2px; }
.su-type small { color: var(--nx-muted); font-size: .8125rem; line-height: 1.4; }
.su-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .5rem; }
.su-module { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); cursor: pointer; background: var(--nx-surface); }
.su-module input { margin-top: 3px; accent-color: var(--nx-accent); width: 16px; height: 16px; }
.su-module strong { display: block; font-size: .875rem; }
.su-module small { color: var(--nx-muted); font-size: .75rem; }
.su-module.is-fixed { opacity: .75; cursor: default; }
.su-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.su-days { display: flex; gap: .375rem; flex-wrap: wrap; }
.su-day { min-width: 46px; padding: .5rem .625rem; border-radius: var(--nx-r-sm); border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); color: var(--nx-ink); font: inherit; font-size: .8125rem; cursor: pointer; }
.su-day[aria-pressed="true"] { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.su-day:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.su-label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; }
.su-input { width: 100%; padding: .55rem .7rem; border-radius: var(--nx-r-sm); border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); color: var(--nx-ink); font: inherit; font-size: .875rem; }
.su-choice { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border: 1.5px solid var(--nx-ring); border-radius: var(--nx-r); cursor: pointer; margin-bottom: .625rem; background: var(--nx-surface); }
.su-choice:has(input:checked) { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.su-choice input { margin-top: 3px; accent-color: var(--nx-accent); }
.su-choice strong { display: block; font-size: .875rem; }
.su-choice small { color: var(--nx-muted); font-size: .8125rem; }
.su-summary { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
.su-summary li { display: flex; gap: .5rem; align-items: flex-start; }
.su-summary .mud-icon-root { color: var(--nx-good); flex: 0 0 auto; }
.su-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.su-foot-end { display: flex; gap: .5rem; flex-wrap: wrap; }
.su-next-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .625rem; margin-top: 1rem; }
/* Import from other tools (#334): the set-up wizard's steps and cards, with the import's own counts, progress and history. */
.ti-page, .ti-page .su-card, .ti-page .crm-section { min-width: 0; max-width: 100%; }
.ti-page .crm-table-wrap { max-width: 100%; position: relative; }
.ti-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ti-counts .inv-total small { color: var(--nx-muted); font-size: .75rem; }
.ti-counts .inv-total strong { font-size: 1.375rem; }
.ti-drop { padding: 1rem; border: 1.5px dashed var(--nx-ring-strong); border-radius: var(--nx-r); background: var(--nx-surface-2, var(--nx-surface)); }
.ti-drop input[type=file] { max-width: 100%; font: inherit; font-size: .875rem; color: var(--nx-ink); }
.ti-value { padding: .55rem 0; font-size: .875rem; font-weight: 600; }
.ti-caption { caption-side: top; text-align: start; font-size: .75rem; color: var(--nx-muted); font-weight: 600; padding: 0 0 .375rem; }
.ti-h3 { font-size: .9375rem; margin: 1.25rem 0 .25rem; }
.ti-bar { height: 10px; margin: .5rem 0 .375rem; }
.ti-actions { text-align: end; white-space: nowrap; }
.ti-actions .crm-confirm { margin: 0; white-space: normal; justify-content: flex-end; }
#ti-tools .su-type { padding: .75rem; }
@media (max-width: 700px) { .ti-hide-phone { display: none; } .ti-actions { white-space: normal; } }
.su-progress-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.su-progress-table th, .su-progress-table td { text-align: start; padding: .5rem .625rem; border-bottom: 1px solid var(--nx-ring); }
.su-progress-table th { color: var(--nx-muted); font-weight: 600; font-size: .75rem; }
@media (max-width: 700px) {
    .su-card { padding: 1rem; }
    .su-grid2 { grid-template-columns: 1fr; }
    .su-steps li + li::before { width: 10px; }
    .gd-offer { right: 12px; left: 12px; bottom: 76px; width: auto; }   /* above the Support button, which it would otherwise cover */
    .su-progress-table .su-hide-phone { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gd-offer, .nx-tour-card { animation: none; }
    .nx-tour-shade, .gd-bar i, .ob-bar i, .su-type { transition: none; }
}
html[data-theme="dark"] .tip-card { color: #C7D2FE; border-color: rgba(129,140,248,.3); }
html[data-theme="dark"] .gd-setup { border-color: rgba(129,140,248,.3); }
html[data-theme="dark"] .ob-tag, html[data-theme="dark"] .sample-tag { background: rgba(251,191,36,.18); color: #FCD34D; }
html[data-theme="dark"] .nx-tour-shade { box-shadow: 0 0 0 3px #818CF8, 0 0 0 9999px rgba(0, 0, 0, .65); }
html[data-theme="dark"] .nx-tour-shade.is-full { box-shadow: none; background: rgba(0, 0, 0, .65); }

/* ---- Several companies in one workspace (#385 G2): the company switcher, company tags in lists, Settings > Companies, Company results ---- */
.nx-company-switch { display: inline-flex; align-items: center; gap: 4px; margin-right: .5rem; padding: 2px 4px 2px 8px; border: 1px solid var(--mud-palette-lines-default, rgba(23, 21, 59, .14)); border-radius: 999px; background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-secondary); }
.nx-company-switch select { border: 0; background: transparent; color: var(--mud-palette-text-primary); font: inherit; font-size: .8125rem; font-weight: 600; max-width: 180px; padding: 4px 2px; cursor: pointer; }
.nx-company-switch select:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 6px; }
.nx-company-tag, .nx-ic-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: .6875rem; font-weight: 650; line-height: 1.6; vertical-align: middle; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.nx-company-tag { color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe; }
.nx-ic-tag { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
html[data-theme="dark"] .nx-company-tag { color: #c7d2fe; background: rgba(99, 102, 241, .18); border-color: rgba(129, 140, 248, .35); }
html[data-theme="dark"] .nx-ic-tag { color: #fde68a; background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .35); }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.co-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.co-card:hover, .co-card:focus-visible { border-color: var(--mud-palette-primary); box-shadow: 0 6px 18px rgba(67, 56, 202, .10); }
.co-card.is-archived { opacity: .65; }
.co-card-head { display: flex; align-items: center; gap: 10px; }
.co-logo { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #eef2ff; color: #4338ca; font-weight: 700; overflow: hidden; }
.co-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
html[data-theme="dark"] .co-logo { background: rgba(99, 102, 241, .18); color: #c7d2fe; }
.co-name { font-weight: 650; font-size: .975rem; }
.co-legal { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.co-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.co-badge { margin-left: auto; font-size: .6875rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
html[data-theme="dark"] .co-badge { background: rgba(16, 185, 129, .16); color: #6ee7b7; border-color: rgba(16, 185, 129, .35); }
.co-logo-edit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.co-logo-edit .co-logo { width: 96px; height: 56px; }
.co-prefix-next { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.co-results td.is-total, .co-results tr.is-total td { font-weight: 700; border-top: 2px solid var(--mud-palette-lines-default); }
.co-results tr.is-elim td { color: #b45309; }
html[data-theme="dark"] .co-results tr.is-elim td { color: #fbbf24; }
.co-table-wrap { overflow-x: auto; }
.co-people { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.co-people label { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; }
@media (max-width: 600px) {
    .nx-company-switch select { max-width: 110px; }
    .co-grid { grid-template-columns: 1fr; }
}
/* ---- Resource planning (#385 G11): bookings, utilisation heatmap, skills grid, job roles, rates. Uses the Capacity colours (cap-*). ---- */
.rp-editor { padding:14px 16px; margin-bottom:14px; }
.rp-form { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px 14px; margin:6px 0 10px; }
.rp-field { display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--nx-ink-2); min-width:0; }
.rp-field .set-input { width:100%; }
.rp-wide { grid-column:1 / -1; }
.rp-who { margin:0; }
.rp-inline { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--nx-ink-2); }
.rp-warn { display:flex; flex-direction:column; gap:2px; }
.rp-actions { white-space:nowrap; text-align:end; }
.rp-status { display:inline-block; font-size:.7rem; font-weight:600; padding:2px 9px; border-radius:999px; height:fit-content; flex:none; }
.rp-tentative { background:#FEF3C7; color:#92400E; border:1px dashed #F59E0B; }
.rp-confirmed { background:#DCFCE7; color:#166534; }
.rp-ph-tag { display:inline-flex; align-items:center; gap:4px; font-weight:600; color:var(--nx-800); }
.rp-table tr.rp-ph td { background:var(--nx-accent-soft); }
.rp-over { color:#B91C1C; }
.rp-for { display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:12px; background:var(--nx-accent-soft); }
.rp-find label { display:flex; flex-direction:column; gap:3px; }
.rp-find label.usr-active { flex-direction:row; align-items:center; gap:6px; }
.rp-proj-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 6px; }
.rp-archived { margin:0 0 8px; }
.rp-archived-row td { opacity:.6; }
.uf-ph td.cap-name { font-style:italic; }
.uf-soft { margin-inline-start:3px; font-weight:800; }
.load-booking { border-style:solid; border-color:var(--nx-300, #A5B4FC); background:var(--nx-accent-soft); }
.load-booking.is-tentative { border-style:dashed; background:transparent; }
.sk-grid th { min-width:64px; }
.sk-role { min-width:130px; }
.sk-cell { display:block; width:100%; min-width:40px; padding:6px 0; border-radius:6px; text-align:center; font-weight:700; border:1px solid transparent; background:transparent; color:var(--nx-muted); cursor:default; }
button.sk-cell { cursor:pointer; }
button.sk-cell:hover, button.sk-cell:focus-visible { border-color:var(--nx-ring-strong); }
.sk-l1 { background:#E0E7FF; color:#3730A3; } .sk-l2 { background:#C7D2FE; color:#312E81; } .sk-l3 { background:#A5B4FC; color:#1E1B4B; }
.sk-l4 { background:#818CF8; color:#fff; } .sk-l5 { background:#4F46E5; color:#fff; }
.sk-self { border:1px dashed var(--nx-ink-2); }
.jr-skill { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.rt-history { padding:6px 4px 10px; }
.rt-history-row td { white-space:normal !important; background:var(--nx-soft, #F6F7FC); }
.rt-add { align-items:end; }
.pf-skill-add { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.pf-skill-add .set-input { flex:1 1 140px; min-width:0; }
.pf-skills li { display:flex; align-items:center; gap:8px; }
.pf-skills li span { flex:1; }
@media (max-width: 600px) {
    .rp-form { grid-template-columns:1fr; }
    .rp-inline { width:100%; }
}
html[data-theme="dark"] .rp-tentative { background:rgba(245, 158, 11, 0.2); color:#FCD34D; border-color:rgba(245, 158, 11, 0.5); }
html[data-theme="dark"] .rp-confirmed { background:rgba(34, 197, 94, 0.18); color:#86EFAC; }
html[data-theme="dark"] .rp-over { color:#FCA5A5; }
html[data-theme="dark"] .sk-l1 { background:rgba(139, 140, 245, 0.14); color:#C7C8FE; } html[data-theme="dark"] .sk-l2 { background:rgba(139, 140, 245, 0.24); color:#E0E1FF; }
html[data-theme="dark"] .sk-l3 { background:rgba(139, 140, 245, 0.36); color:#fff; } html[data-theme="dark"] .sk-l4 { background:rgba(139, 140, 245, 0.55); color:#fff; }
html[data-theme="dark"] .sk-l5 { background:#6D6FE0; color:#fff; }
html[data-theme="dark"] .rt-history-row td { background:var(--nx-surface-2, #23263D); }


/* =============================================================================
   Accessibility (WCAG 2.1 AA): shared rules for every page. js/nx-a11y.js does the keyboard and screen-reader part.
   ============================================================================= */
:root { --nx-focus: #4338CA; }
html[data-theme="dark"] { --nx-focus: #A5B4FC; }

/* Text only screen readers read. */
.nx-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "Skip to the content": hidden until the keyboard reaches it, the first thing Tab lands on. */
.nx-skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 4000; transform: translateY(-160%); padding: .625rem 1rem; border-radius: 10px;
    background: var(--nx-surface, #fff); color: var(--nx-accent); font-weight: 650; text-decoration: none; box-shadow: var(--nx-sh-pop); }
.nx-skip:focus { transform: none; }
.nx-main { display: block; outline: none; }
.nx-main:focus, .nx-main:focus-visible, #portal-main:focus { outline: none !important; }

/* One clearly visible focus ring for everything that can be reached with the keyboard (some older styles removed it or made it
   too faint to see). Text boxes keep their own coloured border, which is already clear. */
:is(a, button, summary, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="radio"], [role="checkbox"], [role="switch"],
    [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"], input[type="range"], .mud-button-root, .mud-nav-link):focus-visible {
    outline: 2px solid var(--nx-focus) !important; outline-offset: 2px !important;
}
.nx-drawer :is(a, button, summary, .mud-nav-link):focus-visible { outline-color: #C7D2FE !important; outline-offset: -2px !important; }

/* Links inside sentences are underlined, so they are not told apart by colour alone. */
.nx-page-sub a, .pf-hint a, .crm-banner a, .nx-health-banner a, .tip-card a, .sup-new li a, .set-hint a, .nx-card p a, .pm-empty a, .lg-help a, .lg-foot a { text-decoration: underline; text-underline-offset: 2px; }

/* Less movement: the computer's "reduce motion" setting, or "Reduce motion" in the menu under your name. Cards on boards and
   pipelines no longer slide, nothing pulses, and panels appear without sliding in. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* Contrast fixes for dark mode (text that kept a light-mode colour). */
html[data-theme="dark"] .gs-box kbd, html[data-theme="dark"] .nx-command-hint kbd { color: #B3B8D3; border-bottom-color: var(--nx-ring-strong); }
html[data-theme="dark"] .at-viewname { color: #A5B4FC; }
html[data-theme="dark"] .nx-tag.is-client { background: rgba(139, 140, 245, .16); color: #C7D2FE; }
html[data-theme="dark"] .mt-filter label { color: #B3B8D3; }
html[data-theme="dark"] .sup-tab.is-on { color: #C7D2FE; border-bottom-color: #A5B4FC; }
html[data-theme="dark"] .sup-cat { background: var(--nx-surface-2); border-color: var(--nx-ring-strong); }
html[data-theme="dark"] .sup-cat.is-on { background: rgba(139, 140, 245, .16); border-color: #A5B4FC; box-shadow: 0 0 0 1px #A5B4FC inset; }
.pf-link-btn, .pf-link-btn:visited, html[data-theme="dark"] body:not(:has(.lp-header, .pp-side, .pp-bare)) a:is(.pf-btn, .nx-btn.is-primary) { color: #fff; }
.sup-new .sup-h { font-size: 1.17em; font-weight: 700; margin: 0 0 .875rem; }
html[data-theme="dark"] .usr-tabs a.is-on { color: #C7D2FE; border-bottom-color: #A5B4FC; }
.sc-day.is-other .sc-num { opacity: 1; color: var(--nx-muted); }
/* Plain links inside sentences and short notes are underlined (links in tables, menus and buttons keep their own look). */
.nx-main-canvas a:not([class]):not([role]):not(td > a):not(th > a) { text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="dark"] :is(.pf-logo-pick, .es-tab.is-on, .cm-link.is-primary, .eg-tabs button.on, .eg-tabs button.on span, .eg-rail button.on b, [role="tab"].on) { color: #C7D2FE; }
html[data-theme="dark"] :is(.eg-sub, .ld-sub, .eg-count, .eg-tabs button) { color: #A5ABC8; }
html[data-theme="dark"] .md-late h2 { color: #FCA5A5; }
html[data-theme="dark"] .sr-kind.on { background: #5254C9; border-color: #5254C9; }

/* ---- Help-desk tickets on the Schedule, My day and Capacity (#404): a ticket icon and colour of their own, the Tickets list's status pill and priority ---- */
:root { --nx-ticket: #0E7490; }
html[data-theme="dark"] { --nx-ticket: #67E8F9; }
.tk-icon { font-size: .8125rem !important; width: 1em !important; height: 1em !important; color: var(--nx-ticket); flex: 0 0 auto; margin-inline-end: 4px; vertical-align: -2px; }
.tk-badges { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tk-badges.is-mini .dk-pill { font-size: .5625rem; padding: 0 .35rem; line-height: 1.5; }
.tk-badges.is-mini .dk-prio { font-size: .5625rem; }
.dk-pill.tk-breach { background: #FEE4E2; color: #B42318; }
html[data-theme="dark"] .dk-pill.tk-breach { background: #5C1D1A; color: #FECACA; }
html[data-theme="dark"] .dk-prio.p-urgent { color: #FCA5A5; }
html[data-theme="dark"] .dk-prio.p-high { color: #FDBA74; }
.cal-bar.is-ticket { cursor: pointer; }
.cal-bar.is-ticket .tk-badges { flex: 0 0 auto; flex-wrap: nowrap; margin-inline-start: 4px; }
.load-item.is-ticket { cursor: pointer; border-inline-start: 3px solid var(--nx-ticket); background: color-mix(in srgb, var(--nx-ticket) 7%, var(--nx-surface)); }
.load-item.is-ticket.is-late { border-color: color-mix(in srgb, var(--nx-load-over) 55%, transparent); border-inline-start-color: var(--nx-load-over); background: color-mix(in srgb, var(--nx-load-over) 7%, var(--nx-surface)); }
.load-item.is-ticket .tk-badges { display: flex; margin: 1px 0; }
.load-item.is-ticket:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
.load-item.is-hidden-ticket { cursor: default; }
.md-name .tk-icon { font-size: 1rem !important; vertical-align: -3px; }
.md-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.md-ticket { border-inline-start: 3px solid var(--nx-ticket); }
.md-ticket.is-late { border-inline-start-color: var(--nx-load-over); }
.md-open { min-height: 44px; min-width: 76px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--nx-ring, #E3E5F1); color: var(--nx-700); font-weight: 600; text-decoration: none; }
.md-open:hover, .md-open:focus-visible { background: var(--nx-accent-soft); }
.cap-ticket { flex: 1; display: inline-flex; align-items: center; gap: 2px; }

/* ---- Customer portal (#341): the organization's own look, the portal's menu, things waiting, quotations, milestones, shared files ---- */
.pt-branded .pt-head { background: var(--pt-brand, #17153B); color: var(--pt-on-brand, #fff); }
.pt-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.pt-brand-logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; padding: 3px 6px; height: 36px; max-width: 140px; }
.pt-brand-logo img { max-height: 30px; max-width: 128px; width: auto; height: auto; object-fit: contain; }
.pt-brand-mark { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); font-weight: 800; }
.pt-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-powered { display: block; margin-top: 6px; opacity: .8; }
.pt-tabs { display: flex; gap: 4px; padding: 0 16px; background: var(--nx-surface, #fff); border-bottom: 1px solid #E4E6F0; overflow-x: auto; scrollbar-width: thin; }
.pt-tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px; color: #4A5069; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; border-bottom: 3px solid transparent; }
.pt-tabs a:hover { color: #14162E; }
.pt-tabs a.is-on { color: var(--nx-accent, #4338CA); border-bottom-color: var(--nx-accent, #4338CA); }
.pt-tabs a:focus-visible { outline: 2px solid var(--nx-accent, #4338CA); outline-offset: -2px; }
.pt-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--nx-accent, #4338CA); color: #fff; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; }
.pt-wait-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pt-wait-main small { margin-inline-start: 0 !important; }
.pt-kind { align-self: flex-start; display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: #EEF0FF; color: #3730A3; white-space: nowrap; }
.pt-kind-proof { background: #E0F2FE; color: #075985; } .pt-kind-change { background: #FEF3C7; color: #92400E; } .pt-kind-signature { background: #F3E8FF; color: #6B21A8; }
.pt-kind-ok { background: #DCFCE7; color: #166534; } .pt-kind-muted { background: #F1F1F3; color: #4A5069; } .pt-kind-payment { background: #ECFDF3; color: #166534; }
.pt-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pt-amount { display: block; font-size: 1.6rem; }
.pt-row small.pt-label { display: block; margin-inline-start: 0; }
.pt-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pt-table th { text-align: start; font-size: .78rem; color: #4A5069; font-weight: 600; padding: 6px 4px; border-bottom: 1px solid #E4E6F0; }
.pt-table td { padding: 8px 4px; border-bottom: 1px solid #F2F3F9; vertical-align: top; }
.pt-table .pt-num { text-align: end; white-space: nowrap; }
.pt-table tfoot td { border-bottom: 0; color: #4A5069; }
.pt-table tfoot .pt-total td { font-weight: 700; color: inherit; font-size: 1rem; border-top: 1px solid #E4E6F0; }
.pt-details summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.pt-steps { list-style: none; margin: 0; padding: 0; }
.pt-steps li { position: relative; display: flex; gap: 12px; padding: 8px 0 8px 0; }
.pt-steps li + li::before { content: ""; position: absolute; inset-inline-start: 6px; top: -10px; height: 18px; border-inline-start: 2px solid #E4E6F0; }
.pt-steps li > span:last-child { display: flex; flex-direction: column; } .pt-steps small { color: #4A5069; }
.pt-step-dot { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid #A9AEC8; background: var(--nx-surface, #fff); }
.pt-steps .is-done .pt-step-dot { background: #1F7A50; border-color: #1F7A50; }
.pt-steps .is-late .pt-step-dot { border-color: #B42318; } .pt-steps .is-late small { color: #B42318; }
.pt-file-name { overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .pt-head { padding: 12px 16px; font-size: 1.05rem; }
    .pt-nav { gap: 12px; font-size: .85rem; }
    .pt-brand-logo { max-width: 104px; } .pt-brand-logo img { max-width: 92px; }
    .pt-row { flex-wrap: wrap; }
    .pt-row > .pt-btn, .pt-row > .pt-stage, .pt-row > .pt-actions { margin-inline-start: auto; }
    .pt-table thead { display: none; }
    .pt-table, .pt-table tbody, .pt-table tr, .pt-table td { display: block; width: 100%; }
    .pt-table tbody tr { border-bottom: 1px solid #F2F3F9; padding: 6px 0; }
    .pt-table tbody td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; }
    .pt-table tbody td[data-label]::before { content: attr(data-label); color: #4A5069; font-size: .8rem; }
    .pt-table tbody td:first-child { display: block; } .pt-table tbody td:first-child::before { display: none; }
    .pt-table tfoot { display: block; width: 100%; } .pt-table tfoot tr { display: flex; justify-content: space-between; width: 100%; } .pt-table tfoot td { width: auto; display: block; }
}
html[data-theme="dark"] .pt-tabs { background: var(--nx-surface); border-color: var(--nx-ring); }
html[data-theme="dark"] .pt-tabs a { color: var(--nx-muted); } html[data-theme="dark"] .pt-tabs a:hover { color: var(--nx-ink); }
html[data-theme="dark"] .pt-tabs a.is-on { color: #C7D2FE; border-bottom-color: #A5B4FC; }
html[data-theme="dark"] .pt-kind { background: #312E81; color: #C7D2FE; } html[data-theme="dark"] .pt-kind-proof { background: #0C4A6E; color: #BAE6FD; }
html[data-theme="dark"] .pt-kind-change { background: #78350F; color: #FDE68A; } html[data-theme="dark"] .pt-kind-signature { background: #581C87; color: #E9D5FF; }
html[data-theme="dark"] .pt-kind-ok, html[data-theme="dark"] .pt-kind-payment { background: #14532D; color: #BBF7D0; } html[data-theme="dark"] .pt-kind-muted { background: var(--nx-surface-3); color: var(--nx-muted); }
html[data-theme="dark"] .pt-table th, html[data-theme="dark"] .pt-table tfoot td, html[data-theme="dark"] .pt-steps small, html[data-theme="dark"] .pt-table tbody td[data-label]::before { color: var(--nx-muted); }
html[data-theme="dark"] .pt-table th, html[data-theme="dark"] .pt-table td, html[data-theme="dark"] .pt-table tfoot .pt-total td, html[data-theme="dark"] .pt-steps li + li::before { border-color: var(--nx-ring); }
html[data-theme="dark"] .pt-steps .is-late small { color: #FCA5A5; }
.doc-shared-chip { background: #ECFDF3; color: #166534; }
html[data-theme="dark"] .doc-shared-chip { background: #14532D; color: #BBF7D0; }
.pt-branded .pt-head a, .pt-branded .pt-head .pt-linkbtn, html[data-theme="dark"] .pt-branded .pt-head a, html[data-theme="dark"] .pt-branded .pt-head .pt-linkbtn { color: var(--pt-on-brand, #fff); }
/* Your clients' own branding (#335): the organization's accent on buttons and links, always readable (the colours arrive already checked
   against WCAG AA: --pt-on-accent on buttons, --pt-link on a light page, --pt-link-dark on a dark one), and its logo for dark backgrounds. */
.pt-branded .pt-btn:not(.pt-btn-quiet):not(.pt-btn-no):not(.is-approve):not(.is-reject), .pt-branded .pt-count { color: var(--pt-on-accent, #fff); }
.pt-branded .pt-main a:not([class]) { color: var(--pt-link, var(--nx-accent)); }
.pt-branded .pt-tabs a.is-on { color: var(--pt-link, var(--nx-accent)); border-bottom-color: var(--nx-accent); }
html[data-theme="dark"] .pt-branded .pt-main a:not([class]) { color: var(--pt-link-dark, #A5B4FC); }
html[data-theme="dark"] .pt-branded .pt-tabs a.is-on { color: var(--pt-link-dark, #C7D2FE); border-bottom-color: var(--pt-link-dark, #A5B4FC); }
.pt-brand-logo.is-bare { background: transparent; padding: 0; }
.pt-brand-logo.is-bare img { max-height: 34px; }
.pt-nav a, .pt-nav .pt-linkbtn { white-space: nowrap; }
/* Customer portal: invoices, statement and support (#341) */
.pt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pt-stats .pt-card { margin-bottom: 0; }
.pt-stat { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pt-stat small { color: #4A5069; font-size: .8rem; } .pt-stat b { font-size: 1.25rem; overflow-wrap: anywhere; }
.pt-kind-late { background: #FEE4E2; color: #B42318; }
.pt-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pt-filter .pt-field { margin-bottom: 0; flex: 1 1 140px; }
.pt-filter-go { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-paybox { border-inline-start: 4px solid var(--nx-accent, #4338CA); }
html[data-theme="dark"] .pt-stat small { color: var(--nx-muted); }
html[data-theme="dark"] .pt-kind-late { background: #5C1D1A; color: #FECACA; }
/* Customer community (#341): answers in the portal, and the team's moderation page */
.pt-answer.is-best { border-color: #ABEFC6; box-shadow: inset 4px 0 0 #1F7A50; }
.pt-answer.is-team { background: #F7F8FF; }
.pt-answer .pt-msghead .pt-kind { margin-inline-start: 6px; vertical-align: 1px; }
.pt-btn-sm { min-height: 34px; padding: 0 12px; font-size: .85rem; margin-top: 8px; }
.pt-cm-count { font-size: .8rem; color: #4A5069; }
.cm-post { margin-bottom: 12px; padding: 16px; }
.cm-post.is-best { box-shadow: inset 4px 0 0 #1F7A50; }
.cm-post.is-team { background: color-mix(in srgb, var(--nx-accent, #4338CA) 4%, var(--nx-surface, #fff)); }
.cm-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.cm-title { margin: 0 0 4px; font-size: 1.3rem; }
.cm-tools { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cm-body { margin: 10px 0; }
.cm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-sub { font-size: 1rem; margin: 18px 0 8px; }
html[data-theme="dark"] .pt-answer.is-team { background: var(--nx-surface-2); }
html[data-theme="dark"] .pt-answer.is-best { border-color: #166534; }
html[data-theme="dark"] .pt-cm-count { color: var(--nx-muted); }
/* ===== Project management additions (#359): links and the critical path, repeating tasks, checklists ===== */
/* Small signs on task rows and cards (checklist "2/5", repeats, story points) — one look everywhere (TaskBadges.razor). */
.nx-task-badge { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; font-size: 0.7188rem; font-weight: 600; color: var(--nx-muted);
    padding: 0 5px; min-height: 18px; border-radius: 999px; background: var(--nx-surface-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-task-badge .mud-icon-root { font-size: 0.875rem; }
.nx-check-badge.is-complete { background: color-mix(in srgb, var(--nx-good) 14%, transparent); color: color-mix(in srgb, var(--nx-good) 75%, var(--nx-ink)); }
.nx-points-badge { background: var(--nx-accent-soft); color: var(--nx-accent); min-width: 18px; justify-content: center; }
.tb-title .nx-task-badge { margin-inline-start: 4px; }

/* Checklist inside a task */
.tp-check-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tp-check-count { font-size: 0.75rem; font-weight: 500; color: var(--nx-muted); font-variant-numeric: tabular-nums; }
.tp-check-bar { height: 4px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; margin: 0.25rem 0 0.5rem; }
.tp-check-bar > div { height: 100%; background: var(--nx-good); border-radius: inherit; transition: width .25s ease; }
.tp-check-list { list-style: none; margin: 0; padding: 0; }
.tp-check-item { display: flex; align-items: center; gap: 0.5rem; min-height: 34px; padding: 2px 4px; border-radius: var(--nx-r-xs); }
.tp-check-item:hover { background: var(--nx-surface-2); }
.tp-check-item.is-dragging { opacity: .5; }
.tp-check-item[draggable="true"] { cursor: grab; }
.tp-check-box { width: 16px; height: 16px; accent-color: var(--nx-accent); flex: 0 0 auto; cursor: pointer; }
.tp-check-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 0.875rem; }
.tp-check-item.is-done .tp-check-text { text-decoration: line-through; color: var(--nx-muted); }
.tp-check-edit { flex: 1 1 auto; min-width: 0; }
.tp-check-add { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.tp-check-add .task-inline-input { flex: 1 1 auto; min-width: 0; }
.tp-check-add .mud-button-root { flex: 0 0 auto; white-space: nowrap; }

/* Repeat rule under the "Repeats" field */
.tp-repeat-more { grid-column: 1 / -1; display: grid; gap: 0.375rem; padding: 0 0 0.5rem; }
.tp-repeat-row { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--nx-ink-2); }
.tp-repeat-row .tp-input { flex: 1 1 auto; min-width: 0; }
.tp-repeat-row .tp-repeat-n { flex: 0 0 64px; }
.tp-repeat-note { font-size: 0.75rem; color: var(--nx-muted); }

/* Dependency rows: kind and lag can be changed in place */
.dep-row { flex-wrap: wrap; }
.dep-row .dep-title { min-width: 0; overflow-wrap: anywhere; }
.dep-row .dep-type { max-width: 220px; height: 30px; font-size: 0.75rem; }
.dep-row .dep-lag { width: 64px; height: 30px; font-size: 0.75rem; }
.dep-row .tp-input { border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); padding: 0 6px; background: var(--nx-surface); }

/* Links and the critical path on the timeline. A time line runs left to right in every language, so its header and grid do too. */
.gantt-time { direction: ltr; }
.gantt-links { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; overflow: visible; }
.gantt-link { fill: none; stroke: var(--nx-baseline); stroke-width: 1.5; }
.gantt-link.is-critical { stroke: var(--nx-critical); stroke-width: 2; }
/* Pressing a line (#563): the lines sit above the rows so they can be pressed; only the wide invisible copy takes the press. */
.gantt-links { z-index: 2; }
.gantt-link-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.gantt-link-hit:hover + .gantt-link, .gantt-link.is-open { stroke-width: 3; }
.gantt-link.is-block { stroke-dasharray: 5 3; }
.gantt-link.is-conflict { stroke: var(--nx-warning, #d97706); }
.gantt-link.is-open { stroke: var(--nx-accent); }
.gantt-link-warn { position: absolute; z-index: 3; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--nx-warning, #d97706); color: #fff; font: 700 12px/18px inherit; text-align: center; box-shadow: 0 0 0 2px var(--nx-surface); }
/* Drawing a link (#565): a dot at the end of each bar, shown on hover; drag it onto another bar. */
.gantt-bar-handle { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 1px; border-radius: 50%; background: var(--nx-surface);
  border: 2px solid var(--nx-accent); cursor: crosshair; opacity: 0; transition: opacity .12s; z-index: 3; touch-action: none; }
.gantt-track:hover .gantt-bar-handle, .gantt-body.is-linking .gantt-bar-handle { opacity: 1; }
.gantt-bar.is-link-target { outline: 2px dashed var(--nx-accent); outline-offset: 2px; }
.gantt-link-draft { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 6; overflow: visible; }
.gantt-link-draft path { fill: none; stroke: var(--nx-accent); stroke-width: 2; stroke-dasharray: 5 3; }
@media (hover: none) { .gantt-bar-handle { opacity: .8; } }
.gantt-bar-link { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); font-size: 14px !important; opacity: .85; pointer-events: none; }
.gantt-link-card { position: absolute; z-index: 4; width: 280px; max-width: calc(100vw - 32px); margin-left: 8px; padding: 10px; border-radius: var(--nx-r-md, 10px);
  background: var(--nx-surface); border: 1px solid var(--nx-ring); box-shadow: 0 8px 24px rgba(15,23,42,.18); display: flex; flex-direction: column; gap: 6px; }
.gantt-link-card.is-left { transform: translateX(calc(-100% - 16px)); }
.gantt-link-card-task { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--nx-ring); background: var(--nx-surface-2); color: var(--nx-ink); font: inherit; cursor: pointer; }
.gantt-link-card-task:hover { border-color: var(--nx-accent); }
.gantt-link-card-title { font-weight: 600; font-size: .8125rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-link-card-date { font-size: .75rem; color: var(--nx-muted); }
.gantt-link-card-warn { font-size: .75rem; font-weight: 600; color: var(--nx-warning, #d97706); }
.gantt-link-card-rel { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: .8125rem; font-weight: 600; color: var(--nx-accent); }
.gantt-link-card-close { position: absolute; top: 2px; inset-inline-end: 6px; border: none; background: none; color: var(--nx-muted); font-size: 16px; cursor: pointer; }
.gantt-bar.is-critical { box-shadow: 0 0 0 2px var(--nx-critical); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.gantt-key { display: inline-flex; align-items: center; gap: 0.375rem; }
.gantt-key-bar { width: 22px; height: 10px; border-radius: 3px; background: var(--nx-ord-1); }
.gantt-key-bar.is-critical { box-shadow: 0 0 0 2px var(--nx-critical); }
.gantt-key-line { width: 22px; height: 0; border-top: 2px solid var(--nx-baseline); }
/* Milestones 2: the thin dotted line from a linked task to its milestone's diamond (amber when the task is due after the milestone). */
.gantt-ms-link { fill: none; stroke: #7C3AED; stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.gantt-ms-link.is-late { stroke: var(--nx-warning, #d97706); opacity: 1; }
.gantt-key-line.is-ms { border-top: 1px dashed #7C3AED; }

/* Portfolio and earned value (#359 P4) */
.pf-toolbar .tb-toggle { white-space: nowrap; }
.pf-table th.num, .pf-table td.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-table .pm-col-bar { min-width: 120px; width: 130px; }
.pf-table .pf-owner { white-space: nowrap; }
.pf-table .pm-reasons { max-width: 220px; }
.pf-var { font-weight: 650; font-variant-numeric: tabular-nums; }
.pf-var.is-ok, .pf-ok { color: color-mix(in srgb, var(--nx-good) 80%, var(--nx-ink)); }
.pf-var.is-warn, .pf-warn { color: color-mix(in srgb, var(--nx-warning) 55%, var(--nx-ink)); }
.pf-var.is-bad, .pf-bad { color: var(--nx-critical); }
.pf-note { font-size: 0.75rem; color: var(--nx-muted); padding: 0.75rem 1rem 0.25rem; }
/* A small (i) beside a title that explains it (#539); shared, so any page can use <InfoTip>. */
.nx-info { position: relative; display: inline-flex; vertical-align: middle; margin-inline-start: 4px; text-transform: none; letter-spacing: normal; }
.nx-info-btn { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--nx-ring); background: var(--nx-surface-2); color: var(--nx-muted);
  font: italic 600 10px/13px Georgia, serif; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nx-info-btn:hover, .nx-info.is-open .nx-info-btn { color: var(--nx-accent); border-color: var(--nx-accent); }
.nx-info-btn:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
.nx-info-pop { position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: -8px; width: max-content; max-width: min(280px, 80vw);
  background: var(--nx-surface, #fff); color: var(--nx-ink); border: 1px solid var(--nx-ring); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.14);
  padding: 8px 10px; font-size: .75rem; font-weight: 400; line-height: 1.45; white-space: normal; text-align: start; }
.nx-info-pop b { display: block; font-weight: 650; margin-bottom: 2px; }
.pf-table th { white-space: nowrap; }
.pf-table:not(.is-details) .pm-col-bar { min-width: 96px; width: 104px; }
.pf-table:not(.is-details) .pf-owner { white-space: normal; min-width: 90px; }
.pf-table .pm-reasons { max-width: 160px; }
.pf-sort { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: none; padding: 0; cursor: pointer; }
.pf-sort:hover, .pf-sort.is-on { color: var(--nx-ink); }
.pf-sort-dir { margin-inline-start: 3px; font-size: .5625rem; }
.pf-table.is-details { font-size: .78rem; }
@media (max-width: 640px) {
  /* On a phone each project becomes a card: every figure on its own line, with its column name. */
  #pf-table thead { display: none; }
  #pf-table, #pf-table tbody, #pf-table tr, #pf-table td { display: block; width: 100%; }
  #pf-table tr { border: 1px solid var(--nx-ring); border-radius: 10px; margin-bottom: 10px; padding: 4px 10px; }
  #pf-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px dashed var(--nx-ring); padding: 7px 0; text-align: end; }
  #pf-table td:last-child { border-bottom: none; }
  #pf-table td::before { content: attr(data-label); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); text-align: start; }
  #pf-table td:first-child { display: block; text-align: start; }
  #pf-table td:first-child::before { display: none; }
  #pf-table .pm-col-bar { width: 100%; }
  #pf-table .pm-progress { flex: 1; max-width: 60%; }
}
.bg-ev .bg-grid { margin-bottom: 4px; }
.bg-ev-ok { border-color: color-mix(in srgb, var(--nx-good) 45%, transparent) !important; }
.bg-ev-warn { border-color: color-mix(in srgb, var(--nx-warning) 70%, transparent) !important; }

/* Scrum (#359 P6): sprint board, backlog, burndown and velocity */
.scr-tabs { margin-bottom: 0.75rem; }
.scr-points { font-size: 0.8125rem; color: var(--nx-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.scr-points b { color: var(--nx-ink); font-size: 1rem; }
.scr-empty { display: grid; justify-items: start; gap: 0.5rem; padding: 1rem; }
.scr-head .tp-check-bar { margin: 0 1rem 0.75rem; }
.scr-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; margin-top: 0.75rem; }
.scr-col { background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); padding: 0.5rem; min-height: 160px; display: flex; flex-direction: column; gap: 0.5rem; transition: background .15s, border-color .15s; }
.scr-col.is-over { border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.scr-col-head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 620; padding: 0.25rem 0.25rem 0; }
.scr-col-pts { margin-inline-start: auto; font-weight: 500; color: var(--nx-muted); font-size: 0.75rem; }
.scr-col-empty { font-size: 0.75rem; color: var(--nx-muted); text-align: center; padding: 1rem 0; border: 1px dashed var(--nx-ring-strong); border-radius: var(--nx-r-sm); }
.scr-card { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); padding: 0.625rem; display: grid; gap: 0.5rem; box-shadow: var(--nx-sh-2); }
.scr-card[draggable="true"] { cursor: grab; }
.scr-card.is-dragging { opacity: .5; }
.scr-card-title { font-size: 0.875rem; font-weight: 560; color: var(--nx-ink); text-decoration: none; overflow-wrap: anywhere; }
.scr-card-title:hover { color: var(--nx-accent); }
.scr-card-foot { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.scr-card-foot .spacer { flex: 1 1 auto; }
.scr-move { font-size: 0.75rem; height: 26px; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-xs); background: var(--nx-surface); color: var(--nx-ink-2); }
@media (hover: hover) and (pointer: fine) { .scr-move { display: none; } .scr-card:focus-within .scr-move { display: block; } }
.scr-backlog-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.scr-sprints { display: grid; gap: 0.75rem; align-content: start; justify-items: stretch; }
.scr-sprints > .mud-button-root { justify-self: start; }
.scr-list { list-style: none; margin: 0; padding: 0 0.5rem 0.5rem; }
.scr-row { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.25rem 0.5rem; border-top: 1px solid var(--nx-ring); }
.scr-row:first-child { border-top: 0; }
.scr-row[draggable="true"] { cursor: grab; }
.scr-row.is-dragging { opacity: .5; }
.scr-row.is-done .scr-row-title { text-decoration: line-through; color: var(--nx-muted); }
.scr-grip { color: var(--nx-muted); flex: 0 0 auto; }
.scr-row-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 0.875rem; color: var(--nx-ink); text-decoration: none; }
a.scr-row-title:hover { color: var(--nx-accent); }
.scr-pts-input { width: 56px; height: 30px; padding: 0 6px; text-align: center; }
.scr-to-sprint, .scr-pts-input { padding-top: 0; padding-bottom: 0; line-height: 28px; }
.scr-to-sprint { flex: 0 0 auto; width: 150px; height: 30px; font-size: 0.75rem; }
.scr-reports { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.scr-chart { padding: 0 1rem 1rem; }
.scr-legend { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--nx-ink-2); margin-bottom: 0.25rem; }
.scr-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.scr-key-actual { width: 18px; height: 0; border-top: 2px solid var(--nx-ord-3); display: inline-block; }
.scr-key-ideal { width: 18px; height: 0; border-top: 2px dashed var(--nx-baseline); display: inline-block; }
.scr-burn-svg { width: 100%; height: auto; display: block; direction: ltr; }
.scr-grid { stroke: var(--nx-grid); stroke-width: 1; }
.scr-axis { fill: var(--nx-muted); font-size: 11px; }
.scr-ideal { fill: none; stroke: var(--nx-baseline); stroke-width: 2; stroke-dasharray: 5 4; }
.scr-actual { fill: none; stroke: var(--nx-ord-3); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.scr-dot { fill: var(--nx-ord-3); stroke: var(--nx-surface); stroke-width: 2; }
.scr-hit { fill: transparent; }
.scr-pt:hover .scr-dot { r: 5; }
.scr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scr-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 1rem 0.75rem; }
.scr-review .task-section-head { padding: 0 1rem; }
.scr-notes { white-space: pre-wrap; font-size: 0.875rem; color: var(--nx-ink-2); }
.scr-review-grid .task-section-head { padding: 0; }
.scr-complete-card { width: min(560px, calc(100vw - 32px)); display: grid; gap: 0.25rem; }
.scr-label { font-size: 0.8125rem; color: var(--nx-ink-2); margin-top: 0.5rem; }
/* Smoother sprints: carried-over mark, automatic sprints card, suggested plan */
.scr-carried { background: var(--nx-surface-2); color: var(--nx-ink-2); border: 1px solid var(--nx-ring); }
.scr-carried-head { color: var(--nx-ink-2); }
.scr-auto .pm-card-head h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.scr-auto-form { margin: 0 1rem 1rem; padding: 0.75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface-2); }
.scr-auto-form .tb-toggle { white-space: normal; font-weight: 560; color: var(--nx-ink); }
.scr-plan-card { width: min(680px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); overflow-y: auto; }
.scr-plan-figures { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8125rem; color: var(--nx-muted); margin: 0.25rem 0 0.5rem; }
.scr-plan-figures b { color: var(--nx-ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.scr-plan-how { color: var(--nx-ink-2); }
.scr-ai { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--nx-r-sm); background: var(--nx-accent-soft); color: var(--nx-ink); font-size: 0.8125rem; }
.scr-ai .mud-icon-root { color: var(--nx-accent); flex: 0 0 auto; }
.scr-plan-list { padding: 0; margin-top: 0.5rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); }
.scr-plan-pick { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.scr-plan-pick input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--nx-accent); }
.scr-why { flex: 0 0 auto; font-size: 0.75rem; color: var(--nx-muted); max-width: 40%; text-align: end; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .scr-backlog-grid, .scr-reports, .scr-review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .scr-board { grid-template-columns: repeat(4, minmax(240px, 82vw)); scroll-snap-type: x mandatory; }
    .scr-col { scroll-snap-align: start; }
    .scr-row { flex-wrap: wrap; }
    .scr-to-sprint { width: 100%; }
    .scr-why { max-width: none; flex-basis: 100%; text-align: start; padding-inline-start: 1.5rem; }
}
html[data-theme="dark"] .scr-col.is-over { background: rgba(123, 124, 243, 0.12); }

/* Meeting minutes (#359 P7) */
.mt-form-body, .mt-view-body { padding: 0 1rem 1rem; display: grid; gap: 0.75rem; }
.mt-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.75rem; }
.mt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.mt-field { display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--nx-ink-2); }
.mt-people { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.mt-people .task-owner-chip.is-away { opacity: .6; text-decoration: line-through; }
.mt-present input { accent-color: var(--nx-accent); margin: 0; }
.mt-guest { flex: 0 1 220px; height: 32px; }
.mt-actions { display: grid; gap: 0.375rem; justify-items: start; }
.mt-action-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px 150px auto; gap: 0.375rem; align-items: center; width: 100%; }
.mt-list { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; font-size: 0.875rem; }
.mt-decisions li::marker { color: var(--nx-good); }
.mt-notes { font-size: 0.875rem; color: var(--nx-ink); overflow-wrap: anywhere; }
.mt-confirm { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 1rem 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--nx-r-sm); background: color-mix(in srgb, var(--nx-critical) 8%, transparent); font-size: 0.8125rem; }
.mt-task-link { font-size: 0.8125rem; white-space: nowrap; }
.mt-rows { list-style: none; margin: 0; padding: 0.25rem 0; }
.mt-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 1rem; border: 0; border-top: 1px solid var(--nx-ring); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mt-rows li:first-child .mt-row { border-top: 0; }
.mt-row:hover { background: var(--nx-surface-2); }
.mt-date { flex: 0 0 52px; display: grid; justify-items: center; line-height: 1.1; padding: 0.25rem; border-radius: var(--nx-r-sm); background: var(--nx-accent-soft); color: var(--nx-accent); }
.mt-date b { font-size: 1.125rem; }
.mt-date small { font-size: 0.625rem; white-space: nowrap; }
.mt-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
@media (max-width: 760px) {
    .mt-grid, .mt-two { grid-template-columns: 1fr; }
    .mt-action-row { grid-template-columns: 1fr 1fr; }
    .mt-action-row .mt-action-text { grid-column: 1 / -1; }
}
.mt-field .set-input, .mt-action-row .set-input, .mt-field textarea { width: 100%; max-width: none; box-sizing: border-box; }
.mt-list { list-style: revert; }
/* =============================================================================
   Workflows (#339): the list, the template gallery and the drawing canvas.
   Colours come from the shared tokens, so light and dark mode follow by themselves;
   each kind of step has one accent (trigger indigo, check amber, wait sky, action green).
   ============================================================================= */
.wf-usage { display: flex; gap: .75rem; flex-wrap: wrap; }
.wf-usage-item { display: grid; gap: 2px; min-width: 150px; padding: .55rem .8rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r); background: var(--nx-surface); }
.wf-usage-label { font-size: .7rem; color: var(--nx-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.wf-usage-value { font-size: .9375rem; font-weight: 650; }
.wf-usage-note { font-size: .7rem; color: var(--nx-muted); }
.wf-none { padding: 1rem 1.25rem; }
.wf-meter { display: block; height: 4px; border-radius: 99px; background: var(--nx-surface-3); overflow: hidden; margin-top: 3px; }
.wf-meter > span { display: block; height: 100%; background: var(--nx-accent); border-radius: 99px; }

.wf-section { margin-bottom: 1.5rem; }
.wf-section-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.wf-section-note { font-size: .8125rem; color: var(--nx-muted); }
.wf-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.wf-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; text-align: start; font: inherit; color: inherit; cursor: pointer;
    padding: 1rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg); background: var(--nx-surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.wf-tpl:hover, .wf-tpl:focus-visible { border-color: var(--nx-accent); box-shadow: var(--nx-sh-2); transform: translateY(-1px); }
.wf-tpl.is-blank { border-style: dashed; background: var(--nx-surface-2); }
.wf-tpl-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--nx-accent-soft); color: var(--nx-accent); }
.wf-tpl-name { font-weight: 650; font-size: .9375rem; letter-spacing: -.01em; }
.wf-tpl-desc { font-size: .8125rem; color: var(--nx-ink-2); line-height: 1.45; flex: 1 1 auto; }
.wf-tpl-go { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; color: var(--nx-accent); }
[dir="rtl"] .wf-tpl-go .mud-icon-root { transform: scaleX(-1); }

.wf-list { margin-bottom: 1.25rem; }
.wf-filters { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.wf-filters > button { border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); color: var(--nx-ink-2); font: inherit; font-size: .8125rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; cursor: pointer; }
.wf-filters > button.on { background: var(--nx-accent-soft); color: var(--nx-accent); border-color: transparent; }
.wf-search { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--nx-ring-strong); border-radius: 999px; padding: 0 .6rem; background: var(--nx-surface); color: var(--nx-muted); }
.wf-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: .8125rem; padding: .35rem 0; width: 150px; color: var(--nx-ink); }
.wf-empty { display: flex; gap: .75rem; align-items: center; padding: 1.5rem 1.25rem; color: var(--nx-muted); }
.wf-row { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.25rem; border-top: 1px solid var(--nx-ring); }
.wf-row:first-of-type { border-top: 0; }
.wf-row-main { display: flex; gap: .85rem; align-items: flex-start; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.wf-row-main:hover .wf-row-name { color: var(--nx-accent); }
.wf-row-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--nx-surface-3); color: var(--nx-muted); }
.wf-row-icon.is-on { background: var(--nx-accent-soft); color: var(--nx-accent); }
.wf-row-text, .wf-run-text { display: grid; gap: 2px; min-width: 0; }
.wf-row-name { font-weight: 620; overflow-wrap: anywhere; }
.wf-row-meta, .wf-row-last { font-size: .78rem; color: var(--nx-muted); overflow-wrap: anywhere; }
.wf-fails { color: var(--nx-critical); font-weight: 600; }
.wf-row-side { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.wf-run { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: start; font: inherit; color: inherit; text-decoration: none;
    padding: .7rem 1.25rem; border: 0; border-top: 1px solid var(--nx-ring); background: transparent; cursor: pointer; }
.wf-run:hover, .wf-run.is-on { background: var(--nx-surface-2); }
.wf-run-title { font-weight: 450; color: var(--nx-ink-2); margin-inline-start: .35rem; }
@media (max-width: 640px) {
    .wf-row { flex-direction: column; align-items: stretch; gap: .5rem; }
    .wf-row-side { justify-content: space-between; }
    .wf-search input { width: 110px; }
}

/* ---- the editor ---------------------------------------------------------------------------------- */
.wf-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wf-top-name { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 320px; }
.wf-top-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--nx-surface-3); color: var(--nx-muted); flex: 0 0 auto; }
.wf-top-icon.is-on { background: var(--nx-accent-soft); color: var(--nx-accent); }
.wf-top-text { min-width: 0; flex: 1 1 auto; }
.wf-name { font: inherit; font-size: 1.375rem; font-weight: 650; letter-spacing: -.02em; color: var(--nx-ink); border: 1px solid transparent; border-radius: var(--nx-r-xs);
    background: transparent; padding: .1rem .35rem; margin-inline-start: -.35rem; width: 100%; max-width: 640px; }
.wf-name:hover:not(:disabled) { border-color: var(--nx-ring-strong); }
.wf-name:focus { outline: none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.wf-top-meta { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-size: .78rem; color: var(--nx-muted); margin-top: .15rem; }
.wf-dirty.is-dirty { color: #A15C00; font-weight: 600; }
.wf-top-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.wf-problems { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem 1rem; border-radius: var(--nx-r); background: rgba(245,165,36,.12); border: 1px solid rgba(245,165,36,.35); color: #7A4B00; margin-bottom: 1rem; font-size: .8125rem; }
.wf-problems ul { margin: .25rem 0 0; padding-inline-start: 1.1rem; }
.wf-tabs { margin-bottom: 1rem; }

.wf-studio { display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; gap: 1rem; align-items: stretch; min-height: 640px; }
.wf-palette, .wf-inspector { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg); padding: .9rem; }
.wf-palette { display: flex; flex-direction: column; gap: .9rem; max-height: calc(100vh - 140px); overflow-y: auto; position: sticky; top: 76px; }
.wf-pal-hint { font-size: .75rem; color: var(--nx-muted); line-height: 1.4; }
.wf-pal-group { display: grid; gap: 4px; }
.wf-pal-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); margin-bottom: 2px; }
.wf-pal-item { --wf-c: var(--nx-accent); display: flex; align-items: center; gap: .5rem; width: 100%; text-align: start; font: inherit; font-size: .8125rem; color: var(--nx-ink);
    border: 1px solid var(--nx-ring); border-radius: 9px; background: var(--nx-surface); padding: .42rem .55rem; cursor: grab; transition: border-color .12s, background .12s; }
.wf-pal-item:hover:not(:disabled), .wf-pal-item:focus-visible { border-color: var(--wf-c); background: var(--nx-surface-2); }
.wf-pal-item:disabled { cursor: default; opacity: .6; }
.wf-pal-item.wf-k-trigger { cursor: pointer; }
.wf-pal-item.is-current { border-color: var(--wf-c); background: color-mix(in srgb, var(--wf-c) 8%, var(--nx-surface)); }
.wf-pal-icon { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; color: var(--wf-c); background: color-mix(in srgb, var(--wf-c) 12%, transparent); }
.wf-pal-label { flex: 1 1 auto; line-height: 1.25; }
.wf-pal-tick { color: var(--wf-c); display: inline-flex; }
.wf-k-trigger { --wf-c: #4F46E5; } .wf-k-condition { --wf-c: #C27A00; } .wf-k-wait { --wf-c: #0E7AB8; } .wf-k-action { --wf-c: #138A55; }

.wf-canvas-wrap { position: relative; min-width: 0; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg); background: var(--nx-surface-2); overflow: hidden; }
.wf-tools { position: absolute; z-index: 3; top: .6rem; right: .6rem; display: flex; align-items: center; gap: 2px; padding: 2px 4px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 10px; box-shadow: var(--nx-sh-2); }
.wf-zoom-pct { font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); min-width: 3em; text-align: center; font-variant-numeric: tabular-nums; }
.wf-canvas { position: relative; height: calc(100vh - 230px); min-height: 560px; overflow: auto; cursor: default;
    background-image: radial-gradient(circle, var(--nx-ring-strong) 1px, transparent 1.2px); background-size: 20px 20px; }
.wf-canvas.is-panning { cursor: grabbing; }
.wf-canvas.is-drop { outline: 2px dashed var(--nx-accent); outline-offset: -6px; }
.wf-zoom { position: relative; }
.wf-surface { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wf-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.wf-edge { pointer-events: auto; }
.wf-edge-line { fill: none; stroke: var(--nx-baseline); stroke-width: 2; }
.wf-edge-line.is-temp { stroke: var(--nx-accent); stroke-dasharray: 6 5; }
.wf-edge-hit { fill: none; stroke: transparent; stroke-width: 14; }
.wf-edge:hover .wf-edge-line { stroke: var(--nx-accent); }
.wf-arrow-head { fill: var(--nx-baseline); }
.wf-edge-x { opacity: 0; cursor: pointer; transition: opacity .12s; }
.wf-edge:hover .wf-edge-x, .wf-edge-x:focus { opacity: 1; outline: none; }
.wf-edge-x circle { fill: var(--nx-surface); stroke: var(--nx-critical); stroke-width: 1.5; }
.wf-edge-x path { stroke: var(--nx-critical); stroke-width: 1.8; stroke-linecap: round; }

.wf-node { --wf-c: var(--nx-accent); position: absolute; width: 240px; background: var(--nx-surface); border: 1px solid var(--nx-ring-strong); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05); border-top: 3px solid var(--wf-c); cursor: grab; user-select: none; touch-action: none; transition: box-shadow .15s, border-color .15s; }
.wf-node:hover { box-shadow: var(--nx-sh-2); }
.wf-node:focus-visible { outline: 3px solid var(--nx-accent); outline-offset: 2px; }
.wf-node.is-selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-c) 30%, transparent), var(--nx-sh-2); border-color: var(--wf-c); }
.wf-node.is-dragging { cursor: grabbing; box-shadow: var(--nx-sh-pop); z-index: 2; transition: none; }
.wf-node.is-target { box-shadow: 0 0 0 3px var(--nx-accent); }
.wf-node.is-problem { border-color: var(--nx-warning); }
.wf-node-head { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem 0; }
.wf-node-icon { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--wf-c); background: color-mix(in srgb, var(--wf-c) 12%, transparent); }
.wf-node-kind { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wf-c); flex: 1 1 auto; }
.wf-node-flag { display: inline-flex; color: #B26B00; }
.wf-node-flag.is-result { color: var(--nx-good); }
.wf-node.is-failed .wf-node-flag.is-result, .wf-node.is-skipped .wf-node-flag.is-result { color: #B26B00; }
.wf-node-title { font-weight: 640; font-size: .875rem; padding: .3rem .7rem 0; letter-spacing: -.005em; }
.wf-node-sum { font-size: .75rem; color: var(--nx-ink-2); padding: .15rem .7rem .55rem; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wf-ports { display: flex; justify-content: space-around; gap: .25rem; padding: 0 .4rem; margin-bottom: -13px; }
.wf-port-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.wf-port-label { font-size: .65rem; font-weight: 600; color: var(--wf-c); background: var(--nx-surface); padding: 0 .35rem; border-radius: 99px; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-port { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: crosshair; color: var(--wf-c);
    background: var(--nx-surface); border: 2px solid var(--wf-c); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .12s, background .12s; }
.wf-port:hover:not(:disabled), .wf-port:focus-visible { transform: scale(1.15); background: var(--wf-c); color: #fff; outline: none; }
.wf-port.is-used { background: var(--wf-c); color: #fff; }
.wf-port:disabled { cursor: default; opacity: .5; }

.wf-quick { position: absolute; z-index: 4; width: 230px; max-height: 360px; overflow-y: auto; background: var(--nx-surface); border: 1px solid var(--nx-ring-strong); border-radius: 12px;
    box-shadow: var(--nx-sh-pop); padding: .45rem; display: grid; gap: 2px; animation: wf-pop .14s ease-out; }
@keyframes wf-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.wf-quick-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); padding: .2rem .4rem .35rem; }
.wf-quick-item { --wf-c: var(--nx-accent); display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; font: inherit; font-size: .8125rem; color: var(--nx-ink); text-align: start; padding: .4rem .45rem; border-radius: 8px; cursor: pointer; }
.wf-quick-item .mud-icon-root { color: var(--wf-c); }
.wf-quick-item:hover, .wf-quick-item:focus-visible { background: var(--nx-surface-2); outline: none; }
.wf-quick-close { border: 0; background: transparent; font: inherit; font-size: .78rem; color: var(--nx-muted); padding: .35rem; cursor: pointer; }

.wf-inspector { max-height: calc(100vh - 140px); overflow-y: auto; position: sticky; top: 76px; }
.wf-insp-head { display: flex; gap: .65rem; align-items: center; margin-bottom: .5rem; }
.wf-insp-icon { --wf-c: var(--nx-accent); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--wf-c); background: color-mix(in srgb, var(--wf-c) 12%, transparent); flex: 0 0 auto; }
.wf-insp-icon.is-test { --wf-c: #7C3AED; }
.wf-insp-kind { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-muted); }
.wf-insp-title { font-size: 1rem; }
.wf-insp-help { font-size: .8125rem; color: var(--nx-ink-2); line-height: 1.5; margin: 0 0 1rem; }
.wf-insp-form { border: 0; padding: 0; margin: 0; min-width: 0; }
.wf-inspector .set-input { max-width: none; }
.wf-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.wf-check { display: flex; gap: .45rem; align-items: flex-start; font-size: .8125rem; margin: .2rem 0 .1rem; }
.wf-gap { margin-bottom: .75rem; }
.wf-conds { display: grid; gap: .45rem; }
.wf-cond { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .35rem; align-items: center; }
.wf-cond .set-input { font-size: .8125rem; padding: .4rem .45rem; }
.wf-x { border: 0; background: transparent; color: var(--nx-muted); cursor: pointer; border-radius: 6px; padding: .2rem; display: inline-flex; }
.wf-x:hover { color: var(--nx-critical); background: var(--nx-surface-3); }
.wf-add-link { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: transparent; color: var(--nx-accent); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; padding: .25rem 0; justify-self: start; }
.wf-branch { border: 1px solid var(--nx-ring); border-radius: 10px; padding: .6rem; margin-bottom: .6rem; background: var(--nx-surface-2); }
.wf-branch-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .35rem; margin-bottom: .5rem; }
.wf-branch-match { width: auto; }
.wf-people { display: grid; gap: .25rem; max-height: 200px; overflow-y: auto; border: 1px solid var(--nx-ring); border-radius: 8px; padding: .45rem .6rem; }
.wf-words { margin: -.4rem 0 1rem; font-size: .78rem; }
.wf-words summary { cursor: pointer; color: var(--nx-accent); font-weight: 600; }
.wf-words-list { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 .3rem; }
.wf-words code { font-family: var(--nx-mono); font-size: .72rem; background: var(--nx-surface-3); border-radius: 5px; padding: 1px 5px; }
.wf-delete-step { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; border: 0; background: transparent; color: var(--nx-critical); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; padding: .3rem 0; }
.wf-howto { margin: 0 0 .9rem; padding-inline-start: 1.1rem; display: grid; gap: .45rem; font-size: .8125rem; color: var(--nx-ink-2); line-height: 1.45; }

.wf-test-sum { margin: .9rem 0 .6rem; padding: .6rem .75rem; border-radius: 9px; font-size: .8125rem; font-weight: 550; }
.wf-test-sum.is-ok { background: rgba(46,158,107,.12); color: #1F6B47; }
.wf-test-sum.is-warn { background: rgba(245,165,36,.14); color: #7A4B00; }
.wf-timeline { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: 0; }
.wf-step { display: flex; gap: .6rem; position: relative; padding: 0 0 .85rem; }
.wf-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 11px; top: 24px; bottom: 0; width: 2px; background: var(--nx-ring-strong); }
.wf-step-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--nx-surface-3); color: var(--nx-muted); }
.wf-step.is-done .wf-step-icon, .wf-step.is-would .wf-step-icon { background: rgba(46,158,107,.15); color: #1F7A50; }
.wf-step.is-failed .wf-step-icon { background: rgba(208,59,59,.12); color: #A32222; }
.wf-step.is-skipped .wf-step-icon, .wf-step.is-waiting .wf-step-icon { background: rgba(245,165,36,.18); color: #8A5A00; }
.wf-step.is-branch .wf-step-icon { background: color-mix(in srgb, #C27A00 14%, transparent); color: #9A6100; }
.wf-step-body { min-width: 0; padding-top: 2px; }
.wf-step-title { font-size: .8125rem; font-weight: 620; }
.wf-step-out { font-weight: 500; color: var(--nx-muted); margin-inline-start: .3rem; font-size: .75rem; }
.wf-step-note { font-size: .78rem; color: var(--nx-ink-2); line-height: 1.45; overflow-wrap: anywhere; }
.wf-runs-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.wf-run-detail .wf-timeline { padding: 1rem 1.25rem 0; }
.wf-run-detail .wf-test-sum { margin: 1rem 1.25rem 0; }

@media (max-width: 1280px) { .wf-studio { grid-template-columns: 200px minmax(0, 1fr) 300px; } }
@media (max-width: 1080px) {
    .wf-studio { grid-template-columns: minmax(0, 1fr); }
    .wf-palette { position: static; max-height: none; flex-direction: row; overflow-x: auto; padding: .6rem; gap: .6rem; }
    .wf-pal-hint { display: none; }
    .wf-pal-group { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
    .wf-pal-title { margin: 0 .25rem 0 0; white-space: nowrap; }
    .wf-pal-item { white-space: nowrap; width: auto; }
    .wf-inspector { position: static; max-height: none; }
    .wf-canvas { height: 62vh; min-height: 420px; }
    .wf-runs-view { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .wf-name { font-size: 1.125rem; }
    .wf-top-actions { width: 100%; }
    .wf-top-actions .mud-button-root { flex: 1 1 auto; }
    .wf-cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .wf-cond > :nth-child(3) { grid-column: 1 / 2; }
    .wf-two { grid-template-columns: 1fr; }
    .wf-usage { width: 100%; }
    .wf-usage-item { flex: 1 1 140px; min-width: 0; }
}
html[data-theme="dark"] .wf-k-trigger { --wf-c: #A5B4FC; } html[data-theme="dark"] .wf-k-condition { --wf-c: #FBBF24; }
html[data-theme="dark"] .wf-k-wait { --wf-c: #7DD3FC; } html[data-theme="dark"] .wf-k-action { --wf-c: #6EE7B7; }
html[data-theme="dark"] .wf-port:hover:not(:disabled), html[data-theme="dark"] .wf-port.is-used { color: #10121C; }
html[data-theme="dark"] .wf-problems { background: rgba(251,191,36,.12); color: #FCD34D; border-color: rgba(251,191,36,.3); }
html[data-theme="dark"] .wf-test-sum.is-ok { background: rgba(34,197,94,.14); color: #86EFAC; }
html[data-theme="dark"] .wf-test-sum.is-warn { background: rgba(251,191,36,.14); color: #FCD34D; }
html[data-theme="dark"] .wf-dirty.is-dirty { color: #FCD34D; }
html[data-theme="dark"] .wf-step.is-done .wf-step-icon, html[data-theme="dark"] .wf-step.is-would .wf-step-icon { color: #86EFAC; }
html[data-theme="dark"] .wf-step.is-failed .wf-step-icon { color: #FCA5A5; }
html[data-theme="dark"] .wf-step.is-skipped .wf-step-icon, html[data-theme="dark"] .wf-step.is-waiting .wf-step-icon, html[data-theme="dark"] .wf-step.is-branch .wf-step-icon { color: #FCD34D; }
html[data-theme="dark"] .wf-node-flag { color: #FCD34D; }
@media (prefers-reduced-motion: reduce) { .wf-tpl, .wf-node, .wf-port, .wf-quick { transition: none; animation: none; } }

/* ---- The project plan in the customer portal (Plan, Timeline, task page) --------------------------
   Built on the share-link view (sv-*) and the back office Gantt (gantt-*), so the customer sees the same product. */
.pt-main:has(.cpl-wide) { max-width: 1180px; }
.cpl-tabs { margin-top: .25rem; }
.cpl-stats { margin-bottom: 12px; }
.cpl-stats .pt-card { margin-bottom: 0; }
.cpl-phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cpl-phase { background: #fff; border: 1px solid #E4E6F0; border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; min-width: 0; }
.cpl-phase-top { display: flex; justify-content: space-between; gap: 8px; font-size: .875rem; }
.cpl-phase-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpl-phase small { color: #4A5069; font-size: .75rem; }
.cpl-meter { display: block; height: 6px; border-radius: 999px; background: #E4E6F0; overflow: hidden; }
.cpl-meter > span { display: block; height: 100%; background: var(--nx-accent, #4338CA); border-radius: inherit; }
.cpl-filters { padding: 12px 16px; }
.cpl-filter-grid { display: grid; grid-template-columns: minmax(160px, 2fr) repeat(3, minmax(120px, 1fr)) auto auto; gap: 10px 12px; align-items: end; }
.cpl-filter-grid .pt-field { margin: 0; min-width: 0; }
.cpl-filter-grid .pt-field select, .cpl-filter-grid .pt-field input { width: 100%; min-width: 0; box-sizing: border-box; }
.cpl-overdue { margin: 0 0 10px; white-space: nowrap; }
.cpl-filter-actions { display: flex; gap: 6px; align-items: center; }
.cpl-result { font-size: .85rem; color: #4A5069; margin: 0 2px 8px; }
.cpl-list { padding: 0; overflow: hidden; }
.cpl-list h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; padding: 12px 16px; border-bottom: 1px solid #E4E6F0; background: #F7F8FC; }
.cpl-list-count { font-weight: 500; font-size: .8rem; color: #4A5069; }
.cpl-head, .cpl-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 1.5fr) minmax(0, 1.1fr) 92px; gap: 10px; align-items: center; padding: 8px 16px; }
.cpl-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #667085; font-weight: 650; padding-block: 6px; border-bottom: 1px solid #F2F3F9; }
.cpl-rows { list-style: none; margin: 0; padding: 0; }
.cpl-row { border-bottom: 1px solid #F2F3F9; font-size: .875rem; }
.cpl-row:last-child { border-bottom: 0; }
.cpl-row:hover { background: #FAFAFE; }
.cpl-row.is-sub .cpl-title { padding-inline-start: calc(var(--cpl-depth, 1) * 18px); }
.cpl-row.is-closed .cpl-title a { text-decoration: line-through; opacity: .7; }
.cpl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.cpl-title a { color: inherit; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cpl-title a:hover { text-decoration: underline; color: var(--nx-accent, #4338CA); }
.cpl-sub-mark { color: #98A2B3; }
.cpl-badge { font-size: .7rem; color: #4A5069; background: #F2F3F9; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.cpl-owner, .cpl-dates { color: #4A5069; font-size: .8125rem; overflow-wrap: anywhere; }
.cpl-late { font-weight: 600; }
.cpl-label { display: none; }
.cpl-pct { display: flex; align-items: center; gap: 6px; }
.cpl-pct .cpl-meter { flex: 1 1 auto; }
.cpl-pct small { font-variant-numeric: tabular-nums; color: #4A5069; font-size: .75rem; min-width: 32px; text-align: end; }
.cpl-pages { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 14px; font-size: .875rem; color: #4A5069; }
.cpl-crumbs { margin: 0 0 6px; font-size: .875rem; }
.cpl-comment.is-customer { border-inline-start: 3px solid var(--nx-accent, #4338CA); padding-inline-start: 10px; }
.cpl-comment-form { margin-top: 12px; }
.cpl-comment-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
/* The timeline: the back office Gantt, read-only, made to fit a phone. */
.cpl-gantt-card { padding: 0; overflow: hidden; }
.cpl-gantt { --gantt-tree-def: 260px; }
.cpl-gantt .gantt-row-name { cursor: default; }
.cpl-gantt .gantt-row-title { color: inherit; text-decoration: none; }
.cpl-gantt .gantt-row-title:hover { text-decoration: underline; }
.cpl-gantt a.gantt-bar { text-decoration: none; cursor: pointer; }
.cpl-gantt a.gantt-bar:not([href]) { cursor: default; }
.cpl-track { cursor: default; }
.cpl-ms-track { background: rgba(20,22,56,.03); }
.cpl-ms { position: absolute; top: 9px; width: 12px; height: 12px; margin-inline-start: -6px; transform: rotate(45deg); background: #7C3AED; border-radius: 2px; box-shadow: 0 0 0 2px var(--nx-surface, #fff); }
.cpl-ms.is-done { background: #16A34A; }
.cpl-ms.is-late { background: #DC2626; }
.cpl-ms-key { position: static; display: inline-block; margin: 0 4px 0 2px; width: 9px; height: 9px; }
.gantt-key-bar.is-done { background: #9FD79F; }
.gantt-key-bar.is-late { background: #E8A08A; }
@media (max-width: 760px) {
    .cpl-filter-grid { grid-template-columns: 1fr 1fr; }
    .cpl-filter-grid .pt-field:first-child { grid-column: 1 / -1; }
    .cpl-filter-actions { grid-column: 1 / -1; }
    .cpl-head { display: none; }
    .cpl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 14px; }
    .cpl-title { grid-column: 1 / -1; }
    .cpl-owner, .cpl-dates { grid-column: 1 / 2; font-size: .78rem; }
    .cpl-label { display: inline; font-weight: 600; margin-inline-end: 4px; color: #667085; }
    .cpl-status { grid-column: 2 / 3; grid-row: 2 / 3; justify-self: end; }
    .cpl-pct { grid-column: 2 / 3; grid-row: 3 / 4; min-width: 92px; }
    .cpl-gantt { --gantt-tree-def: 132px; }
}
html[data-theme="dark"] .cpl-phase { background: var(--nx-surface); border-color: var(--nx-ring); }
html[data-theme="dark"] .cpl-list h2 { background: var(--nx-surface-2); border-color: var(--nx-ring); }
html[data-theme="dark"] .cpl-row, html[data-theme="dark"] .cpl-head { border-color: var(--nx-ring); }
html[data-theme="dark"] .cpl-row:hover { background: var(--nx-surface-2); }
html[data-theme="dark"] .cpl-meter, html[data-theme="dark"] .cpl-badge { background: var(--nx-surface-3); }
html[data-theme="dark"] .cpl-owner, html[data-theme="dark"] .cpl-dates, html[data-theme="dark"] .cpl-result, html[data-theme="dark"] .cpl-list-count, html[data-theme="dark"] .cpl-phase small,
html[data-theme="dark"] .cpl-pct small, html[data-theme="dark"] .cpl-badge, html[data-theme="dark"] .cpl-pages, html[data-theme="dark"] .cpl-head, html[data-theme="dark"] .cpl-label { color: var(--nx-muted); }

/* ---- What the customer sees, in the back office (task panel, task list, comments) ---------------- */
.tp-client-hide { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.tp-client-note { margin-top: .375rem; font-size: .75rem; color: var(--nx-muted); line-height: 1.45; }
.cm-client-tick { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--nx-ink-2); white-space: nowrap; cursor: pointer; margin-inline-start: auto; }
.cm-badge { display: inline-flex; align-items: center; padding: 0 .45rem; border-radius: 999px; font-size: .6563rem; font-weight: 650; line-height: 1.6; white-space: nowrap; }
.cm-badge.is-customer { background: rgba(124,58,237,.12); color: #6D28D9; }
.cm-badge.is-client { background: rgba(22,163,74,.12); color: #15803D; }
.cm-badge.is-requester { background: rgba(37,99,235,.12); color: #1D4ED8; }
.tb-client-hidden { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: .5rem; padding: 0 .5rem; border-radius: 999px; background: var(--nx-surface-3, #EEF0F6); color: var(--nx-muted); font-size: .6875rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.tb-client-hidden .mud-icon-root { width: 14px; height: 14px; }
/* A task list's phase (#533), next to the list's name. */
.tb-list-phase { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: .5rem; padding: 0 .5rem; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--nx-surface)); color: var(--mud-palette-primary); font-size: .6875rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.tb-list-phase .mud-icon-root { width: 14px; height: 14px; }
.tb-client-hidden.is-icon { padding: 0 .25rem; margin-inline-start: .25rem; background: transparent; }
html[data-theme="dark"] .cm-badge.is-customer { background: rgba(167,139,250,.16); color: #C4B5FD; }
html[data-theme="dark"] .cm-badge.is-client { background: rgba(74,222,128,.14); color: #86EFAC; }
html[data-theme="dark"] .cm-badge.is-requester { background: rgba(96,165,250,.16); color: #93C5FD; }

/* ---- Client statuses and client requests (customer portal and the project's "Client requests" tab) ---- */
.cpl-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-inline-start: 6px; padding: 0 5px; border-radius: 999px; background: #F59E0B; color: #fff; font-size: .7rem; font-weight: 700; }
.cpl-yours { margin-inline-start: 6px; font-size: .72rem; font-weight: 600; color: var(--nx-accent, #4338CA); text-decoration: none; white-space: nowrap; }
.cpl-yours:hover { text-decoration: underline; }
.cpl-status-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid #F2F3F9; display: grid; grid-template-columns: minmax(220px, 320px) max-content; justify-content: start; gap: 4px 10px; align-items: end; }
.cpl-status-form .pt-field { margin: 0; }
.cpl-status-form select { width: 100%; }
.cpl-status-form .pt-field label { white-space: nowrap; }
.cpl-status-form .pt-help { grid-column: 1 / -1; margin: 4px 0 0; font-size: .8rem; }
.cpl-req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.cpl-req-grid .pt-field select, .cpl-req-grid .pt-field input { width: 100%; box-sizing: border-box; }
.cpl-requests textarea, .cpl-requests #cpl-req-title { width: 100%; box-sizing: border-box; }
.cpl-req { padding: 12px 0; border-top: 1px solid #F2F3F9; }
.cpl-req:first-of-type { border-top: 0; padding-top: 4px; }
.cpl-req-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cpl-req-head b { overflow-wrap: anywhere; }
.cpl-req-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.cpl-req-answer { margin: 6px 0 0; font-size: .875rem; color: #4A5069; }
.cpl-req-answer.is-ok { color: #166534; }
.cpl-req-answer.is-no { color: #991B1B; }
.set-badge.is-client { color: #15803D; border-color: rgba(22,163,74,.35); }
.ccr-row .rk-main { min-width: 0; }
.ccr-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }
.ccr-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ccr-files a { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--nx-ring); border-radius: 8px; font-size: .78rem; text-decoration: none; color: inherit; }
.ccr-files small { color: var(--nx-muted); }
.ccr-actions { display: flex; gap: 4px; flex: none; }
.ccr-form { margin-top: 10px; padding: 12px; display: grid; gap: 10px; }
.ccr-form .rk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ccr-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--nx-ink-2); }
.ccr-field .set-input { font-weight: 400; }
@media (max-width: 760px) {
    .cpl-status-form { grid-template-columns: 1fr; }
    .ccr-row { flex-wrap: wrap; }
    .ccr-actions { width: 100%; justify-content: flex-end; }
}
html[data-theme="dark"] .cpl-status-form, html[data-theme="dark"] .cpl-req { border-color: var(--nx-ring); }
html[data-theme="dark"] .cpl-req-answer { color: var(--nx-muted); }
html[data-theme="dark"] .cpl-req-answer.is-ok { color: #86EFAC; }
html[data-theme="dark"] .cpl-req-answer.is-no { color: #FCA5A5; }
html[data-theme="dark"] .set-badge.is-client { color: #86EFAC; border-color: rgba(74,222,128,.35); }
.cpl-dates.sv-late { color: #B42318; }
html[data-theme="dark"] .cpl-dates.sv-late { color: #FCA5A5; }
html[data-theme="dark"] .cpl-title a { color: var(--nx-ink); }
.cm-head .cm-badge { margin-inline-start: .25rem; margin-inline-end: auto; }
/* ---- Bulk edit on every list (#370 Z2): the shared bar, its tick boxes and the "changed N, Undo" line ---- */
.nx-bulk {
    display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
    padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; background: var(--nx-accent-soft);
    border: 1px solid var(--nx-accent-soft-2); border-radius: var(--nx-r-sm, 10px);
    position: sticky; top: 0; z-index: 5;
}
.nx-bulk .spacer { flex: 1 1 auto; }
.nx-bulk-all { background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--nx-accent); padding: 0 0.25rem; text-decoration: underline; }
.nx-bulk-select, .nx-bulk-input { max-width: 200px; min-height: 28px; }
.nx-bulk-input[type="date"] { width: 150px; }
.tb-bulk-btn.is-primary { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.tb-bulk-btn.is-primary:hover { background: var(--nx-accent-2, var(--nx-accent)); color: #fff; }
.tb-bulk-btn:disabled { opacity: .55; cursor: default; }
.set-table .w-check, .nx-table .w-check, .crm-table .w-check { width: 34px; }
.nx-bulk-check { width: 16px; height: 16px; accent-color: var(--nx-accent); cursor: pointer; vertical-align: middle; }
.set-table tr.is-selected td, .nx-table tr.is-selected td { background: var(--nx-accent-soft); }
.nx-bulk-done {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem; border-radius: var(--nx-r-sm, 10px); font-size: 0.8438rem;
    background: #ECFDF3; border: 1px solid #ABEFC6; color: #085D3A;
}
.nx-bulk-done .mud-icon-root { color: #079455; }
.nx-bulk-undo { background: #fff; border: 1px solid #ABEFC6; border-radius: 999px; padding: 0.2rem 0.75rem; font: inherit; font-size: 0.75rem; font-weight: 650; color: #085D3A; cursor: pointer; }
.nx-bulk-undo:hover { border-color: #079455; }
html[data-theme="dark"] .nx-bulk-done { background: rgba(7,148,85,.14); border-color: rgba(7,148,85,.4); color: #86EFAC; }
html[data-theme="dark"] .nx-bulk-undo { background: transparent; color: #86EFAC; border-color: rgba(7,148,85,.5); }
@media (max-width: 640px) {
    .nx-bulk { position: static; }
    .nx-bulk-select, .nx-bulk-input { max-width: none; flex: 1 1 100%; }
}

/* ---- Recycle bin (#370 Z6) ---- */
.bin-linked { margin-inline-start: 0.5rem; font-weight: 600; }
.bin-keep { margin-top: 1rem; padding: 1rem 1.25rem; }
.bin-keep h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.bin-days { width: 96px; }

/* ---- Comments on every kind of record (#370 Z5): the shared thread uses the task comment styles (cm-*); these place it ---- */
.cm-thread-card { margin: 1rem 0; padding: 1rem 1.25rem; }
.cm-thread-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: 1rem; font-weight: 650; }
.cm-thread-title .count { font-size: .75rem; font-weight: 650; padding: 1px 8px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); }
.cm-thread-hint { margin: -.5rem 0 .75rem; font-size: .8125rem; color: var(--nx-ink-2); }
.cm-thread-notice { margin: .5rem 0; padding: .5rem .75rem; border-radius: var(--nx-r-sm, 10px); background: var(--nx-accent-soft); color: var(--nx-800, var(--nx-accent)); font-size: .8125rem; }
.cm-thread-card .cm-list { margin-top: .75rem; }
.cm-thread-card.cm-in-tab { margin-top: 0; }
.cm-thread-card.cm-bare { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.cm-dialog.nx-dialog { max-width: 640px; }
.cm-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.cm-dialog-head h3 { margin: 0; }
.lv-check { flex: 0 0 auto; }
@media (max-width: 640px) { .cm-thread-card .cm-hint { display: none; } .cm-thread-card { padding: .875rem 1rem; } }
/* ---- Settings > Power BI (#299): the feed address, the keys and what each may read ---- */
.pbi-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--nx-muted); margin: .75rem 0 .25rem; }
.pbi-facts { margin: .75rem 0 .5rem; padding-left: 1.125rem; font-size: .8125rem; color: var(--nx-muted); line-height: 1.45; }
.pbi-facts li { margin-bottom: .25rem; }
.pbi-choose-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pbi-all { display: inline-flex; gap: .25rem; }
.pbi-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: .75rem; margin-top: .375rem; }
.pbi-group, .op-group { border: 1px solid var(--nx-ring); border-radius: var(--nx-r-xs, 8px); padding: .5rem .75rem .625rem; margin: 0; min-width: 0; }
.pbi-group legend, .op-group legend { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); padding: 0 .25rem; }
.pbi-group .pf-check, .op-group .pf-check, .pf-check.pbi-contacts { margin: .375rem 0; flex-wrap: nowrap; }
.pbi-group .pf-check > span, .op-group .pf-check > span, .pbi-contacts > span { min-width: 0; }
.pbi-group .pf-check b, .op-check b { font-weight: 600; }
.pbi-hint { display: block; font-size: .78rem; color: var(--nx-muted); line-height: 1.35; }
.pbi-contacts { margin: .75rem 0 .25rem; }
.pbi-revoked td { color: var(--nx-muted); }
.crm-table td.pbi-reads { white-space: normal; min-width: 14rem; max-width: 28rem; }

/* =============================================================================
   Loading placeholders ("skeletons") — Components/Shared/LoadingSkeleton.razor
   Grey shapes in the layout of the content on its way. They fade in only after
   a short pause, so a fast load never flashes them, and the shimmer stops when
   motion is reduced (device setting or the Reduce motion choice).
   ============================================================================= */
:root { --skl-base: #EBEBEF; --skl-hi: rgba(255, 255, 255, 0.7); --skl-delay: 220ms; }
html[data-theme="dark"] { --skl-base: #2A2F4D; --skl-hi: rgba(255, 255, 255, 0.07); }

.skl { display: block; width: 100%; position: relative; min-width: 0; max-width: 100%; animation: skl-in .28s ease-out var(--skl-delay) both; }
@keyframes skl-in { from { opacity: 0; } to { opacity: 1; } }
.skl-shape { min-width: 0; }

/* One grey block. The highlight sweeps across it in the reading direction (the right-to-left copy mirrors the keyframes). */
.skl-b { display: block; position: relative; overflow: hidden; background: var(--skl-base); border-radius: 6px; flex: 0 0 auto; }
.skl-b::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0, var(--skl-hi) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: skl-shimmer 1.6s ease-in-out infinite;
}
@keyframes skl-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skl-b::after { animation: none; display: none; } }
html[data-motion="reduce"] .skl-b::after { animation: none; display: none; }

.skl-line { height: 10px; max-width: 100%; border-radius: 999px; }
.skl-line.is-sm { height: 8px; }
.skl-line.is-xs { height: 7px; }
.skl-line.is-lg { height: 13px; }
.skl-line.is-xl { height: 18px; }
.skl-dot { width: 22px; height: 22px; border-radius: 50%; }
.skl-dot.is-sm { width: 18px; height: 18px; }
.skl-check { width: 16px; height: 16px; border-radius: 4px; }
.skl-pill { width: 64px; height: 20px; border-radius: 999px; }
.skl-pill.is-sm { width: 44px; height: 16px; }
.skl-count { width: 22px; height: 16px; border-radius: 999px; }
.skl-chip { width: 28px; height: 28px; border-radius: 8px; }
.skl-btn { width: 76px; height: 40px; border-radius: 10px; }
.skl-end { margin-inline-start: auto; }
.skl-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }

/* Page header and tabs (project page). */
.skl-hero { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; margin-bottom: 1rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg); }
.skl-hero .skl-col { gap: 10px; }
.skl-ring { width: 46px; height: 46px; border-radius: 50%; }
.skl-tabs { display: flex; gap: 1.5rem; align-items: center; height: 42px; margin-bottom: 1rem; border-bottom: 1px solid var(--nx-ring); overflow: hidden; }
.skl-tabs .skl-line { width: 64px; }

/* Rows: a list or table inside one card. */
.skl-frame { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); overflow: hidden; }
.skl-head { display: flex; align-items: center; gap: 1rem; height: 38px; padding: 0 1rem; background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring); }
.skl-row { display: flex; align-items: center; gap: .875rem; min-height: 52px; padding: .5rem 1rem; border-bottom: 1px solid var(--nx-ring); }
.skl-row:last-child { border-bottom: 0; }
.skl-row .skl-col { gap: 7px; }
.skl-mid { width: 12%; min-width: 48px; }

/* Stack: separate row cards (My day). */
.skl-item { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--nx-ring); border-radius: 12px; background: var(--nx-surface); }

/* Cards: a gallery grid. */
.skl-grid { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.skl-card { display: flex; flex-direction: column; gap: 9px; padding: .75rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); min-width: 0; }
.skl-media { width: 100%; height: 112px; border-radius: 8px; margin-bottom: 3px; }
.skl-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* Tiles: dashboard numbers and a chart, laid out like .nx-stats. */
.skl-tiles { display: grid; gap: .75rem; margin-bottom: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 212px), 1fr)); }
.skl-tile { padding: 1rem 1.125rem 1.0625rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); min-width: 0; }
.skl-tile-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.skl-value { height: 26px; border-radius: 7px; margin-bottom: .625rem; }
.skl-panel { display: flex; flex-direction: column; gap: 8px; padding: 1rem 1.125rem 1.125rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); }
.skl-panel.is-list { gap: 6px; }
.skl-panel.is-list .skl-line.is-sm { margin-bottom: .375rem; }
.skl-panel .skl-row { padding-inline: 0; min-height: 46px; }
.skl-chart { display: flex; align-items: flex-end; gap: clamp(6px, 2%, 18px); height: 180px; margin-top: .75rem; padding-top: .5rem; border-bottom: 1px solid var(--nx-ring); }
.skl-bar { flex: 1 1 0; min-width: 0; border-radius: 5px 5px 0 0; }

/* Board: columns of cards (task board, pipelines). Columns past the screen edge are cut off, never scrolled. */
.skl-board { display: flex; gap: .75rem; align-items: flex-start; overflow: hidden; }
.skl-lane { flex: 0 0 min(260px, 82%); display: flex; flex-direction: column; gap: .5rem; padding: .625rem; min-height: 240px; background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: 12px; }
.skl-lane-head { display: flex; align-items: center; gap: .5rem; padding: .25rem .125rem .375rem; }
.skl-tcard { display: flex; flex-direction: column; gap: 8px; padding: .75rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 10px; }

/* Timeline: names beside bars on a time grid (Gantt). Time runs the same way in every language, like the real chart. */
.skl-tl { display: flex; min-width: 0; }
.skl-tl-names { flex: 0 0 260px; border-inline-end: 1px solid var(--nx-ring); }
.skl-tl-time { flex: 1 1 auto; min-width: 0; direction: ltr; }
.skl-tl-hd { display: flex; align-items: center; gap: 0; height: 40px; padding: 0 1rem; background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-ring); }
.skl-tl-time .skl-tl-hd { padding: 0; justify-content: space-around; }
.skl-tl-time .skl-tl-hd .skl-line { width: 9%; }
.skl-tl-name { display: flex; align-items: center; height: 34px; padding: 0 1rem; border-bottom: 1px solid var(--nx-ring); }
.skl-tl-track { position: relative; height: 34px; border-bottom: 1px solid var(--nx-ring); }
.skl-tl-bar { position: absolute; top: 9px; height: 16px; border-radius: 5px; }

@media (max-width: 600px) {
    .skl-hide-sm { display: none; }
    .skl-row { gap: .625rem; padding: .5rem .75rem; }
    .skl-head { padding: 0 .75rem; }
    .skl-tl-names { flex-basis: 112px; }
    .skl-tl-name, .skl-tl-names .skl-tl-hd { padding: 0 .625rem; }
    .skl-chart { height: 140px; }
}

/* ---- Privacy requests (#301) ------------------------------------------------------------------------- */
.pr-search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.pr-search .pr-query { flex: 2 1 16rem; min-width: 0; }
.pr-search .pr-for { flex: 1 1 12rem; min-width: 0; }
.pr-kinds { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.pr-kind { display: inline-flex; gap: .3rem; align-items: baseline; padding: .2rem .65rem; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: .8125rem; }
.pr-kind strong { color: var(--nx-ink); }
.pr-table td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.pr-table td:nth-child(2) { min-width: 8.5rem; }
.pr-table td:nth-child(3) { min-width: 14rem; }
.pr-table td:last-child { min-width: 16rem; max-width: 30rem; }
.pr-table td .pf-hint { margin-top: .2rem; }
.pr-table tr.is-chosen td { background: var(--nx-accent-soft); }
.pr-table .set-badge { margin-inline-start: .4rem; }
.set-badge.pr-maybe { background: rgba(247, 144, 9, .14); color: #B54708; }
html[data-theme="dark"] .set-badge.pr-maybe { color: #FEC84B; }
.pr-actions .set-actions { margin-top: .25rem; }
.pr-erase { margin-top: 1rem; padding: 1rem 1.125rem; border-radius: 12px; border: 1px solid #FECDCA; background: #FEF3F2; color: #7A271A; }
.pr-erase h3 { margin: 0 0 .5rem; font-size: 1rem; }
.pr-erase .mud-typography-body2 { color: inherit; margin: 0 0 .6rem; line-height: 1.6; }
.pr-erase .set-field label { display: block; margin: .25rem 0 .35rem; line-height: 1.6; }
.pr-erase .set-input { background: #fff; }
.pr-erase-sum { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .35rem; font-size: .875rem; }
.pr-erase-sum .dk-pill { min-width: 2rem; text-align: center; margin-inline-end: .35rem; }
html[data-theme="dark"] .pr-erase { background: rgba(240, 68, 56, .12); border-color: rgba(240, 68, 56, .35); color: #FECDCA; }
html[data-theme="dark"] .pr-erase .set-input { background: var(--nx-surface-2); }
.pr-outcome { white-space: pre-wrap; font-size: .875rem; color: var(--nx-ink-2); background: var(--nx-surface-3); border-radius: 8px; padding: .5rem .75rem; }
.pr-open-only { display: inline-flex; gap: .4rem; align-items: center; font-size: .875rem; color: var(--nx-ink-2); }
#cp-consent .ct-activity { margin-top: .5rem; }
@media (max-width: 640px) {
  .pr-table thead th:not(.w-check) { display: none; }
  .pr-table, .pr-table tbody { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; }
  .pr-table tbody td * { white-space: normal !important; }
  .pr-table thead tr { display: block; }
  .pr-table tbody tr { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: .5rem 0; border-bottom: 1px solid var(--nx-ring); }
  .pr-table tbody td { display: block; border: 0 !important; padding: .15rem .5rem; min-width: 0 !important; max-width: none !important; }
  .pr-table tbody td.w-check { grid-row: span 3; padding-top: .3rem; }
  .pr-table tbody td:nth-child(2) { font-size: .75rem; font-weight: 600; color: var(--nx-muted); }
}

/* ---- Calendar and email sync (#303): the person's own Google and Microsoft 365 connections ---- */
.sy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 1rem; align-items: start; }
.sy-grid .crm-section { margin-bottom: 0; }
.sy-title { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.sy-title .crm-sub { overflow-wrap: anywhere; }
.sy-logo { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 750; font-size: 1rem; color: #fff; }
.sy-logo.is-google { background: linear-gradient(135deg, #4285F4, #34A853); }
.sy-logo.is-microsoft { background: linear-gradient(135deg, #0078D4, #50A0E8); }
.sy-perms { margin: .25rem 0 .75rem; padding-inline-start: 1.25rem; font-size: .875rem; color: var(--nx-ink-2); display: grid; gap: .25rem; }
.sy-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .25rem 0 .75rem; }
.sy-facts > div { background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: 10px; padding: .5rem .625rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sy-facts span { font-size: .75rem; color: var(--nx-muted); }
.sy-facts b { font-size: .875rem; font-weight: 650; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.sy-problem { display: flex; flex-direction: column; gap: .25rem; border: 1px solid #FEC84B; background: #FFFAEB; color: #93370D; border-radius: 10px; padding: .625rem .75rem; margin-bottom: .75rem; font-size: .875rem; overflow-wrap: anywhere; }
.sy-problem.is-bad { border-color: #FDA29B; background: #FEF3F2; color: #B42318; }
html[data-theme="dark"] .sy-problem { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .4); color: #FCD34D; }
html[data-theme="dark"] .sy-problem.is-bad { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); color: #FCA5A5; }
.sy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: flex-start; }
.sy-confirm { flex: 1 1 100%; font-size: .8125rem; color: var(--nx-ink-2); }
.sy-settings, .sy-log { border-top: 1px solid var(--nx-ring); margin-top: .75rem; padding-top: .5rem; }
.sy-settings > summary, .sy-log > summary { cursor: pointer; font-weight: 650; font-size: .875rem; padding: .25rem 0; color: var(--nx-ink); }
.sy-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: .75rem 1.25rem; margin: .5rem 0 .75rem; }
.sy-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .375rem; }
.sy-group legend { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nx-muted); margin-bottom: .25rem; padding: 0; }
.sy-sub { font-size: .8125rem; font-weight: 650; color: var(--nx-ink-2); margin-top: .375rem; }
.sy-group .set-field { margin: .25rem 0; }
.sy-group .pf-check { flex-wrap: nowrap; }
.sy-group .pf-check > span { min-width: 0; }
.sy-cal-now { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .875rem; }
.sy-log-list { list-style: none; margin: .375rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .8125rem; }
.sy-log-list li { display: flex; gap: .625rem; padding: .375rem .5rem; border-radius: 8px; background: var(--nx-surface-2); border-inline-start: 3px solid var(--nx-ring-strong); overflow-wrap: anywhere; }
.sy-log-list li.is-conflict { border-inline-start-color: #F79009; }
.sy-log-list li.is-error { border-inline-start-color: #F04438; }
.sy-log-list li.is-received, .sy-log-list li.is-email { border-inline-start-color: #17B26A; }
.sy-log-list li.is-sent { border-inline-start-color: #6172F3; }
.sy-log-when { flex: 0 0 auto; color: var(--nx-muted); font-variant-numeric: tabular-nums; }
.sy-foot { margin-top: 1rem; }

/* Emails on a lead, customer or deal: which way it went, and whether it came from a mailbox. */
.se-subject { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.se-dir { opacity: .7; }
.se-in .se-dir { color: #17B26A; opacity: 1; }
.se-badge { font-weight: 600; }
/* =============================================================================
   Online invoice payment (#343) — Settings > Online payments, the invoice's Online payment card,
   and "Pay now" in the customer portal and on the invoice's online page (PortalPayBox).
   ============================================================================= */
.op-badges { display: inline-flex; gap: .375rem; flex-wrap: wrap; }
.op-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .375rem 1rem; margin: 0 0 .75rem; font-size: .875rem; }
.op-facts dt { color: var(--nx-muted); font-weight: 600; font-size: .75rem; padding-top: .1rem; }
.op-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.op-facts .crm-sub { display: block; }
.op-steps { margin: 0 0 1rem; padding-inline-start: 1.25rem; font-size: .875rem; line-height: 1.5; }
.op-steps li { margin-bottom: .25rem; }
.op-label { display: block; font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); margin: .75rem 0 .375rem; }
.op-events { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.op-events code { font-size: .78rem; background: var(--nx-surface-2, #F4F5FA); border: 1px solid var(--nx-ring); border-radius: 6px; padding: .15rem .45rem; overflow-wrap: anywhere; }
.op-hook-field { margin-top: .5rem; }
.op-group { margin: 0 0 1rem; }
.op-check { margin: .375rem 0; }
.op-narrow .set-input { max-width: 180px; }
.op-nowrap { white-space: nowrap; }
.op-warn { color: #B54708; }
html[data-theme="dark"] .op-warn { color: #FDB022; }
.op-confirm { margin-inline-end: auto; align-self: center; }
.op-received { font-size: .875rem; font-weight: 600; margin: .25rem 0 .75rem; }
.op-table td { vertical-align: top; }
/* Stripe payouts: the lines of an opened payout sit under it, a step in. */
.op-payout-lines > td { background: var(--nx-surface-2, #F4F5FA); padding: .5rem .75rem .75rem; }
.op-payout-lines .crm-table { margin: 0; font-size: .82rem; }
html[data-theme="dark"] .op-payout-lines > td { background: rgba(255, 255, 255, 0.03); }
@media (max-width: 600px) {
  .op-facts { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
  .op-facts dd { margin-bottom: .5rem; }
  .sl-copy { flex-wrap: wrap; }
  .op-badges { width: 100%; }
}
.pt-payform { margin: 0 0 .75rem; }
.pt-payamount { max-width: 360px; }
#invoice-received { display: block; margin: .125rem 0 0; }
.pt-paynow { min-height: 48px; padding: 0 22px; font-size: 1rem; width: 100%; max-width: 360px; }
.pt-secure { margin-top: .5rem; }
.pt-payother { margin: 1rem 0 .375rem; font-size: .95rem; }
.pt-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1rem; }
.pt-parties p { margin: .25rem 0 0; }

/* ---- Accounting connection: QuickBooks and Xero (#305) ------------------------------------------------- */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.acc-card { padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .625rem; min-width: 0; }
.acc-head { display: flex; align-items: center; gap: .75rem; }
.acc-name { flex: 1 1 auto; min-width: 0; }
.acc-name .crm-sub { overflow-wrap: anywhere; }
.acc-logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: #fff; flex: 0 0 auto; letter-spacing: -.02em; }
.acc-logo.is-quickbooks { background: #2CA01C; }
.acc-logo.is-xero { background: #0B7FAB; }
.acc-card .pf-hint { margin: 0; }
.acc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem .75rem; margin: 0; }
.acc-facts dt { font-size: .6875rem; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.acc-facts dd { margin: 0; font-size: .875rem; }
.acc-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.acc-counts .crm-kpi { text-decoration: none; color: inherit; transition: border-color .15s ease; }
.acc-counts .crm-kpi:hover { border-color: var(--nx-accent); }
.acc-counts .crm-kpi.is-bad strong { color: #B42318; }
.acc-problem { display: flex; gap: .375rem; align-items: flex-start; font-size: .8125rem; color: #B42318; background: rgba(208, 59, 59, .06); border-radius: 8px; padding: .5rem .625rem; overflow-wrap: anywhere; }
.acc-actions { flex-wrap: wrap; justify-content: flex-start; margin-top: auto; }
.acc-switches { display: flex; flex-direction: column; gap: .375rem; margin: .25rem 0 1rem; }
.acc-subtitle { margin-top: .5rem; }
.acc-tax-table select.set-input { min-width: 220px; }
.acc-suggested { color: var(--nx-accent); }
.acc-company { display: flex; flex-direction: column; gap: .375rem; }
.acc-company select { max-width: 360px; }
.acc-log-spacer { flex: 1 1 auto; }
.acc-log-table td.acc-log-error { white-space: normal; min-width: 220px; max-width: 420px; overflow-wrap: anywhere; }
.acc-log-table td:nth-child(2) { white-space: normal; min-width: 200px; }
html[data-theme="dark"] .acc-problem { color: #FCA5A5; background: rgba(248, 113, 113, .10); }
html[data-theme="dark"] .acc-counts .crm-kpi.is-bad strong { color: #FCA5A5; }
.acc-switches .pf-check { flex-wrap: nowrap; }
.acc-switches .pf-check > span { min-width: 0; }
@media (max-width: 600px) {
  .acc-card { padding: 1rem; }
  /* The tax matches stack on a phone: the Kaam360 rate, then its match underneath, full width. */
  .acc-tax-table thead { display: none; }
  .acc-tax-table, .acc-tax-table tbody, .acc-tax-table tr, .acc-tax-table td { display: block; width: 100%; }
  .acc-tax-table td { white-space: normal; border: 0; padding: .25rem 0; }
  .acc-tax-table tr { border-bottom: 1px solid var(--nx-ring); padding: .5rem 0; }
  .acc-tax-table select.set-input { min-width: 0; width: 100%; }
}

/* ---- Several pipelines (#360 C1) ------------------------------------------------------------------- */
.pl-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 0.75rem; scrollbar-width: thin; }
.pl-tabs .tp-tab.is-retired { opacity: .6; }
.pl-head-card { margin-bottom: 0.75rem; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; padding: 0.875rem 1.125rem; }
.pl-head-name { font-weight: 650; font-size: 1rem; color: var(--nx-ink); }
.pl-roles { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.375rem; }
.pl-lock { display: inline-flex; color: var(--nx-muted); }
.pl-needs { color: var(--nx-ink-2); font-size: 0.8125rem; }
.crm-pipe-pick { min-width: 10rem; font-weight: 600; }
.crm-pipe-name { color: var(--nx-muted); }
.crm-older-note { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--nx-muted); }

/* ---- Call logging (#360 C6) ------------------------------------------------------------------------ */
.crm-section-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.call-bar { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.call-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border: 1px solid var(--nx-ring); border-radius: 999px; background: var(--nx-surface); color: var(--nx-ink-2); font-size: 0.8125rem; text-decoration: none; max-width: 100%; }
.call-chip:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.call-chip-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10rem; }
.call-chip-num { color: var(--nx-muted); }
.call-results { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.25rem 0 0.875rem; }
.call-result { border: 1px solid var(--nx-ring); background: var(--nx-surface); color: var(--nx-ink-2); border-radius: 999px; padding: 0.3125rem 0.75rem; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.call-result:hover { border-color: var(--nx-accent); }
.call-result.is-on { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; font-weight: 600; }
.call-pill { display: inline-block; margin-left: 0.375rem; font-size: 0.6875rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); }
.call-pill.is-connected { background: rgba(22,163,74,.12); color: #15803D; }
.call-pill.is-noanswer, .call-pill.is-busy, .call-pill.is-wrongnumber { background: rgba(220,38,38,.10); color: #B91C1C; }
.call-pill.is-voicemail, .call-pill.is-callbacklater { background: rgba(245,158,11,.14); color: #B45309; }
html[data-theme="dark"] .call-pill.is-connected { color: #86EFAC; }
html[data-theme="dark"] .call-pill.is-noanswer, html[data-theme="dark"] .call-pill.is-busy, html[data-theme="dark"] .call-pill.is-wrongnumber { color: #FCA5A5; }
html[data-theme="dark"] .call-pill.is-voicemail, html[data-theme="dark"] .call-pill.is-callbacklater { color: #FCD34D; }
.call-rec { display: inline-flex; vertical-align: middle; margin-left: 0.25rem; color: var(--nx-accent); }
@media (max-width: 600px) { .call-chip-num { display: none; } }
.crm-section-head:has(.crm-section-tools) { flex-wrap: wrap; }
@media (max-width: 600px) { .crm-section-tools { width: 100%; } .call-chip-who { max-width: 8rem; } }

/* ---- Forecast (#360 C4), territories and company family (#360 C3) ---------------------------------- */
.fc-kpis .crm-kpi small { display: block; font-size: 0.75rem; margin-top: 0.125rem; }
.fc-ok { color: #15803D; }
html[data-theme="dark"] .fc-ok { color: #86EFAC; }
.fc-bar { position: relative; display: flex; width: 100%; box-sizing: border-box; height: 10px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; margin: 0.25rem 0 1rem; }
.fc-bar i { display: block; height: 100%; }
.fc-bar i.fc-closed, .fc-cat.is-closed { background: #16A34A; }
.fc-bar i.fc-commit, .fc-cat.is-commit { background: #4F46E5; }
.fc-bar i.fc-best, .fc-cat.is-bestcase { background: #A5B4FC; }
.fc-bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--nx-ink); }
.fc-table tr.fc-team td { font-weight: 650; background: var(--nx-surface-2); }
.fc-name { display: inline-block; }
.fc-adjusted { color: var(--nx-accent); font-weight: 650; }
.fc-cat { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: #fff; background: var(--nx-muted); }
.fc-cat.is-bestcase { color: #1E1B4B; }
.fc-cat.is-pipeline { background: var(--nx-surface-3); color: var(--nx-ink-2); }
.fc-cat.is-omitted { background: transparent; color: var(--nx-muted); border: 1px dashed var(--nx-ring); }
.fc-cat-pick { min-width: 9rem; padding-block: 0.25rem; }
.fc-acc { display: inline-block; width: 6rem; height: 8px; border-radius: 999px; background: var(--nx-surface-3); vertical-align: middle; overflow: hidden; }
.fc-acc i { display: block; height: 100%; background: var(--nx-accent); }
.fc-hist-title { margin-top: 0.75rem; }
.fc-history { max-height: 12rem; overflow-y: auto; }
.tr-range { display: flex; align-items: center; gap: 0.5rem; }
.tr-range .set-input { min-width: 0; }
.tr-rules { color: var(--nx-ink-2); font-size: 0.8125rem; max-width: 22rem; }
.tr-boss { min-width: 10rem; max-width: 18rem; }
.co-family-parent { margin-bottom: 0.5rem; }
.co-family-kpis { margin: 0.25rem 0 0.25rem; }
#fc-period { min-width: 14rem; }

/* ---- Referral partners (#360 C5) ------------------------------------------------------------------- */
.nx-dialog.pt-statement, .nx-dialog-backdrop + .nx-dialog.pt-statement { width: min(52rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 3rem); overflow-y: auto; }
.pt-statement .pt-sub { margin-top: 1rem; }
.pt-link, .pt-pay { border: 1px solid var(--nx-ring); border-radius: 10px; padding: 0.75rem 0.875rem; margin-top: 0.75rem; }
.pt-link-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.25rem; }
.pt-link-actions { justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.pt-leads { max-height: 16rem; overflow-y: auto; }
.pp-h { font-size: 1.05rem; margin: 0 0 0.75rem; }

/* ---- Sales sequences (#360 C2) --------------------------------------------------------------------- */
.sq-steps-title { margin-top: 1rem; }
.sq-steps { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.sq-step { border: 1px solid var(--nx-ring); border-radius: 10px; padding: 0.625rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; background: var(--nx-surface); }
.sq-step-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
#rel-sequences .crm-section-tools .set-input { width: auto; max-width: 16rem; }
@media (max-width: 600px) {
  #rel-sequences .crm-section-tools .set-input { flex: 1 1 100%; max-width: none; }
  #rel-sequences .pm-row { flex-wrap: wrap; }
  #rel-sequences .pm-row .sx-grow { flex: 1 1 calc(100% - 2.5rem); min-width: 0; overflow-wrap: anywhere; }
}
.sq-step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--nx-accent-soft-2); color: var(--nx-800); font-size: 0.75rem; font-weight: 700; flex: none; }
.sq-kind { width: auto; min-width: 9rem; }
.sq-wait { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--nx-ink-2); }
.sq-wait .set-input { width: 4.5rem; }
.sq-pill { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); white-space: nowrap; }
.sq-sub { margin-top: 0.75rem; }
.sq-status { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); white-space: nowrap; }
.sq-status.is-active { background: var(--nx-accent-soft-2); color: var(--nx-800); }
.sq-status.is-finished { background: rgba(22,163,74,.12); color: #15803D; }
html[data-theme="dark"] .sq-status.is-finished { color: #86EFAC; }
html[data-theme="dark"] .sq-status.is-active, html[data-theme="dark"] .sq-step-n { color: #C7C8FE; }

/* ---- Customer onboarding playbooks (#342): the sales sequences' steps and pills, the shared progress bar, and a late colour ---------- */
.sq-status.is-late { background: rgba(220,38,38,.12); color: #B42318; }
html[data-theme="dark"] .sq-status.is-late { color: #FCA5A5; }
.pb-run + .pb-run { border-top: 1px solid var(--nx-ring); margin-top: 0.75rem; padding-top: 0.75rem; }
.pb-run .nx-bar-row { margin: 0.375rem 0; }
.pb-problem { color: #B42318; }
html[data-theme="dark"] .pb-problem { color: #FCA5A5; }
.pb-owner { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pb-owner .set-input, #onboarding .crm-section-tools .set-input { width: auto; max-width: 16rem; }
.pb-deps { width: 6rem !important; }
@media (max-width: 600px) {
  #onboarding .crm-section-tools .set-input, .pb-owner .set-input { flex: 1 1 100%; max-width: none; }
  #onboarding .pm-row, #onboarding .crm-section-head { flex-wrap: wrap; }
  #onboarding .pm-row .sx-grow { flex: 1 1 calc(100% - 4rem); min-width: 0; overflow-wrap: anywhere; }
}

/* =============================================================================
   My dashboards (#340): a 12-column grid of widget cards. Widths snap to quarters,
   thirds, halves, two thirds and the full width; heights to whole rows. Two columns
   on a tablet, one on a phone. Data marks use the indigo ordinal ramp only, with
   their own steps in dark mode; status colours never appear as a series.
   ============================================================================= */
:root { --dw-row: 148px; --dw-s0: #C9CDDE; --dw-s1: var(--nx-ord-4); --dw-s2: var(--nx-ord-3); --dw-s3: var(--nx-ord-2); --dw-s4: var(--nx-ord-1); --dw-line: var(--nx-ord-3); --dw-fill: rgba(129, 140, 248, .16); }
html[data-theme="dark"] { --dw-s0: #444B72; --dw-s1: #C7D2FE; --dw-s2: #A5B4FC; --dw-s3: #818CF8; --dw-s4: #6366F1; --dw-line: #A5B4FC; --dw-fill: rgba(129, 140, 248, .22); }

.dw-page-head .dw-head-text { min-width: 0; }
.dw-crumb { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .75rem; }
.dw-crumb a { color: var(--nx-muted); text-decoration: none; }
.dw-crumb a:hover { color: var(--nx-accent); text-decoration: underline; }
.dw-switch { font: inherit; font-size: .75rem; color: var(--nx-ink-2); background: var(--nx-surface); border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); padding: 2px 6px; max-width: 240px; }
.dw-home-pill { display: inline-block; margin-inline-start: .5rem; padding: 1px 8px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-700); font-size: .6875rem; font-weight: 600; vertical-align: middle; }
html[data-theme="dark"] .dw-home-pill { background: rgba(129, 140, 248, .18); color: #C7D2FE; }
.dw-filters { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); padding: .75rem .875rem; }
.dw-filters .sx-field .set-input { min-width: 140px; max-width: 220px; }
.dw-arrange-hint { font-size: .8125rem; color: var(--nx-ink-2); background: var(--nx-accent-soft); border-radius: var(--nx-r-sm); padding: .5rem .75rem; margin-bottom: .75rem; }
html[data-theme="dark"] .dw-arrange-hint { background: rgba(129, 140, 248, .14); }

.dw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--dw-row); grid-auto-flow: row dense; gap: 1rem; }
.dw-card { grid-column: span 4; grid-row: span 2; min-width: 0; display: flex; flex-direction: column; position: relative;
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); padding: .75rem 1rem .875rem; overflow: hidden; }
.dw-w3 { grid-column: span 3; } .dw-w4 { grid-column: span 4; } .dw-w6 { grid-column: span 6; } .dw-w8 { grid-column: span 8; } .dw-w12 { grid-column: span 12; }
.dw-h1 { grid-row: span 1; } .dw-h2 { grid-row: span 2; } .dw-h3 { grid-row: span 3; } .dw-h4 { grid-row: span 4; }
.dw-card.is-editing { border-style: dashed; border-color: var(--nx-ring-strong); cursor: grab; }
.dw-card.is-editing:active { cursor: grabbing; }
.dw-card.is-resizing { outline: 2px solid var(--nx-accent); outline-offset: 2px; z-index: 2; }
.dw-head { display: flex; align-items: center; gap: .375rem; min-height: 28px; margin-bottom: .375rem; }
.dw-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .875rem; font-weight: 640; letter-spacing: -.01em; color: var(--nx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-grip { color: var(--nx-muted); display: inline-flex; }
.dw-tools { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.dw-fresh { font-size: .6875rem; color: var(--nx-muted); white-space: nowrap; }
.dw-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.dw-body > .pm-empty { margin: auto 0; }
.dw-skl { flex: 1 1 auto; }
.dw-more { font-size: .75rem; color: var(--nx-muted); margin-top: .375rem; text-align: end; }
.dw-problem { margin: auto 0; display: flex; align-items: center; gap: .5rem; justify-content: center; text-align: center; color: var(--nx-muted); font-size: .8125rem; padding: .75rem; }
.dw-problem.is-locked { color: var(--nx-ink-2); }

/* number tile */
.dw-num { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: .1875rem; flex: 1 1 auto; border-radius: var(--nx-r-sm); }
.dw-num:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.dw-num-value { font-size: 1.875rem; font-weight: 660; letter-spacing: -.03em; line-height: 1.05; color: var(--nx-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dw-num-value small { font-size: .875rem; font-weight: 520; color: var(--nx-muted); letter-spacing: 0; }
.dw-num-value .dw-cur { margin-inline-start: .3em; }
.dw-target { display: flex; align-items: center; gap: .5rem; margin-top: .125rem; }
.dw-target .sx-progress { flex: 1 1 auto; margin: 0; height: 6px; }
.dw-target-text { font-size: .6875rem; color: var(--nx-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* bars and leaderboard */
.dw-bars { list-style: none; margin: 0; padding: 0; gap: .375rem; }
.dw-bar-li { margin: 0; }
.dw-bar-row { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) auto; align-items: center; gap: .625rem; font-size: .8125rem; padding: 3px 4px; border-radius: var(--nx-r-xs); }
.dw-bar-row:hover:not(:disabled) { background: var(--nx-surface-2); }
.dw-bar-row:focus-visible { outline: 2px solid var(--nx-accent); }
.dw-bar-row:disabled { cursor: default; }
.dw-bar-row .sx-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-bar-fill { background: var(--dw-s3); }
.dw-bars.is-ranked .dw-bar-li:first-child .dw-bar-fill { background: var(--dw-s2); }
.dw-rank { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-inline-end: .375rem; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); font-size: .6875rem; font-weight: 650; }

/* line and area */
.dw-line { position: relative; flex: 1 1 auto; min-height: 120px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 20px; column-gap: .5rem; padding-top: 6px; }
.dw-line-axis { position: relative; grid-row: 1; font-size: .6875rem; color: var(--nx-muted); min-width: 34px; font-variant-numeric: tabular-nums; }
.dw-line-axis span { position: absolute; inset-inline-end: 0; transform: translateY(-50%); white-space: nowrap; }
.dw-line-plot { position: relative; grid-row: 1; grid-column: 2; }
.dw-line-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dw-grid-line { stroke: var(--nx-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dw-base-line { stroke: var(--nx-baseline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dw-stroke { fill: none; stroke: var(--dw-line); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.dw-area { fill: var(--dw-fill); stroke: none; }
.dw-pt { all: unset; position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); cursor: pointer; display: grid; place-items: center; }
.dw-pt i { width: 8px; height: 8px; border-radius: 999px; background: var(--dw-line); box-shadow: 0 0 0 2px var(--nx-surface); opacity: 0; transition: opacity .12s ease; }
.dw-pt:hover i, .dw-pt.is-last i { opacity: 1; }
html[dir="rtl"] .dw-pt, html[dir="rtl"] .dw-pt-label { transform: translate(50%, -50%); }
.dw-pt-label { position: absolute; transform: translate(-50%, -150%); font-size: .6875rem; font-weight: 650; color: var(--nx-ink); white-space: nowrap; pointer-events: none; }
.dw-line-x { position: relative; grid-row: 2; grid-column: 2; font-size: .6875rem; color: var(--nx-muted); }
.dw-line-x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
html[dir="rtl"] .dw-line-x span { transform: translateX(50%); }

/* donut */
.dw-donut { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); align-items: center; gap: 1rem; flex: 1 1 auto; }
.dw-donut-ring { position: relative; aspect-ratio: 1; max-height: 100%; }
.dw-donut-ring svg { width: 100%; height: 100%; transform: rotate(0deg); }
.dw-donut-track { fill: none; stroke: var(--nx-surface-3); stroke-width: 6; }
.dw-slice { fill: none; stroke-width: 6; }
.dw-slice.dw-s0, .dw-sw.dw-s0 { stroke: var(--dw-s0); background: var(--dw-s0); }
.dw-slice.dw-s1, .dw-sw.dw-s1 { stroke: var(--dw-s1); background: var(--dw-s1); }
.dw-slice.dw-s2, .dw-sw.dw-s2 { stroke: var(--dw-s2); background: var(--dw-s2); }
.dw-slice.dw-s3, .dw-sw.dw-s3 { stroke: var(--dw-s3); background: var(--dw-s3); }
.dw-slice.dw-s4, .dw-sw.dw-s4 { stroke: var(--dw-s4); background: var(--dw-s4); }
.dw-donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dw-donut-mid b { font-size: 1.125rem; font-weight: 660; color: var(--nx-ink); }
.dw-donut-mid span { font-size: .6875rem; color: var(--nx-muted); }
.dw-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.dw-legend button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.2em; align-items: center; gap: .5rem; font-size: .8125rem; padding: 3px 4px; border-radius: var(--nx-r-xs); }
.dw-legend button:hover:not(:disabled) { background: var(--nx-surface-2); }
.dw-legend button:disabled { cursor: default; }
.dw-sw { width: 10px; height: 10px; border-radius: 3px; }
.dw-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-ink); }
.dw-legend-num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--nx-ink); }
.dw-legend-pct { text-align: end; color: var(--nx-muted); font-variant-numeric: tabular-nums; }

/* funnel */
.dw-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.dw-funnel-row { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(70px, 26%) minmax(0, 1fr) auto 3em; align-items: center; gap: .625rem; font-size: .8125rem; padding: 3px 4px; border-radius: var(--nx-r-xs); }
.dw-funnel-row:hover { background: var(--nx-surface-2); }
.dw-funnel-row:focus-visible { outline: 2px solid var(--nx-accent); }
.dw-funnel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-ink); }
.dw-funnel-track { display: flex; justify-content: center; height: 18px; }
.dw-funnel-track i { display: block; height: 100%; border-radius: 4px; background: var(--dw-s3); }
.dw-funnel-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dw-funnel-num b { font-weight: 650; color: var(--nx-ink); }
.dw-funnel-num small { display: block; font-size: .6875rem; color: var(--nx-muted); }
.dw-funnel-conv { text-align: end; font-size: .75rem; color: var(--nx-muted); font-variant-numeric: tabular-nums; }

.dw-table-wrap { margin: 0; }
.dw-table td, .dw-table th { padding: 6px 8px; }
.dw-table tfoot td { font-weight: 650; border-top: 1px solid var(--nx-ring-strong); }
.dw-table small { text-transform: none; letter-spacing: 0; }
.dw-note { white-space: pre-wrap; font-size: .875rem; line-height: 1.5; color: var(--nx-ink); overflow-wrap: anywhere; }
.dw-goals .gl-bar { margin-top: 4px; }

/* arranging */
.dw-grid.is-editing { grid-auto-rows: minmax(var(--dw-row), auto); }
.dw-grid.is-editing .dw-fresh { display: none; }
.dw-arrange .mud-icon-button { padding: 3px; }
.dw-arrange { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; border-top: 1px dashed var(--nx-ring-strong); margin-top: .5rem; padding-top: .375rem; }
.dw-arrange-sep { width: 1px; height: 18px; background: var(--nx-ring-strong); margin: 0 4px; }
.dw-size { font-size: .6875rem; color: var(--nx-muted); min-width: 3em; text-align: center; font-variant-numeric: tabular-nums; }
html[dir="rtl"] .dw-flip .mud-icon-root { transform: scaleX(-1); }
.dw-resize { position: absolute; inset-inline-end: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
    background: linear-gradient(135deg, transparent 50%, var(--nx-ring-strong) 50%, var(--nx-ring-strong) 60%, transparent 60%, transparent 72%, var(--nx-ring-strong) 72%, var(--nx-ring-strong) 82%, transparent 82%); }
html[dir="rtl"] .dw-resize { cursor: nesw-resize; transform: scaleX(-1); }

/* the list page and the editor */
.dw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .875rem; margin-bottom: 1.5rem; }
.dw-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1rem; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); transition: border-color .13s ease, box-shadow .13s ease; }
.dw-tile:hover { border-color: var(--nx-ring-strong); box-shadow: var(--nx-sh-2); }
.dw-tile:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.dw-tile.is-blank { border-style: dashed; }
.dw-tile-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.dw-tile-name { font-weight: 640; font-size: .9063rem; color: var(--nx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-tile-desc { font-size: .8125rem; color: var(--nx-ink-2); line-height: 1.4; }
.dw-lib-icon { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; background: var(--nx-accent-soft); color: var(--nx-700); }
html[data-theme="dark"] .dw-lib-icon { background: rgba(129, 140, 248, .16); color: #C7D2FE; }
.dw-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.dw-lib-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface); }
.dw-lib-item:hover { border-color: var(--nx-accent); }
.dw-lib-item:focus-visible { outline: 2px solid var(--nx-accent); }
.dw-lib-item b { display: block; font-size: .8438rem; font-weight: 620; color: var(--nx-ink); }
.dw-lib-item small { display: block; font-size: .75rem; color: var(--nx-muted); line-height: 1.35; margin-top: 2px; }
.dw-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px .75rem; }
.dw-filter-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: .375rem; align-items: center; margin-bottom: .375rem; }
.dw-filter-row .set-input { max-width: none; height: 36px; padding: .25rem .5rem; }
.dw-check-low { align-self: end; margin-bottom: 1.25rem; }
.dw-preview { min-height: 64px; max-height: 280px; overflow: auto; border: 1px dashed var(--nx-ring-strong); border-radius: var(--nx-r-sm); padding: .75rem; margin-bottom: .5rem; }
.dw-share-opts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; }
.dw-drill { width: min(760px, 100vw); }
.dw-print-foot { display: none; }

@media (max-width: 1100px) {
    .dw-w3, .dw-w4 { grid-column: span 6; }
    .dw-w8 { grid-column: span 12; }
}
@media (max-width: 700px) {
    .dw-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .dw-card, .dw-w3, .dw-w4, .dw-w6, .dw-w8, .dw-w12 { grid-column: 1 / -1; grid-row: auto; }
    .dw-h1 { min-height: 120px; } .dw-h2 { min-height: 220px; } .dw-h3 { min-height: 300px; } .dw-h4 { min-height: 380px; }
    .dw-resize { display: none; }
    .dw-library, .dw-cols { grid-template-columns: minmax(0, 1fr); }
    .dw-filter-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dw-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .dw-donut-ring { width: 140px; }
    .dw-legend { width: 100%; }
    .dw-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .dw-filters .sx-field .set-input { width: 100%; min-width: 0; max-width: none; }
    .dw-filters .sx-compare { grid-column: 1 / -1; padding-bottom: 0; }
}
@media print {
    .dw-actions, .dw-filters .sx-compare, .dw-tools, .dw-arrange, .dw-resize, .dw-arrange-hint, .dw-switch { display: none !important; }
    .dw-grid { gap: 10px; }
    .dw-card { break-inside: avoid; border-color: #ccc; }
    .dw-filters { border: 0; padding: 0; }
    .dw-filters .set-input { border: 0; padding: 0; -webkit-appearance: none; appearance: none; }
    .dw-print-foot { display: block; margin-top: 12px; font-size: 11px; color: #666; }
}

/* Slack and Microsoft Teams (#304): the connection cards share the accounting cards' look (.acc-*); these are the parts of their own. */
.acc-logo.is-slack { background: #4A154B; }
.acc-logo.is-teams { background: #5059C9; }
/* Requests from Slack, Teams and email: the settings and the requester on a task. */
.rq-switches { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .25rem 0 .75rem; }
.rq-table { margin-top: .75rem; }
.tp-requester-name { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.tp-requester-link { font-size: .8125rem; font-weight: 600; }
.ca-steps { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
.ca-steps a { font-weight: 600; }
.ca-code { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .625rem .75rem; border-radius: 10px; background: var(--nx-surface-2, rgba(37, 99, 235, .06)); border: 1px dashed var(--nx-ring); font-size: .875rem; }
.ca-code code { font-size: 1.0625rem; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; }
.ca-code .pf-hint { margin: 0; flex-basis: 100%; }
.ca-events { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .75rem 1.25rem; }
.ca-events legend { font-weight: 600; font-size: .875rem; margin-bottom: .5rem; padding: 0; }
.ca-group { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ca-group-name { font-size: .6875rem; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ca-group .pf-check, .ca-kinds .pf-check { flex-wrap: nowrap; align-items: flex-start; }
.ca-group .pf-check > span, .ca-kinds .pf-check > span { min-width: 0; }
.ca-kinds { border: 0; padding: 0; padding-inline-start: 1.5rem; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.ca-kinds[disabled] { opacity: .55; }
.ca-channel-list { display: flex; flex-direction: column; }
.ca-channel { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; border-top: 1px solid var(--nx-ring); }
.ca-channel:first-child { border-top: 0; padding-top: 0; }
.ca-channel.is-off .ca-channel-main { opacity: .6; }
.ca-channel-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .375rem; }
.ca-channel-name { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.ca-channel-actions { display: inline-flex; gap: .125rem; flex: 0 0 auto; }
.ca-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.ca-chip { font-size: .75rem; padding: .125rem .5rem; border-radius: 999px; background: rgba(37, 99, 235, .08); color: inherit; border: 1px solid rgba(37, 99, 235, .18); }
.ca-log-table td.ca-log-what { white-space: normal; min-width: 220px; max-width: 460px; overflow-wrap: anywhere; }
.ca-log-error { font-size: .8125rem; color: #B42318; }
.ca-howto { margin: .5rem 0 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
html[data-theme="dark"] .ca-chip { background: rgba(96, 165, 250, .14); border-color: rgba(96, 165, 250, .3); }
html[data-theme="dark"] .ca-code { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .ca-log-error { color: #FCA5A5; }
@media (max-width: 600px) {
  .ca-channel { flex-direction: column; }
  .ca-channel-actions { align-self: flex-end; }
  .ca-kinds { padding-inline-start: .5rem; }
  /* The message log stacks on a phone: when and where, then what, then its status. */
  .ca-log-table thead { display: none; }
  .ca-log-table, .ca-log-table tbody, .ca-log-table tr, .ca-log-table td { display: block; width: 100%; }
  .tb-scroll .ca-log-table.crm-table { min-width: 0; }
  .ca-log-table tr { border-bottom: 1px solid var(--nx-ring); padding: .5rem 0; }
  .ca-log-table.crm-table td { border: 0; padding: .125rem 0; white-space: normal; overflow-wrap: anywhere; max-width: none; }
  .ca-log-table.crm-table td div { white-space: normal; overflow-wrap: anywhere; }
  .ca-log-table td.ca-log-what { min-width: 0; max-width: none; }
  .ca-log-table td.w-num:empty { display: none; }
}

/* ---- Home additions (#358): Inbox, Day planner and focus timer, Notes and reminders ------------------------------------------------------ */
/* Inbox */
.ib-head-actions, .nt-head-actions, .pl-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ib-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.ib-chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 32px; padding: .25rem .625rem; font: inherit; font-size: .8125rem; color: var(--nx-ink-2); background: var(--nx-surface); border: 1px solid var(--nx-ring-strong); border-radius: 999px; cursor: pointer; transition: border-color .13s ease, background .13s ease; }
.ib-chip:hover { border-color: var(--nx-accent); }
.ib-chip.is-on { background: var(--nx-accent-soft); border-color: var(--nx-accent); color: var(--nx-ink); font-weight: 560; }
.ib-chip-n { min-width: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: var(--nx-surface-3); font-size: .6875rem; font-weight: 600; text-align: center; color: var(--nx-ink-2); }
.ib-chip-n.is-new { background: var(--nx-accent); color: #fff; }
.ib-chip-when { font-size: .6875rem; color: var(--nx-muted); }
.ib-list { padding: 0; overflow: hidden; }
.ib-row, .rm-row { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--nx-ring); outline: none; transition: background .13s ease; }
.ib-row:last-child, .rm-row:last-child { border-bottom: 0; }
.ib-row:hover, .rm-row:hover { background: var(--nx-surface-2); }
.ib-row:focus-visible { box-shadow: inset 3px 0 0 var(--nx-accent); background: var(--nx-accent-soft); }
.ib-row.is-unread { background: color-mix(in srgb, var(--nx-accent-soft) 55%, transparent); }
.ib-row.is-unread .ib-title { font-weight: 650; }
.ib-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--nx-surface-3); color: var(--nx-ink-2); }
.ib-t-mention, .ib-t-comment { background: var(--nx-accent-soft); color: var(--nx-700); }
.ib-t-approval { background: rgba(250, 178, 25, .16); color: #92400E; }
.ib-t-assigned { background: rgba(14, 116, 144, .12); color: #0E7490; }
.ib-t-support { background: rgba(14, 116, 144, .12); color: #0E7490; }
.ib-t-sales { background: rgba(12, 163, 12, .12); color: #047857; }
.ib-t-money { background: rgba(208, 59, 59, .1); color: #B42318; }
.ib-t-reminder { background: rgba(124, 58, 237, .12); color: #6D28D9; }
html[data-theme="dark"] .ib-t-mention, html[data-theme="dark"] .ib-t-comment { color: #C7C8FE; }
html[data-theme="dark"] .ib-t-approval { color: #FCD34D; }
html[data-theme="dark"] .ib-t-assigned, html[data-theme="dark"] .ib-t-support { color: #67E8F9; }
html[data-theme="dark"] .ib-t-sales { color: #6EE7B7; }
html[data-theme="dark"] .ib-t-money { color: #FCA5A5; }
html[data-theme="dark"] .ib-t-reminder { color: #C4B5FD; }
html[data-theme="dark"] body:not(:has(.lp-header, .pp-side, .pp-bare)) a.ib-open, html[data-theme="dark"] body:not(:has(.lp-header, .pp-side, .pp-bare)) a.pl-cand-title, html[data-theme="dark"] body:not(:has(.lp-header, .pp-side, .pp-bare)) a.pl-focus-task { color: var(--nx-ink); }
.ib-main { flex: 1; min-width: 0; }
.ib-open { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; color: var(--nx-ink); text-decoration: none; }
.ib-open:hover .ib-title { text-decoration: underline; }
.ib-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-accent); }
.ib-title { font-size: .875rem; font-weight: 550; overflow-wrap: anywhere; }
.ib-detail { font-size: .8125rem; color: var(--nx-ink-2); margin-top: 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ib-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .7188rem; color: var(--nx-muted); margin-top: 4px; }
.ib-source { font-weight: 600; color: var(--nx-ink-2); }
.ib-snoozed { display: inline-flex; align-items: center; gap: 2px; }
.ib-snoozed .mud-icon-root { font-size: .875rem; }
.ib-reject, .ib-snooze-pop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.ib-reject .set-input { flex: 1 1 220px; }
.ib-snooze-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.ib-snooze-pick .set-input { width: auto; }
.ib-actions { flex: 0 0 auto; }
.ib-keys { margin-top: .5rem; }

/* Day planner */
.pl-daynav { display: inline-flex; align-items: center; gap: .25rem; }
.pl-date { width: auto; height: 32px; padding: .25rem .5rem; }
.pl-focus { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1rem; border-color: var(--nx-accent); background: linear-gradient(120deg, var(--nx-accent-soft), var(--nx-surface) 70%); }
.pl-focus.is-break { border-color: #0CA30C; background: linear-gradient(120deg, rgba(12, 163, 12, .12), var(--nx-surface) 70%); }
.pl-focus-ring { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--nx-accent); color: #fff; }
.pl-focus.is-break .pl-focus-ring { background: #047857; }
.pl-focus-main { flex: 1; min-width: 0; }
.pl-focus-phase { font-size: .6875rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-ink-2); }
.pl-focus-clock { font-size: 2rem; font-weight: 660; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--nx-ink); }
.pl-focus-task { display: block; font-size: .8125rem; color: var(--nx-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-focus-track { height: 4px; border-radius: 99px; background: var(--nx-surface-3); margin-top: .5rem; overflow: hidden; }
.pl-focus-bar { height: 100%; width: 0; background: var(--nx-accent); transition: width 1s linear; }
.pl-focus.is-break .pl-focus-bar { background: #0CA30C; }
.pl-focus-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.pl-cap { padding: .875rem 1.125rem; margin-bottom: 1rem; }
.pl-cap-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.pl-cap-nums > div { display: flex; flex-direction: column; }
.pl-cap-n { font-size: 1.25rem; font-weight: 650; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.pl-cap-l { font-size: .7188rem; color: var(--nx-muted); }
.pl-cap-bar { display: flex; height: 8px; border-radius: 99px; background: var(--nx-surface-3); overflow: hidden; margin-top: .625rem; }
.pl-cap-meet { background: var(--nx-baseline); }
.pl-cap-plan { background: var(--nx-accent); }
.pl-cap.is-over .pl-cap-plan { background: var(--nx-critical); }
.pl-cap-note { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--nx-ink-2); margin-top: .5rem; }
.pl-cap-note.is-warn { color: #B42318; font-weight: 560; }
html[data-theme="dark"] .pl-cap-note.is-warn { color: #FCA5A5; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: start; }
.pl-todo, .pl-day { padding: .875rem 1rem 1rem; }
.pl-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.pl-sec-head h2 { font-size: .9375rem; font-weight: 650; margin: 0; }
.pl-hint { margin: .125rem 0 .5rem; }
.pl-empty { padding: 1rem 0; font-size: .8125rem; color: var(--nx-muted); }
.pl-group { font-size: .6875rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-ink-2); margin: .875rem 0 .375rem; }
.pl-g-late { color: #B42318; }
html[data-theme="dark"] .pl-g-late { color: #FCA5A5; }
.pl-cand { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; margin-bottom: .375rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface); cursor: grab; transition: border-color .13s ease, box-shadow .13s ease; }
.pl-cand:hover { border-color: var(--nx-accent); box-shadow: var(--nx-sh-2); }
.pl-cand.is-planned { border-inline-start: 3px solid var(--nx-accent); }
.pl-cand-icon { color: var(--nx-muted); flex: 0 0 auto; }
.pl-cand-main { flex: 1; min-width: 0; }
.pl-cand-title { display: block; font-size: .8125rem; font-weight: 560; color: var(--nx-ink); text-decoration: none; overflow-wrap: anywhere; }
.pl-cand-title:hover { text-decoration: underline; }
.pl-cand-meta { display: flex; flex-wrap: wrap; gap: .25rem; font-size: .6875rem; color: var(--nx-muted); margin-top: 2px; }
.pl-planned-chip { padding: 0 .375rem; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-700); font-weight: 600; }
html[data-theme="dark"] .pl-planned-chip { color: #C7C8FE; }
.pl-pick { padding: .625rem; margin: -.125rem 0 .5rem; border: 1px dashed var(--nx-accent); border-radius: var(--nx-r-sm); background: var(--nx-accent-soft); display: grid; gap: .5rem; }
.pl-pick-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.pl-pick-l { display: flex; flex-direction: column; gap: 2px; font-size: .6875rem; font-weight: 600; color: var(--nx-ink-2); }
.pl-pick-l .set-input { width: auto; min-width: 96px; }
.pl-allday { display: flex; flex-wrap: wrap; gap: .375rem; margin: .5rem 0 0; }
.pl-allday-chip { font-size: .75rem; padding: .125rem .5rem; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); }
.pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; margin-top: .625rem; padding: .375rem .5rem; border-radius: var(--nx-r-sm); background: var(--nx-surface-2); border: 1px solid var(--nx-ring); }
.pl-toolbar-name { font-size: .8125rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pl-timeline { position: relative; margin-top: .75rem; border-top: 1px solid var(--nx-ring); }
.pl-slot { position: absolute; inset-inline: 0; border-bottom: 1px dashed var(--nx-ring); cursor: pointer; }
.pl-slot.is-hour { border-bottom-style: solid; }
.pl-slot:hover { background: var(--nx-surface-2); }
.pl-timeline.is-dragging .pl-slot:hover { background: var(--nx-accent-soft); }
.pl-timeline.is-dragging .pl-item { pointer-events: none; opacity: .75; }
.pl-hour { position: absolute; top: 2px; inset-inline-start: 0; width: 48px; font-size: .6875rem; color: var(--nx-muted); font-variant-numeric: tabular-nums; }
.pl-now { position: absolute; inset-inline: 48px 0; height: 0; border-top: 2px solid var(--nx-critical); z-index: 3; pointer-events: none; }
.pl-now::before { content: ""; position: absolute; top: -5px; inset-inline-start: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-critical); }
.pl-item { position: absolute; box-sizing: border-box; inset-inline-start: calc(52px + (100% - 56px) * var(--lane) / var(--lanes)); width: calc((100% - 56px) / var(--lanes) - 4px); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1px; padding: 3px 8px; overflow: hidden; border-radius: 7px; font: inherit; text-align: start; z-index: 2; }
.pl-item-title { font-size: .75rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.pl-item-time { font-size: .6563rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pl-event { background: repeating-linear-gradient(135deg, var(--nx-surface-3) 0 6px, var(--nx-surface-2) 6px 12px); color: var(--nx-ink-2); border: 1px solid var(--nx-ring-strong); }
.pl-ev-meeting, .pl-ev-call { background: rgba(14, 116, 144, .12); color: #0E5E74; border-color: rgba(14, 116, 144, .35); }
html[data-theme="dark"] .pl-ev-meeting, html[data-theme="dark"] .pl-ev-call { color: #A5F3FC; }
.pl-block { background: var(--nx-accent); color: #fff; border: 1px solid transparent; cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.pl-block:hover { filter: brightness(1.06); }
.pl-block.pl-k-ticket { background: #0E7490; }
.pl-block.pl-k-activity { background: #047857; }
.pl-block.pl-k-free { background: #6D28D9; }
.pl-block.is-done { background: var(--nx-surface-3); color: var(--nx-muted); text-decoration: line-through; box-shadow: none; }
.pl-block.is-selected { outline: 2px solid var(--nx-ink); outline-offset: 1px; z-index: 4; }
.pl-block:focus-visible { outline: 2px solid var(--nx-ink); outline-offset: 1px; }
html[dir="rtl"] .pl-flip .mud-icon-root { transform: scaleX(-1); }

/* Notes and reminders */
.nt-search { display: flex; align-items: center; gap: .5rem; max-width: 420px; margin-bottom: 1rem; color: var(--nx-muted); }
.nt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .875rem; margin-bottom: 1.25rem; }
.nt-card { display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem; min-height: 120px; transition: border-color .13s ease, box-shadow .13s ease; }
.nt-card:hover { border-color: var(--nx-accent); box-shadow: var(--nx-sh-2); }
.nt-card.is-pinned { border-top: 3px solid var(--nx-accent); }
.nt-card-open { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: .25rem; }
.nt-card-open:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; border-radius: 4px; }
.nt-card-title { font-size: .9375rem; font-weight: 620; color: var(--nx-ink); overflow-wrap: anywhere; }
.nt-card-text { font-size: .8125rem; color: var(--nx-ink-2); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nt-card-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .8125rem; }
.nt-card-check label { display: flex; align-items: flex-start; gap: .375rem; cursor: pointer; }
.nt-card-check input { margin-top: 3px; accent-color: var(--nx-accent); }
.nt-card-check li.is-done span { text-decoration: line-through; color: var(--nx-muted); }
.nt-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: auto; }
.nt-when { margin: 0; }
.nt-card-foot .ia-row { margin-inline-start: auto; }
.nt-progress { font-size: .6875rem; font-weight: 600; color: var(--nx-ink-2); padding: 0 .375rem; border-radius: 999px; background: var(--nx-surface-3); }
.nl-link { position: relative; }
.nl-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .2rem .5rem; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-ink); font-size: .8125rem; text-decoration: none; }
.nl-chip.is-small { font-size: .7188rem; padding: .125rem .45rem; max-width: 70%; }
.nl-chip .mud-icon-root { font-size: 1rem; color: var(--nx-700); }
html[data-theme="dark"] .nl-chip .mud-icon-root { color: #C7C8FE; }
.nl-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-chip-x { all: unset; cursor: pointer; display: inline-flex; border-radius: 50%; color: var(--nx-muted); }
.nl-chip-x:focus-visible { outline: 2px solid var(--nx-accent); }
.nl-hits { margin-top: .25rem; max-width: 420px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); background: var(--nx-surface); box-shadow: var(--nx-sh-2); max-height: 260px; overflow: auto; }
.nl-hit { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .625rem; font-size: .8125rem; color: var(--nx-ink); }
.nl-hit:hover, .nl-hit:focus-visible { background: var(--nx-accent-soft); }
.nt-panel { width: min(560px, 100vw); }
.nt-check { display: grid; gap: .375rem; }
.nt-check-row { display: flex; align-items: center; gap: .375rem; }
.nt-check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--nx-accent); flex: 0 0 auto; }
.nt-check-row .set-input { flex: 1; max-width: none; }
.nt-check-plus { color: var(--nx-muted); width: 18px; }
.nt-pin { display: flex; align-items: center; gap: .5rem; }
.rm-list { padding: 0; overflow: hidden; margin-bottom: 1rem; }
.rm-row.is-due { background: rgba(124, 58, 237, .06); }
.rm-row.is-done .ib-title { text-decoration: line-through; color: var(--nx-muted); }
.rm-quick { margin-bottom: .5rem; }

/* "Remind me" and "My notes" on a record's page */
.pt-tools { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
.pt-count { margin-inline-start: .375rem; min-width: 1.125rem; padding: 0 .3rem; border-radius: 999px; background: var(--nx-accent); color: #fff; font-size: .6875rem; line-height: 1.125rem; }
.pt-quick { display: grid; gap: .5rem; margin-bottom: 1rem; }
.pt-quick .set-input { max-width: none; resize: vertical; }
.pt-quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pt-row { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .8125rem; padding: .375rem 0; border-bottom: 1px solid var(--nx-ring); }
.pt-note { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; width: 100%; padding: .5rem .625rem; margin-bottom: .375rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); }
.pt-note:hover, .pt-note:focus-visible { border-color: var(--nx-accent); }
.pt-note-title { font-size: .8125rem; font-weight: 600; display: flex; align-items: center; gap: .25rem; overflow-wrap: anywhere; }
.tp-personal { margin: .375rem 0 .25rem; }
.md-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }

@media (max-width: 900px) {
    .pl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .pl-cap-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-focus { flex-wrap: wrap; }
    .pl-focus-actions { width: 100%; justify-content: flex-start; }
    .pl-head-actions, .ib-head-actions, .nt-head-actions { width: 100%; }
    .ib-row, .rm-row { flex-wrap: wrap; padding: .75rem; }
    .ib-actions { width: 100%; justify-content: flex-end; }
    .ib-icon { width: 28px; height: 28px; }
    .pt-tools { width: 100%; }
    .ib-keys { display: none; }
}

/* ---- Finance additions (#363): advances, cheques, petty cash, cash flow, tax returns ------------------------------ */
.nx-dialog.fin-dialog, .nx-dialog-backdrop + .nx-dialog.fin-dialog { width: min(46rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 3rem); overflow-y: auto; }
.fin-dialog .nf-grid { margin-bottom: .5rem; }
.fin-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .375rem 0; }
.fin-inline > .set-input { flex: 1 1 9rem; min-width: 0; width: auto; }
.fin-inline > .set-input.fin-narrow, .set-input.fin-narrow { flex: 0 1 8rem; max-width: 9rem; }
.fin-inline > span { flex: 1 1 14rem; font-size: .8438rem; }
.set-input.fin-opening { flex: 0 1 12.5rem; min-width: 12.5rem; width: 12.5rem; }
.fin-actions { margin-top: .875rem; padding-top: .75rem; border-top: 1px solid var(--nx-line, rgba(0,0,0,.08)); }
.fin-late { color: var(--nx-critical, #c62828); font-weight: 600; }
.fin-pos { color: var(--nx-good, #2e7d32); }
.fin-neg { color: var(--nx-critical, #c62828); }
.fin-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted, #6b6f8f); margin: 1rem 0 .375rem; }
@media (max-width: 640px) {
    .fin-inline > .set-input, .fin-inline > .set-input.fin-narrow { flex: 1 1 100%; max-width: none; }
    .set-input.fin-opening { flex: 1 1 100%; width: auto; min-width: 0; }
    .fin-inline .mud-button-root { flex: 1 1 auto; }
}
.crm-banner.is-warn { background: #FFFAEB; border: 1px solid #FEDF89; color: #7A2E0E; align-items: flex-start; }
.crm-banner.is-error { background: #FEF3F2; border: 1px solid #FECDCA; color: #7A271A; align-items: flex-start; }
html[data-theme="dark"] .crm-banner.is-warn, html[data-theme="dark"] .ex-rule-warn { background: rgba(250, 178, 25, 0.14); color: #FCD38A; border-color: rgba(250, 178, 25, 0.35); }
html[data-theme="dark"] .crm-banner.is-error { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; border-color: rgba(239, 68, 68, 0.35); }
.ex-rule-list { margin: .25rem 0 0; padding-inline-start: 1.1rem; }
.ex-rule-list li { margin: .125rem 0; }
.ex-rule-warn { display: inline-flex; align-items: flex-start; gap: .375rem; margin: .25rem 0; padding: .25rem .5rem; border-radius: 8px; font-size: .78rem; white-space: pre-line;
    background: #FFFAEB; border: 1px solid #FEDF89; color: #7A2E0E; }
.pc-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.pc-box { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: start; border: 1px solid var(--nx-ring); background: var(--nx-surface); border-radius: var(--nx-r, 12px); padding: .875rem 1rem; cursor: pointer; font: inherit; color: inherit; }
.pc-box:hover, .pc-box:focus-visible { border-color: var(--nx-ring-strong); box-shadow: var(--nx-sh-1); }
.pc-box.is-current { border-color: var(--nx-accent); box-shadow: 0 0 0 1px var(--nx-accent); }
.pc-box.is-closed { opacity: .65; }
.pc-box-name { font-weight: 700; font-size: .9375rem; }
.pc-box-meta { font-size: .78rem; color: var(--nx-muted); margin-top: .125rem; }
.pc-box-balance { font-size: 1.375rem; font-weight: 700; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.pc-box-bar { height: 6px; border-radius: 3px; background: var(--nx-surface-3); margin-top: .5rem; overflow: hidden; }
.pc-box-bar > i { display: block; height: 100%; background: var(--nx-accent); border-radius: 3px; }
.pc-box-bar.is-low > i { background: var(--nx-critical, #c62828); }
.fin-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
/* General ledger: headings of the chart (class, group, sub-group) and the gross profit line. */
.crm-table tr.ldg-heading > td { background: var(--nx-surface-2); }
.crm-table tr.ldg-subtotal > td { border-top: 2px solid var(--nx-ring-strong); }
.cf-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin: 1rem 0 .25rem; padding-inline-start: 2.75rem; }
.cf-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px; }
.cf-bar:hover, .cf-bar:focus-visible, .cf-bar.is-current { background: var(--nx-surface-3); }
.cf-bar > i { display: block; width: 40%; max-width: 14px; border-radius: 3px 3px 0 0; min-height: 1px; }
.cf-in { background: var(--nx-good, #16a34a); }
.cf-out { background: var(--nx-critical, #dc2626); opacity: .8; }
.cf-legend { display: flex; gap: 1rem; font-size: .75rem; color: var(--nx-muted); padding-inline-start: 2.75rem; }
.cf-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.cf-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.dw-cash-low { margin-top: .375rem; }
.dw-ceo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.dw-ceo-tile { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--nx-ring); border-radius: 10px; color: var(--nx-ink); text-decoration: none; }
.dw-ceo-tile span { font-size: .75rem; color: var(--nx-muted); } .dw-ceo-tile strong { font-variant-numeric: tabular-nums; }
.dw-ceo-tile:hover { background: var(--nx-surface-2); }
.tr-boxes td.tr-box { font-weight: 700; white-space: nowrap; color: var(--nx-muted); }
.tr-boxes tr.is-total td { font-weight: 700; border-top: 2px solid var(--nx-ring-strong); }
@media (max-width: 640px) { .cf-bars, .cf-legend { padding-inline-start: 0; } }

/* =============================================================================
   Administration additions (#369): field permissions, record sharing, sandboxes, health check
   ============================================================================= */
/* A segmented choice (one of a few options, side by side). Shared: field permissions, sharing access. */
.nx-seg { display: inline-flex; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); overflow: hidden; background: var(--nx-surface); flex: 0 0 auto; }
.nx-seg button { border: 0; background: none; font: inherit; font-size: .8125rem; font-weight: 550; color: var(--nx-ink-2); padding: .375rem .75rem; cursor: pointer; min-height: 34px; white-space: nowrap; }
.nx-seg button + button { border-inline-start: 1px solid var(--nx-ring-strong); }
.nx-seg button:hover { background: var(--nx-surface-2); color: var(--nx-ink); }
.nx-seg button.on { background: var(--nx-accent-soft-2); color: var(--nx-800); font-weight: 650; }
.nx-seg button.on.is-ro { background: #FEF3C7; color: #92400E; }
.nx-seg button.on.is-hidden { background: #FEE2E2; color: #991B1B; }
.nx-seg button:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
html[data-theme="dark"] .nx-seg button.on { background: rgba(129, 140, 248, .22); color: #E0E7FF; }
html[data-theme="dark"] .nx-seg button.on.is-ro { background: rgba(245, 158, 11, .2); color: #FDE68A; }
html[data-theme="dark"] .nx-seg button.on.is-hidden { background: rgba(239, 68, 68, .2); color: #FECACA; }

.fp-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; margin: 1rem 0 .5rem; }
.fp-pick { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 600; color: var(--nx-muted); min-width: 0; }
.fp-pick .set-input { min-width: 220px; max-width: 100%; }
.fp-copy { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fp-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.fp-tabs .scope-tab { white-space: nowrap; }
.fp-card { padding: 0; }
.fp-list { list-style: none; margin: 0; padding: 0; }
.fp-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 1rem; border-top: 1px solid var(--nx-ring); }
.fp-row:first-child { border-top: 0; }
.fp-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; font-weight: 550; overflow-wrap: anywhere; }
.fp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .75rem 1rem; border-top: 1px solid var(--nx-ring); background: var(--nx-surface-2); border-radius: 0 0 var(--nx-r) var(--nx-r); }
/* A field the person's role may see but not change (#369 X2). */
.lay-slot.is-ro { opacity: .78; cursor: not-allowed; }
@media (max-width: 600px) {
    .fp-row { flex-direction: column; align-items: stretch; }
    .fp-row .nx-seg { align-self: stretch; }
    .fp-row .nx-seg button { flex: 1 1 0; }
    .fp-pick, .fp-pick .set-input { width: 100%; min-width: 0; }
    .fp-foot { justify-content: space-between; }
}

/* Record sharing (#369 X3): the "Shared with" panel, Shared with me, the shared view and sharing rules. */
.sh-panel .cm-thread-title { display: flex; align-items: center; gap: .375rem; }
.sh-panel .sh-add { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--nx-accent); cursor: pointer; padding: .25rem .5rem; border-radius: var(--nx-r-sm); }
.sh-panel .sh-add:hover { background: var(--nx-accent-soft); }
.sh-form { display: flex; flex-direction: column; gap: .75rem; padding: .75rem; margin-bottom: .75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r); background: var(--nx-surface-2); }
.sh-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.sh-row .fp-pick { flex: 1 1 200px; }
.sh-row .fp-pick .set-input { min-width: 0; width: 100%; }
.sh-note { flex: 1 1 220px; min-width: 0; }
.sh-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.sh-list { list-style: none; margin: 0; padding: 0; }
.sh-item { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--nx-ring); }
.sh-item:first-child { border-top: 0; }
.sh-item.is-off { opacity: .6; }
.sh-who { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.sh-who .pf-hint { margin: 0; }
.sh-note-text { font-style: italic; }
.sh-kind { background: var(--nx-accent-soft-2); color: var(--nx-800); }
.sh-mine { padding: 0 1rem; }
html[data-theme="dark"] .sh-kind { background: rgba(129, 140, 248, .22); color: #E0E7FF; }
.sr-form { margin-bottom: 1rem; }
.sr-wide { flex: 2 1 260px; }
.shr-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .25rem 1.5rem; }
.shr-card .shr-field:has(.wk-body), .shr-card .shr-field:has(textarea), .shr-card .shr-field:has(.shr-long), .shr-card .sh-actions { grid-column: 1 / -1; }
.shr-long { white-space: pre-wrap; overflow-wrap: anywhere; }
.shr-field dd .set-input { width: 100%; min-width: 0; }
@media (max-width: 600px) {
    .sh-item { align-items: flex-start; }
    .sh-mine { padding: 0 .75rem; }
}

/* The health check (#369 X6). */
.hc-summary { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hc-score { position: relative; width: 104px; height: 104px; flex: 0 0 auto; --hc: var(--nx-good); }
.hc-score.is-warn { --hc: #D97706; }
.hc-score.is-bad { --hc: var(--nx-critical); }
.hc-score .hc-track { stroke: var(--nx-surface-3); }
.hc-score .hc-arc { stroke: var(--hc); transition: stroke-dasharray .4s ease; }
.hc-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.875rem; font-weight: 750; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.hc-sum-text { flex: 1 1 260px; min-width: 0; }
.hc-sum-text h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.hc-mail { margin-top: .5rem; }
.hc-area { margin-bottom: 1.25rem; }
.hc-area-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); font-weight: 650; margin: 0 0 .5rem; }
.hc-grid .crm-section { margin-bottom: 0; }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .75rem; }
.hc-check { display: flex; flex-direction: column; gap: .5rem; border-inline-start: 4px solid var(--hc-c, var(--nx-ring-strong)); }
.hc-check.is-good { --hc-c: var(--nx-good); }
.hc-check.is-info { --hc-c: #3B82F6; }
.hc-check.is-warning { --hc-c: #D97706; }
.hc-check.is-problem { --hc-c: var(--nx-critical); }
.hc-check p { margin: 0; overflow-wrap: anywhere; }
.hc-check-head { display: flex; align-items: center; gap: .5rem; }
.hc-check-head h3 { margin: 0; font-size: .9375rem; flex: 1 1 auto; min-width: 0; }
.hc-dot { color: var(--hc-c); display: inline-flex; }
.hc-state { font-size: .6875rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--hc-c); white-space: nowrap; }
.hc-items { margin-top: .125rem; }
.hc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .25rem; }
@media (max-width: 600px) {
    .hc-summary { flex-direction: column; align-items: flex-start; }
}

/* Sandboxes (#369 X1): the banner on every page of a sandbox, and Settings > Sandbox. */
.sb-badge { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 999px; background: #B45309; color: #fff; font-size: .6875rem; font-weight: 750; letter-spacing: .08em; white-space: nowrap; }
.nx-sandbox-banner { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .5rem 1rem; background: repeating-linear-gradient(-45deg, #FEF3C7, #FEF3C7 12px, #FDE68A 12px, #FDE68A 24px); color: #78350F; border-bottom: 1px solid #F59E0B; font-size: .8438rem; }
.sb-banner-text { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.sb-banner-back { margin: 0; }
.sb-banner-btn { border: 1px solid #B45309; background: #fff; color: #78350F; font: inherit; font-weight: 650; border-radius: var(--nx-r-sm); padding: .25rem .75rem; cursor: pointer; min-height: 32px; }
.sb-banner-btn:hover { background: #FFFBEB; }
.sb-banner-btn:focus-visible { outline: 2px solid #B45309; outline-offset: 2px; }
html[data-theme="dark"] .nx-sandbox-banner { background: repeating-linear-gradient(-45deg, #451A03, #451A03 12px, #57250A 12px, #57250A 24px); color: #FDE68A; border-bottom-color: #92400E; }
html[data-theme="dark"] .sb-banner-btn { background: transparent; color: #FDE68A; border-color: #D97706; }
.sb-card { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.sb-card h2 { margin: 0; font-size: 1.0625rem; }
.sb-card p { margin: 0; }
.sb-head { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.sb-inside { border-inline-start: 4px solid #B45309; }
.sb-working { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; }
.sb-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.sb-option { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r); cursor: pointer; background: var(--nx-surface); }
.sb-option.on { border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.sb-option input { margin-top: .2rem; accent-color: var(--nx-accent); }
.sb-option span { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sb-option small { color: var(--nx-muted); font-size: .8125rem; line-height: 1.4; }
.sb-row { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; }
.sb-files { padding-bottom: .5rem; }
.sb-facts { margin: 0; padding-inline-start: 1.125rem; display: flex; flex-direction: column; gap: .25rem; color: var(--nx-ink-2); font-size: .8438rem; }
.sb-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.sb-actions form { margin: 0; }
.sb-actions .nx-btn { display: inline-flex; align-items: center; gap: .375rem; min-height: 36px; font-weight: 600; text-transform: none; }
.sb-extend { display: inline-flex; gap: .25rem; align-items: center; }
.sb-extend .set-input { width: auto; min-width: 7rem; }
.sb-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: .5rem 1.25rem; margin: 0; }
.sb-stats dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); font-weight: 650; }
.sb-stats dd { margin: .125rem 0 0; font-weight: 550; overflow-wrap: anywhere; }
.sb-cats { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.sb-none { color: var(--nx-good); font-weight: 600; }
.sb-diff, .sb-diff ul { list-style: none; margin: 0; padding: 0; }
.sb-diff-group + .sb-diff-group { margin-top: .75rem; }
.sb-diff-group h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); margin: 0 0 .25rem; }
.sb-diff-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; padding: .5rem 0; border-top: 1px solid var(--nx-ring); }
.sb-change { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .0625rem .4375rem; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); white-space: nowrap; }
.sb-diff-item.is-new .sb-change { background: #DCFCE7; color: #166534; }
.sb-diff-item.is-changed .sb-change { background: #FEF3C7; color: #92400E; }
.sb-diff-item.is-kept { opacity: .7; }
html[data-theme="dark"] .sb-diff-item.is-new .sb-change { background: rgba(34, 197, 94, .2); color: #BBF7D0; }
html[data-theme="dark"] .sb-diff-item.is-changed .sb-change { background: rgba(245, 158, 11, .2); color: #FDE68A; }
.sb-diff-name { font-weight: 600; overflow-wrap: anywhere; }
.sb-details { flex: 1 1 100%; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .sb-actions > *, .sb-actions form, .sb-actions form .nx-btn { width: 100%; justify-content: center; }
    .sb-extend { flex-wrap: wrap; }
    .sb-extend .set-input { flex: 1 1 auto; }
}

/* ---- Your clients' own branding and custom web address (#335): Settings > Branding and Settings > Custom web address ---- */
.br-main { display: flex; flex-direction: column; gap: 0; max-width: 960px; }
.br-main .set-form { max-width: none; }
.br-dark-chip { background: #1C1F33; color: #C7D2FE; }
.br-icon-chip { width: 56px !important; }
.br-checks { margin-top: .75rem; }
.br-checks ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .375rem; }
.br-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .625rem; padding: .375rem .5rem; border: 1px solid var(--nx-ring); border-radius: 8px; background: var(--nx-surface-2); font-size: .875rem; }
.br-swatch { display: inline-grid; place-items: center; min-width: 2.25rem; height: 1.75rem; border-radius: 6px; font-weight: 700; border: 1px solid var(--nx-ring); }
.br-ratio { font-variant-numeric: tabular-nums; color: var(--nx-muted); direction: ltr /*rtl:ignore*/; unicode-bidi: isolate; }
.br-verdict { font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.br-checks li.is-ok .br-verdict { background: #DCFCE7; color: #166534; }
.br-checks li.is-adjusted .br-verdict { background: #FEF3C7; color: #92400E; }
html[data-theme="dark"] .br-checks li.is-ok .br-verdict { background: #14532D; color: #BBF7D0; }
html[data-theme="dark"] .br-checks li.is-adjusted .br-verdict { background: #78350F; color: #FDE68A; }
.br-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin-top: 1rem; }
.br-preview { border: 1px solid var(--nx-ring); border-radius: 12px; overflow: hidden; background: #F4F5FA; color: #14162E; }
.br-preview.is-dark { background: #1C1F33; color: #E6E8F5; }
.br-preview-head { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; min-height: 48px; }
.br-preview-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-preview-logo { height: 28px; max-width: 110px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px 5px; }
.br-preview-logo.is-bare { background: transparent; padding: 0; }
.br-preview-body { padding: .75rem .875rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; font-size: .875rem; }
.br-preview-body p { margin: 0; }
.br-preview-tab { font-weight: 600; border-bottom: 3px solid; padding-bottom: 2px; }
.br-preview-link { text-decoration: underline; }
.br-preview-btn { border-radius: 10px; padding: .45rem .875rem; font-weight: 600; }
.br-preview-cap { font-size: .75rem; padding: .375rem .875rem; border-top: 1px solid rgba(127, 127, 140, .2); opacity: .8; }
.cd-add-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.cd-add-row .set-input { flex: 1 1 auto; max-width: 420px; }
.cd-card { max-width: 960px; }
.cd-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.cd-head h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.cd-state { font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.cd-state.is-ok { background: #DCFCE7; color: #166534; } .cd-state.is-wait { background: #E0F2FE; color: #075985; } .cd-state.is-todo { background: #FEF3C7; color: #92400E; }
html[data-theme="dark"] .cd-state.is-ok { background: #14532D; color: #BBF7D0; } html[data-theme="dark"] .cd-state.is-wait { background: #0C4A6E; color: #BAE6FD; } html[data-theme="dark"] .cd-state.is-todo { background: #78350F; color: #FDE68A; }
.cd-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .75rem 0; padding: 0; color: var(--nx-muted); font-size: .875rem; }
.cd-steps li { display: inline-flex; align-items: center; gap: .375rem; }
.cd-steps li.is-done { color: #166534; font-weight: 600; }
html[data-theme="dark"] .cd-steps li.is-done { color: #86EFAC; }
.cd-records { border: 1px solid var(--nx-ring); border-radius: 10px; overflow: hidden; margin: .5rem 0; }
.cd-rec { display: grid; grid-template-columns: 4.5rem minmax(0, 1.2fr) minmax(0, 1.6fr) 6rem; gap: .75rem; align-items: center; padding: .5rem .75rem; border-top: 1px solid var(--nx-ring); font-size: .875rem; }
.cd-rec-head { border-top: 0; background: var(--nx-surface-2); font-size: .78rem; font-weight: 600; color: var(--nx-muted); }
.cd-rec-why { padding: 0 .75rem .5rem calc(4.5rem + 1.5rem); margin: 0; }
.cd-type { font-weight: 700; }
.cd-copyable { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.cd-copyable code { overflow-wrap: anywhere; font-size: .82rem; background: var(--nx-surface-2); border-radius: 6px; padding: 2px 6px; }
.cd-copy { border: 0; background: none; color: var(--nx-muted); cursor: pointer; min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; border-radius: 6px; flex: none; }
.cd-copy:hover, .cd-copy:focus-visible { background: var(--nx-accent-soft); color: var(--nx-ink); }
.cd-found { font-size: .82rem; color: var(--nx-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.cd-found.is-yes { color: #166534; font-weight: 600; }
html[data-theme="dark"] .cd-found.is-yes { color: #86EFAC; }
.cd-problem { margin: .5rem 0; }
.cd-problem-line { display: block; }
@media (max-width: 700px) {
    .cd-rec-head { display: none; }
    .cd-rec { grid-template-columns: 1fr; gap: .25rem; }
    .cd-rec > span[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--nx-muted); font-weight: 600; }
    .cd-rec > .cd-copyable { flex-wrap: wrap; }
    .cd-rec-why { padding: 0 .75rem .5rem; }
    .cd-add-row { flex-direction: column; align-items: stretch; }
    .cd-add-row .set-input { max-width: none; }
    .br-checks li { grid-template-columns: auto minmax(0, 1fr); }
    .br-checks li .br-ratio, .br-checks li .br-verdict { grid-column: 2; justify-self: start; }
}
/* ---- Online booking pages (#308): the public pages (bk-) and the team's screens (bkm-) ---------------------------------------------------- */
.pt-main:has(.bk-shell) { max-width: 1040px; }
.pt-embed .pt-head, .pt-embed .pt-foot { display: none; }
.pt-embed .pt-main { padding-top: 8px; padding-bottom: 8px; }
.bk-wrap { --bk-accent: var(--nx-accent, #4338CA); }
.bk-narrow { max-width: 640px; margin: 0 auto; }
.bk-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); background: #fff; border: 1px solid #E4E6F0; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.bk-info { padding: 22px; border-inline-end: 1px solid #E4E6F0; border-top: 4px solid var(--bk-accent); }
.bk-main { padding: 22px; min-width: 0; }
.bk-back { display: inline-block; font-size: .85rem; margin-bottom: 12px; color: #4A5069; text-decoration: none; }
.bk-back::before { content: "\2190\00a0"; }
.bk-back:hover { text-decoration: underline; }
.bk-org { color: #4A5069; font-size: .9rem; font-weight: 600; }
.bk-title { margin: 4px 0 12px; font-size: 1.45rem; line-height: 1.25; overflow-wrap: anywhere; }
.bk-facts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; color: #344054; font-size: .92rem; }
.bk-facts li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.bk-facts .mud-icon-root { color: var(--bk-accent); flex: none; margin-top: 1px; }
.bk-desc { white-space: pre-wrap; color: #344054; line-height: 1.5; margin: 0 0 12px; font-size: .92rem; }
.bk-durations { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #CDD1E0; color: inherit; text-decoration: none; font-size: .88rem; font-weight: 600; }
.bk-chip.is-on { background: var(--bk-accent); border-color: var(--bk-accent); color: #fff; }
.bk-chip:focus-visible, .bk-day:focus-visible, .bk-time:focus-visible, .bk-nav:focus-visible, .bk-type:focus-visible { outline: 2px solid var(--bk-accent); outline-offset: 2px; }
.bk-step { font-size: 1.1rem; margin: 0 0 14px; }
.bk-picker { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 22px; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bk-month { font-size: 1rem; margin: 0; text-transform: capitalize; }
.bk-nav { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--bk-accent); background: color-mix(in srgb, var(--bk-accent) 10%, transparent); }
.bk-nav.is-off { opacity: .3; background: transparent; }
.bk-chev { display: inline-block; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.bk-chev-next { transform: rotate(45deg); margin-right: 3px; }
.bk-chev-prev { transform: rotate(-135deg); margin-left: 3px; }
.bk-grid { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.bk-grid th { font-size: .72rem; font-weight: 600; color: #4A5069; padding: 4px 0; text-transform: uppercase; text-align: center; }
.bk-grid td { text-align: center; padding: 1px 0; }
.bk-day { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; max-width: 100%; border-radius: 50%; font-size: .92rem; color: #98A2B3; text-decoration: none; position: relative; }
.bk-day.has { color: var(--bk-accent); background: color-mix(in srgb, var(--bk-accent) 12%, transparent); font-weight: 700; }
.bk-day.has:hover { background: color-mix(in srgb, var(--bk-accent) 22%, transparent); }
.bk-day.is-picked { background: var(--bk-accent); color: #fff; }
.bk-day.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.bk-tz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: .85rem; color: #4A5069; }
.bk-tz label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.bk-tz select { font: inherit; padding: 6px 8px; border: 1px solid #CDD1E0; border-radius: 8px; max-width: 100%; min-width: 0; flex: 1 1 200px; background: #fff; color: inherit; }
.bk-linkbtn { background: none; border: 0; padding: 0 4px; color: var(--bk-accent, #4338CA); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.bk-times-head { font-size: .95rem; margin: 6px 0 10px; }
.bk-time-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.bk-time { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--bk-accent); border-radius: 10px; color: var(--bk-accent); font-weight: 700; text-decoration: none; }
.bk-time:hover { background: var(--bk-accent); color: #fff; }
.bk-muted { color: #4A5069; font-size: .9rem; }
.bk-chosen { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bk-accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--bk-accent) 25%, #fff); margin-bottom: 14px; }
.bk-chosen .mud-icon-root { color: var(--bk-accent); margin-top: 2px; }
.bk-chosen > div { flex: 1; min-width: 0; }
.bk-chosen small { display: block; color: #4A5069; }
.bk-chosen a { font-weight: 600; color: var(--bk-accent); }
.bk-form .pt-btn, .bk-actions .pt-btn { background: var(--bk-accent); }
.bk-submit { width: 100%; min-height: 46px; font-size: 1rem; }
.bk-note { margin-top: 8px; text-align: center; }
.bk-hero { display: flex; gap: 14px; align-items: center; margin: 8px 0 12px; }
.bk-avatar { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nx-accent, #4338CA); color: #fff; font-weight: 700; font-size: 1.2rem; flex: none; }
.bk-hero .bk-title { margin: 0; }
.bk-intro { white-space: pre-wrap; color: #344054; line-height: 1.5; }
.bk-types { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bk-type { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #E4E6F0; border-radius: 14px; padding: 16px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.bk-type:hover { border-color: var(--bk-accent); box-shadow: 0 4px 14px rgba(16,24,40,.08); }
.bk-type-bar { width: 6px; align-self: stretch; border-radius: 6px; background: var(--bk-accent); flex: none; }
.bk-type-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.bk-type-body strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.bk-type-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #4A5069; font-size: .86rem; }
.bk-type-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.bk-type-desc { color: #4A5069; font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-type .bk-chev { color: var(--bk-accent); flex: none; }
.bk-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; margin-bottom: 12px; border: 1px solid; }
.bk-banner small { display: block; font-weight: 400; margin-top: 2px; }
.bk-banner.is-ok { background: #ECFDF3; border-color: #ABEFC6; color: #054F31; }
.bk-banner.is-wait { background: #FFFAEB; border-color: #FEDF89; color: #7A2E0E; }
.bk-banner.is-off { background: #F2F4F7; border-color: #D0D5DD; color: #344054; }
.bk-summary-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.bk-summary-head .bk-title { margin-bottom: 8px; }
.bk-dl { display: grid; gap: 10px; margin: 6px 0 14px; }
.bk-dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.bk-dl dt { color: #4A5069; font-size: .88rem; }
.bk-dl dd { margin: 0; overflow-wrap: anywhere; }
.bk-dl dd small { display: block; color: #4A5069; font-size: .82rem; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-actions .pt-btn { display: inline-flex; gap: 6px; align-items: center; }
.bk-actions .pt-btnghost { background: transparent !important; }
.bk-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.bk-pill.is-ok { background: #DCFCE7; color: #166534; }
.bk-pill.is-wait { background: #FEF3C7; color: #92400E; }
.bk-pill.is-off { background: #F1F1F3; color: #4A5069; }
.bk-pill.is-bad { background: #FEE4E2; color: #912018; }
.bk-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 18px 0 4px; font-size: .82rem; }
.bk-langs a { color: #4A5069; text-decoration: none; }
.bk-langs a.is-on { color: inherit; font-weight: 700; }
.bk-langs a:hover { text-decoration: underline; }
@media (max-width: 860px) {
    .bk-shell { grid-template-columns: minmax(0, 1fr); }
    .bk-info { border-inline-end: 0; border-bottom: 1px solid #E4E6F0; padding: 18px; }
    .bk-main { padding: 18px; }
}
@media (max-width: 640px) {
    .bk-picker { grid-template-columns: minmax(0, 1fr); }
    .bk-time-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; }
    .bk-day { width: 38px; height: 38px; }
    .bk-shell { border-radius: 12px; }
    .bk-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
html[data-theme="dark"] .bk-shell, html[data-theme="dark"] .bk-type { background: var(--nx-surface); border-color: var(--nx-ring); }
html[data-theme="dark"] .bk-info, html[data-theme="dark"] .bk-main { border-inline-end-color: var(--nx-ring); border-bottom-color: var(--nx-ring); }
html[data-theme="dark"] .bk-langs a.is-on { color: var(--nx-ink); }
html[data-theme="dark"] .bk-org, html[data-theme="dark"] .bk-back, html[data-theme="dark"] .bk-muted, html[data-theme="dark"] .bk-grid th, html[data-theme="dark"] .bk-tz,
html[data-theme="dark"] .bk-chosen small, html[data-theme="dark"] .bk-type-meta, html[data-theme="dark"] .bk-type-desc, html[data-theme="dark"] .bk-dl dt, html[data-theme="dark"] .bk-dl dd small,
html[data-theme="dark"] .bk-langs a { color: var(--nx-muted); }
html[data-theme="dark"] .bk-facts, html[data-theme="dark"] .bk-desc, html[data-theme="dark"] .bk-intro { color: var(--nx-ink); }
html[data-theme="dark"] .bk-day { color: #5B6180; }
html[data-theme="dark"] .bk-day.has { color: #fff; background: color-mix(in srgb, var(--bk-accent) 45%, transparent); }
html[data-theme="dark"] .bk-day.is-picked { background: var(--bk-accent); }
html[data-theme="dark"] .bk-time { color: #fff; border-color: color-mix(in srgb, var(--bk-accent) 70%, #fff); background: color-mix(in srgb, var(--bk-accent) 25%, transparent); }
html[data-theme="dark"] .bk-chip { border-color: var(--nx-ring-strong, #3A3F63); }
html[data-theme="dark"] .bk-tz select { background: var(--nx-surface-2); border-color: var(--nx-ring-strong, #3A3F63); }
html[data-theme="dark"] .bk-chosen { background: color-mix(in srgb, var(--bk-accent) 18%, var(--nx-surface)); border-color: color-mix(in srgb, var(--bk-accent) 40%, var(--nx-surface)); }
html[data-theme="dark"] .bk-chosen a, html[data-theme="dark"] .bk-nav, html[data-theme="dark"] .bk-linkbtn { color: #C7D2FE; }
html[data-theme="dark"] .bk-banner.is-ok { background: #0B3B24; border-color: #14532D; color: #BBF7D0; }
html[data-theme="dark"] .bk-banner.is-wait { background: #3B2A0B; border-color: #78350F; color: #FDE68A; }
html[data-theme="dark"] .bk-banner.is-off { background: var(--nx-surface-2); border-color: var(--nx-ring); color: var(--nx-ink); }
html[data-theme="dark"] .bk-pill.is-ok { background: #14532D; color: #BBF7D0; }
html[data-theme="dark"] .bk-pill.is-wait { background: #78350F; color: #FDE68A; }
html[data-theme="dark"] .bk-pill.is-off { background: var(--nx-surface-3); color: var(--nx-muted); }
html[data-theme="dark"] .bk-pill.is-bad { background: #7A271A; color: #FECDCA; }
/* The team's booking screens (#308) */
.bkm-tip { display: flex; gap: 12px; align-items: center; padding: 12px 16px; margin-bottom: 12px; background: var(--nx-accent-soft, #EEF0FF); border-color: transparent; }
.bkm-tip .mud-icon-root { color: var(--nx-accent); flex: none; }
.bkm-page { padding: 18px; margin-bottom: 16px; }
.bkm-page-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.bkm-page-title { min-width: 0; }
.bkm-page-title h2 { margin: 0 0 4px; font-size: 1.05rem; }
.bkm-url { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9rem; overflow-wrap: anywhere; }
.bkm-page-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bkm-empty { padding: 18px; }
.bkm-types, .bkm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bkm-type { display: flex; gap: 12px; align-items: stretch; border: 1px solid var(--nx-ring, #E4E6F0); border-radius: 12px; padding: 12px; background: var(--nx-surface, #fff); }
.bkm-type.is-off { opacity: .65; }
.bkm-type-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bkm-type-name { font-weight: 700; font-size: 1rem; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.bkm-type-name:hover { text-decoration: underline; }
.bkm-type-foot { display: flex; gap: 10px; align-items: center; font-size: .85rem; }
.bkm-type-actions { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bkm-slug { display: flex; align-items: center; gap: 4px; }
.bkm-slug span { color: var(--nx-muted); white-space: nowrap; font-size: .9rem; }
.bkm-slug input { flex: 1; min-width: 0; }
.bkm-edit { max-width: 900px; }
.bkm-edit .nx-card { margin-bottom: 14px; }
.bkm-colour { width: 56px; height: 38px; padding: 2px; border: 1px solid var(--nx-ring-strong, #CDD1E0); border-radius: 8px; background: transparent; }
.bkm-check-top { margin-top: 26px; }
.bkm-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bkm-radio { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--nx-ring-strong, #CDD1E0); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.bkm-radio.is-on { border-color: var(--nx-accent); box-shadow: 0 0 0 1px var(--nx-accent) inset; }
.bkm-radio small { display: block; color: var(--nx-muted); font-size: .82rem; }
.bkm-hosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.bkm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bkm-chips .bk-chip { cursor: pointer; --bk-accent: var(--nx-accent); }
.bkm-chips .bk-chip:focus-within { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.bkm-chips button.bk-chip { font: inherit; font-size: .88rem; font-weight: 600; }
.bkm-chips button.bk-chip:not(.is-on) { background: transparent; }
.bkm-move-times { margin: 8px 0 4px; }
.bkm-sr { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bkm-week { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; }
.bkm-day { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--nx-ring, #F2F3F9); }
.bkm-day-name { margin: 0; text-transform: capitalize; }
.bkm-ranges { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.bkm-range { display: inline-flex; gap: 4px; align-items: center; }
.bkm-range input, .bkm-override input[type=time] { width: 112px; }
.bkm-sub { margin-top: 8px; }
.bkm-override { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.bkm-override input[type=date] { width: 160px; }
.bkm-limits .set-input { max-width: 200px; }
.bkm-price { display: flex; gap: 6px; }
.bkm-price input:first-child { flex: 1; min-width: 0; max-width: 180px; }
.bkm-cur { width: 76px; text-transform: uppercase; }
.bkm-save { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, var(--nx-bg, #F7F7FA) 30%); }
.bkm-row { display: grid; grid-template-columns: 6px 130px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; }
.bkm-row .bk-type-bar { align-self: stretch; }
.bkm-when { display: flex; flex-direction: column; font-size: .9rem; }
.bkm-when span { color: var(--nx-muted); }
.bkm-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bkm-open { display: block; width: 100%; background: none; border: 0; padding: 0; text-align: start; font: inherit; color: inherit; cursor: pointer; overflow-wrap: anywhere; }
.bkm-open:hover strong { text-decoration: underline; }
.bkm-row-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bkm-details, .bkm-reason { grid-column: 2 / -1; }
.bkm-details .bk-dl { margin: 4px 0 0; }
.bkm-reason label { font-size: .88rem; display: block; margin-bottom: 4px; }
.bkm-reason-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
@media (max-width: 760px) {
    .bkm-row { grid-template-columns: 6px minmax(0, 1fr) auto; }
    .bkm-row .bkm-when { grid-column: 2; }
    .bkm-row .bkm-who { grid-column: 2 / -1; }
    .bkm-row .bk-pill { grid-column: 3; grid-row: 1; }
    .bkm-row-actions { grid-column: 2 / -1; justify-content: flex-start; }
    .bkm-type { flex-wrap: wrap; }
    .bkm-type-actions { width: 100%; justify-content: flex-start; }
    .bkm-day { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
html[data-theme="dark"] .bkm-tip { background: rgba(129,140,248,.14); }
.bk-actions + .pt-help { margin: 10px 0 0; }
.bk-time, .bk-chosen strong { unicode-bidi: plaintext; }
.bk-actions .pt-btn:not(.pt-btnghost), .bk-actions .pt-btn:not(.pt-btnghost):visited { color: #fff; }
html[dir="rtl"] .bk-back::before { content: "\2192\00a0"; }
.bk-locked { margin: 10px 0 0; }


/* ---- SMS and WhatsApp (#366 M4) ---- */
.msg-chan { display: inline-block; font-size: 0.6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(79,70,229,.12); color: #4338CA; letter-spacing: .02em; }
.msg-chan.is-wa { background: rgba(22,163,74,.13); color: #15803D; }
html[data-theme="dark"] .msg-chan { color: #C7D2FE; }
html[data-theme="dark"] .msg-chan.is-wa { color: #86EFAC; }
.msg-st { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-ink-2); margin-inline-start: .25rem; }
.msg-st.is-delivered, .msg-st.is-read { background: rgba(22,163,74,.12); color: #15803D; }
.msg-st.is-failed, .msg-st.is-undelivered { background: rgba(220,38,38,.10); color: #B91C1C; }
.msg-st.is-held, .msg-st.is-skipped, .msg-st.is-pending { background: rgba(245,158,11,.14); color: #B45309; }
html[data-theme="dark"] .msg-st.is-delivered, html[data-theme="dark"] .msg-st.is-read { color: #86EFAC; }
html[data-theme="dark"] .msg-st.is-failed, html[data-theme="dark"] .msg-st.is-undelivered { color: #FCA5A5; }
html[data-theme="dark"] .msg-st.is-held, html[data-theme="dark"] .msg-st.is-skipped, html[data-theme="dark"] .msg-st.is-pending { color: #FCD34D; }
.msg-thread { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-height: 420px; overflow-y: auto; }
.msg-bubble { max-width: min(560px, 88%); padding: .55rem .75rem; border-radius: 14px; background: var(--nx-surface-2, #F4F5FB); border: 1px solid var(--nx-ring, #E4E6F0); }
.msg-bubble.is-out { align-self: flex-end; background: rgba(79,70,229,.08); border-color: rgba(79,70,229,.22); border-end-end-radius: 4px; }
.msg-bubble.is-in { align-self: flex-start; border-end-start-radius: 4px; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-meta { margin-top: .25rem; font-size: .75rem; color: var(--nx-muted, #6B7280); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.msg-compose { border-top: 1px solid var(--nx-line, #E4E6F0); padding-top: .75rem; display: grid; gap: .5rem; }
.msg-compose .dk-add select { flex: 1 1 10rem; min-width: 0; }
.sms-counter { font-size: .75rem; color: var(--nx-muted, #6B7280); margin-top: .25rem; }
.sms-counter.is-multi { color: #B45309; }
html[data-theme="dark"] .sms-counter.is-multi { color: #FCD34D; }
.ms-fields { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.ms-field { border: 1px dashed var(--nx-ring-strong, #CBD0E1); background: transparent; color: inherit; border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; cursor: pointer; }
.ms-field:hover, .ms-field:focus-visible { border-style: solid; border-color: var(--mud-palette-primary, #4F46E5); }
.ms-preview { margin: .5rem 0; padding: .6rem .75rem; border-radius: 10px; background: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.22); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; }
.ms-var { margin-top: .35rem; align-items: center; }
.ms-var .dk-mono { min-width: 2.5rem; }
.ms-tpls { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ms-tpls li { border-bottom: 1px solid var(--nx-line, #E4E6F0); padding-bottom: .5rem; }
.ms-tpls .pf-hint { white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-hooks .sl-copy { margin-bottom: .35rem; }
.ab-sig { margin: .5rem 0; padding: .5rem .75rem; border-radius: 10px; font-size: .875rem; background: var(--nx-surface-3, #EEF0F7); }
.ab-sig.is-clear { background: rgba(22,163,74,.12); color: #166534; }
.ab-sig.is-likely { background: rgba(79,70,229,.10); color: #3730A3; }
.ab-sig.is-tooclose, .ab-sig.is-toofew { background: rgba(245,158,11,.13); color: #92400E; }
html[data-theme="dark"] .ab-sig.is-clear { color: #86EFAC; }
html[data-theme="dark"] .ab-sig.is-likely { color: #C7D2FE; }
html[data-theme="dark"] .ab-sig.is-tooclose, html[data-theme="dark"] .ab-sig.is-toofew { color: #FCD34D; }
@media (max-width: 600px) { .msg-bubble { max-width: 100%; } }

/* ---- Campaign ROI (#366 M3) ---- */
.roi-up { color: #15803D; font-weight: 600; }
.roi-down { color: #B91C1C; font-weight: 600; }
html[data-theme="dark"] .roi-up { color: #86EFAC; }
html[data-theme="dark"] .roi-down { color: #FCA5A5; }
.roi-chan { display: inline-block; font-size: .6875rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--nx-surface-3, #EEF0F7); color: var(--nx-ink-2, #4B5563); }
.roi-add { margin-inline-start: .35rem; width: 1.4rem; height: 1.4rem; border-radius: 999px; border: 1px dashed var(--nx-ring-strong, #CBD0E1); background: transparent; color: inherit; cursor: pointer; line-height: 1; }
.roi-add:hover, .roi-add:focus-visible { border-style: solid; border-color: var(--mud-palette-primary, #4F46E5); }
.roi-filters { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* ---- Loyalty and referral (#366 M5) ---- */
.ly-tier { display: inline-block; margin-inline-start: .4rem; font-size: .6875rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; vertical-align: middle; }
html[data-theme="dark"] .ly-tier { background: #451A03; color: #FDE68A; }
.ly-stats { margin-bottom: .75rem; }
.ly-stats small { color: var(--nx-ink-2, #4B5563); font-size: .75rem; }
.ly-adjust { margin-top: .5rem; }
.ly-history { margin-top: .75rem; }
.ly-tierrow { grid-template-columns: minmax(0, 1fr) 9rem auto; }
.ly-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.ly-reward { border: 1px solid var(--nx-ring, #E4E6F0); border-radius: 12px; padding: .75rem .9rem; display: grid; gap: .2rem; align-content: start; }
.ly-reward.is-off { opacity: .6; }
.ly-reward-pts { font-size: 1.25rem; font-weight: 700; color: var(--mud-palette-primary, #4F46E5); }
.ly-reward-pts small { font-size: .75rem; font-weight: 500; color: var(--nx-ink-2, #4B5563); }
.pt-copy { width: 100%; font: inherit; padding: 10px; border: 1px solid #CDD1E0; border-radius: 8px; background: #F7F8FC; color: inherit; }
html[data-theme="dark"] .pt-copy { background: var(--nx-surface-2, #1E2233); border-color: var(--nx-ring); }
.pt-rewards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.pt-rewards li label { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid #E4E6F0; border-radius: 10px; padding: .6rem .75rem; cursor: pointer; }
.pt-rewards li label span { display: grid; gap: .15rem; }
.pt-rewards li label small { color: #4A5069; }
.pt-rewards li.is-off label { opacity: .55; cursor: default; }
html[data-theme="dark"] .pt-rewards li label { border-color: var(--nx-ring); }
html[data-theme="dark"] .pt-rewards li label small { color: var(--nx-ink-2); }

/* ---- Content calendar (#366 M6): the month grid is the shared calendar (sc-*) of the sales calendar; only the content colours are its own ---- */
.cc-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cc-nav { display: flex; align-items: center; gap: .35rem; }
.cc-month { font-size: 1.1rem; margin: 0 .35rem; min-width: 9rem; text-align: center; }
.cc-legend { margin-top: 0; }
.cc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: .75rem; align-items: start; }
.cc-cal .sc-day { cursor: default; }
button.cc-item { font: inherit; font-size: .75rem; width: 100%; text-align: start; border: 0; border-inline-start: 3px solid; }
button.cc-item:not([draggable="true"]) { cursor: pointer; }
button.cc-item:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
.cc-item.st-cancelled { text-decoration: line-through; opacity: .55; }
.cc-item.st-published { opacity: .75; }
.cc-item.st-inreview::after { content: "•"; margin-inline-start: auto; color: #B54708; font-weight: 700; }
.cc-ideas { display: grid; gap: .35rem; }
.cc-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; }
.kc-blog { background: #F0F9FF; color: #026AA2; border-color: #0BA5EC; }
.kc-social { background: #F4F3FF; color: #5925DC; border-color: #7A5AF8; }
.kc-email { background: #EEF4FF; color: #3538CD; border-color: #6172F3; }
.kc-sms { background: #ECFDF3; color: #067647; border-color: #17B26A; }
.kc-whatsapp { background: #EDFCF2; color: #087443; border-color: #16B364; }
.kc-event { background: #FFFAEB; color: #B54708; border-color: #F79009; }
.kc-other { background: var(--nx-surface-2); color: var(--nx-ink-2); border-color: var(--nx-ring-strong); }
html[data-theme="dark"] .kc-blog { background: rgba(11, 165, 236, .16); color: #7CD4FD; }
html[data-theme="dark"] .kc-social { background: rgba(122, 90, 248, .18); color: #BDB4FE; }
html[data-theme="dark"] .kc-email { background: rgba(97, 114, 243, .18); color: #B2CCFF; }
html[data-theme="dark"] .kc-sms { background: rgba(23, 178, 106, .16); color: #75E0A7; }
html[data-theme="dark"] .kc-whatsapp { background: rgba(22, 179, 100, .16); color: #73E2A3; }
html[data-theme="dark"] .kc-event { background: rgba(247, 144, 9, .16); color: #FEC84B; }
@media (max-width: 900px) { .cc-wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---- Support targets paused while a ticket waits (#365 follow-up) ---- */
.dk-due.paused { color: var(--nx-muted); font-style: italic; }
.dk-paused-note { display: flex; gap: .35rem; align-items: flex-start; font-size: .8125rem; color: var(--nx-ink-2); background: var(--nx-surface-2); border-radius: var(--nx-r-sm); padding: .4rem .55rem; margin: .25rem 0 .5rem; }
.dk-paused-note .mud-icon-root { flex: none; margin-top: .1rem; color: var(--nx-muted); }
.bh-pause { border: 0; padding: 0; margin: .75rem 0 .25rem; min-width: 0; }
.bh-pause > legend { font-weight: 600; font-size: .875rem; padding: 0; margin-bottom: .1rem; }
.bh-pause .dk-check { align-items: flex-start; }
.bh-pause .dk-check input { margin-top: .2rem; flex: none; }
/* Booking reminders by text (#308 follow-up): the setting on the meeting type and the separate agreement on the booking page. */
.bkm-text > .set-field { margin: .5rem 0 0; }
.bk-text-reminders { margin: .25rem 0 .5rem; }
.bk-text-reminders .pt-check { margin-bottom: .5rem; }
.bkm-text .pf-hint { display: block; margin-top: .35rem; }

/* =============================================================================
   Time logging (#438): "Log time" anywhere, Close my day, Time logging for managers
   ============================================================================= */
.lt-trigger { display: inline-flex; align-items: center; vertical-align: middle; }
/* On rows and cards the clock shows on hover or keyboard focus; on touch screens (no hover) it is always there. */
.lt-hover { opacity: 0; transition: opacity .12s ease; }
tr:hover .lt-hover, .kanban-card:hover .lt-hover, .lt-hover:focus-within, .mud-table-row:hover .lt-hover, .ib-row:hover .lt-hover { opacity: 1; }
@media (hover: none) { .lt-hover { opacity: 1; } }
.tt-title-line { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; }
.kanban-code { display: flex; align-items: center; gap: .25rem; }
.kanban-log { margin-inline-start: auto; }
.kanban-log .mud-icon-button { padding: 2px; }
.tp-log { margin-inline-start: .5rem; }
.sr-hit-row { display: flex; align-items: center; border-bottom: 1px solid var(--nx-ring); }
.sr-hit-row .sr-hit { flex: 1; min-width: 0; border-bottom: 0; }
.sr-hit-row .sr-log { padding-inline-end: .75rem; }

/* The one Log time form: a narrow side panel above everything (also above an open task panel); a bottom sheet on phones. */
.side-panel-scrim:has(+ .lt-panel) { z-index: 1399; }
.side-panel.lt-panel { width: min(420px, 100vw); z-index: 1400; }
.lt-head { min-width: 0; }
.lt-head .nx-card-title { display: flex; align-items: center; gap: .375rem; }
.lt-task { font-weight: 600; font-size: .9375rem; color: var(--nx-ink); margin-top: .25rem; overflow-wrap: anywhere; }
.lt-project { font-size: .75rem; color: var(--nx-muted); }
.lt-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .5rem; }
.lt-chip { min-height: 36px; min-width: 52px; padding: .25rem .75rem; border: 1px solid var(--nx-ring-strong); border-radius: 99px; background: var(--nx-surface); color: var(--nx-ink); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.lt-chip:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
.lt-chip.is-on { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.lt-chip:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.lt-duration { font-size: 1.125rem; font-weight: 600; max-width: none; font-variant-numeric: tabular-nums; }
.lt-reads { font-size: .75rem; color: var(--nx-muted); margin-top: .25rem; min-height: 1.1em; }
.lt-reads.is-bad { color: #B42318; }
.lt-day { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.lt-day .set-input { width: auto; flex: 1 1 150px; }
.lt-note { max-width: none; resize: vertical; }
.lt-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .25rem 0 .75rem; }
.lt-totals { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--nx-ink-2); }
.lt-dim { color: var(--nx-muted); }
.lt-bar { height: 6px; border-radius: 99px; background: var(--nx-surface-3); overflow: hidden; margin-top: .5rem; }
.lt-bar span { display: block; height: 100%; background: var(--nx-accent); transition: width .2s ease; }
.lt-bar span.is-over { background: var(--nx-critical); }
.lt-error { margin-top: .5rem; font-size: .8125rem; color: #B42318; }
.lt-keys { margin-inline-end: auto; font-size: .7188rem; color: var(--nx-muted); }
html[data-theme="dark"] .lt-reads.is-bad, html[data-theme="dark"] .lt-error { color: #FCA5A5; }
.set-field > .lt-chips + .set-input { margin-top: 0; }
@media (max-width: 600px) {
    .side-panel.lt-panel { top: auto; left: 0; right: 0; width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .lt-keys { display: none; }
}

/* The end-of-day prompt in the top bar */
.cd-prompt { display: inline-flex; align-items: center; gap: .3rem; height: 32px; padding: 0 .75rem; margin-inline-end: .5rem; border-radius: 99px; border: 1px solid var(--nx-accent); background: var(--nx-accent-soft); color: var(--nx-accent); font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cd-prompt:hover { background: var(--nx-accent); color: #fff; }
@media (max-width: 600px) { .cd-prompt-text { display: none; } .cd-prompt { padding: 0 .5rem; } }

/* My day: the Close my day card */
.md-close { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; margin-bottom: 1rem; border: 1px solid var(--nx-accent); border-radius: 12px; background: linear-gradient(120deg, var(--nx-accent-soft), var(--nx-surface) 75%); color: var(--nx-ink); text-decoration: none; }
.md-close:hover { box-shadow: var(--nx-sh-2); }
.md-close.is-closed { border-color: rgba(12, 163, 12, .45); background: linear-gradient(120deg, rgba(12, 163, 12, .1), var(--nx-surface) 75%); }
.md-close-icon { color: var(--nx-accent); }
.md-close.is-closed .md-close-icon { color: #0A7A0A; }
.md-close-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-close-title { font-weight: 650; }
.md-close-sub { font-size: .8125rem; color: var(--nx-ink-2); }
.md-close-go { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 .875rem; border-radius: 10px; background: var(--nx-accent); color: #fff; font-weight: 600; font-size: .8125rem; }
.md-close.is-closed .md-close-go { background: transparent; color: var(--nx-ink-2); border: 1px solid var(--nx-ring-strong); }
html[data-theme="dark"] .md-close.is-closed .md-close-icon { color: #86EFAC; }

/* Close my day */
.cd-banner { flex-wrap: wrap; }
.cd-banner > div { flex: 1; min-width: 200px; }
.cd-banner-sub { font-size: .75rem; opacity: .85; }
.cd-sum { padding: .875rem 1.125rem; margin-bottom: 1rem; }
.cd-sum.is-under .pl-cap-plan, .cd-sum.is-over .pl-cap-plan { background: var(--nx-warning); }
.pl-cap-note.is-good { color: #0A7A0A; }
html[data-theme="dark"] .pl-cap-note.is-good { color: #86EFAC; }
.cd-sec { padding: 1rem 1.125rem; margin-bottom: 1rem; }
.cd-sec h2 { font-size: .9375rem; font-weight: 650; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.cd-count { font-size: .75rem; font-weight: 600; color: var(--nx-muted); }
.cd-hint { margin: .25rem 0 .75rem; }
.cd-entry { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-top: 1px solid var(--nx-ring); }
.cd-entry:first-of-type { border-top: 0; }
.cd-entry-icon { color: var(--nx-muted); flex: none; }
.cd-entry-main { flex: 1; min-width: 0; }
.cd-entry-title { font-size: .875rem; font-weight: 560; overflow-wrap: anywhere; }
.cd-entry-h { flex: none; font-variant-numeric: tabular-nums; }
.cd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: .75rem; color: var(--nx-muted); }
.cd-line { padding: .75rem; margin-bottom: .5rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r); background: var(--nx-surface); }
.cd-line.has-hours { border-color: var(--nx-accent); box-shadow: inset 3px 0 0 var(--nx-accent); }
.cd-line-top { display: flex; align-items: flex-start; gap: .75rem; }
.cd-line-main { flex: 1; min-width: 0; }
.cd-line-title { font-weight: 600; font-size: .9375rem; color: var(--nx-ink); text-decoration: none; overflow-wrap: anywhere; }
.cd-line-title:hover { color: var(--nx-accent); text-decoration: underline; }
.cd-why { padding: 0 .4rem; border-radius: 99px; background: var(--nx-surface-3); color: var(--nx-ink-2); font-weight: 560; }
.cd-logged-chip { padding: 0 .4rem; border-radius: 99px; background: rgba(12, 163, 12, .12); color: #0A6B0A; font-weight: 600; }
html[data-theme="dark"] .cd-logged-chip { color: #86EFAC; background: rgba(34, 197, 94, .16); }
.cd-hours { display: flex; align-items: center; gap: .25rem; flex: none; }
.cd-step { flex: none; width: 40px; height: 40px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-xs); background: var(--nx-surface); color: var(--nx-ink); font-size: 1.125rem; font-weight: 600; cursor: pointer; }
.cd-step:hover:not(:disabled) { border-color: var(--nx-accent); color: var(--nx-accent); }
.cd-step:disabled { opacity: .45; cursor: default; }
.cd-hours-in { width: 92px; height: 40px; text-align: center; font-weight: 650; font-size: 1rem; font-variant-numeric: tabular-nums; }
.cd-hours-in.is-suggested { border-style: dashed; border-color: var(--nx-accent); background: var(--nx-accent-soft); color: var(--nx-accent); }
.cd-hours-in.is-bad { border-color: var(--nx-critical); }
.cd-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .5rem; font-size: .75rem; color: var(--nx-accent); }
.cd-suggest .lt-chip { min-height: 28px; font-size: .75rem; }
.cd-suggest-tag { padding: 0 .4rem; border-radius: 99px; border: 1px dashed var(--nx-accent); font-weight: 600; }
.cd-line-more { margin-top: .375rem; }
.cd-more-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem 0; border: 0; background: none; color: var(--nx-ink-2); font: inherit; font-size: .75rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-more-btn:hover { color: var(--nx-accent); }
.cd-line-form { margin-top: .375rem; }
.cd-line-form .set-input { max-width: none; resize: vertical; }
.cd-add { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--nx-ring-strong); }
.cd-add-l { display: flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; }
.cd-add .set-input { max-width: none; }
.cd-found { display: flex; flex-direction: column; margin-top: .375rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); overflow: hidden; }
.cd-found-item { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; padding: .5rem .75rem; border: 0; border-top: 1px solid var(--nx-ring); background: var(--nx-surface); color: var(--nx-ink); font: inherit; font-size: .875rem; text-align: start; cursor: pointer; }
.cd-found-item:first-child { border-top: 0; }
.cd-found-item:hover, .cd-found-item:focus-visible { background: var(--nx-accent-soft); }
.cd-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.cd-notes .set-input { max-width: none; resize: vertical; }
.cd-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; margin: 0 -.25rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg) var(--nx-r-lg) 0 0; background: var(--nx-surface); box-shadow: var(--nx-sh-pop); }
.cd-bar-text { flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font-size: .875rem; }
.cd-bar-text span { color: var(--nx-ink-2); }
.cd-carry { width: 100%; font-size: .8125rem; }
@media (max-width: 900px) { .cd-notes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .cd-line-top { flex-direction: column; align-items: stretch; }
    .cd-hours { justify-content: flex-end; }
    .cd-hours-in { flex: 1 1 0; width: auto; min-width: 0; max-width: none; }
    .cd-bar .mud-button-root { width: 100%; }
}

/* Time logging (managers) */
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.tl-bar .ts-tabs { margin-bottom: 0; border-bottom: 0; }
.tl-month { font-weight: 600; font-size: .875rem; min-width: 8rem; text-align: center; }
.tl-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-inline-start: auto; }
.tl-filters .set-input { width: auto; max-width: 200px; height: 34px; padding: .25rem .5rem; }
.tl-filters .tl-search { width: 170px; }
.tl-stats { margin-bottom: .75rem; }
.tl-legend { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin-bottom: .75rem; font-size: .75rem; color: var(--nx-ink-2); }
.tl-legend-item { display: inline-flex; align-items: center; gap: .375rem; }
.tl-dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--nx-ring-strong); }
.tl-card { padding: 0; overflow: hidden; }
.tl-scroll { overflow-x: auto; max-width: 100%; }
.tl-scroll:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.tl-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.tl-grid th, .tl-grid td { padding: .375rem; border-bottom: 1px solid var(--nx-ring); text-align: center; white-space: nowrap; }
.tl-grid thead th { position: sticky; top: 0; background: var(--nx-surface-2); font-weight: 600; color: var(--nx-ink-2); font-size: .7188rem; z-index: 1; }
.tl-grid th.tl-person { position: sticky; left: 0; z-index: 2; background: var(--nx-surface); text-align: start; min-width: 190px; max-width: 240px; border-inline-end: 1px solid var(--nx-ring); }
.tl-grid thead th.tl-person { background: var(--nx-surface-2); z-index: 3; }
.tl-day { min-width: 74px; }
.tl-day span { display: block; }
.tl-dow { text-transform: uppercase; letter-spacing: .04em; }
.tl-dnum { color: var(--nx-ink); font-size: .75rem; }
.tl-day.is-today { color: var(--nx-accent); box-shadow: inset 0 -2px 0 var(--nx-accent); }
.tl-who { display: flex; flex-direction: column; min-width: 0; }
.tl-name { font-weight: 600; color: var(--nx-ink); overflow: hidden; text-overflow: ellipsis; }
.tl-sub { display: flex; flex-wrap: wrap; gap: .375rem; font-size: .6875rem; color: var(--nx-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.tl-streak { display: inline-flex; align-items: center; gap: 1px; color: #B45309; font-weight: 600; }
.tl-streak .mud-icon-root { font-size: .875rem; }
html[data-theme="dark"] .tl-streak { color: #FCD38A; }
.tl-cell { padding: 3px !important; }
.tl-cell-btn { width: 100%; min-width: 66px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid transparent; border-radius: var(--nx-r-sm); background: var(--tl-bg, transparent); color: var(--tl-ink, var(--nx-ink)); font: inherit; cursor: pointer; }
.tl-cell-btn:hover, .tl-cell-btn:focus-visible { border-color: var(--nx-accent); outline: none; }
.tl-h { font-weight: 650; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tl-w { font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .9; }
.tl-total { min-width: 84px; }
.tl-total b { display: block; font-variant-numeric: tabular-nums; }
.tl-total .tl-sub { justify-content: center; }
.tl-act { min-width: 44px; }
/* Day states: a soft fill and its word (never colour alone). */
.tl-s-closed { --tl-bg: rgba(12, 163, 12, .12); --tl-ink: #0A5C0A; }
.tl-s-logged { --tl-bg: rgba(250, 178, 25, .16); --tl-ink: #7A4A00; }
.tl-s-under { --tl-bg: rgba(236, 131, 90, .18); --tl-ink: #8A3412; }
.tl-s-missing { --tl-bg: rgba(208, 59, 59, .13); --tl-ink: #9B1C1C; }
.tl-s-today { --tl-bg: var(--nx-accent-soft); --tl-ink: var(--nx-accent); }
.tl-s-leave { --tl-bg: rgba(99, 102, 241, .08); --tl-ink: var(--nx-ink-2); }
.tl-s-holiday { --tl-bg: rgba(14, 165, 233, .1); --tl-ink: #075985; }
.tl-s-dayoff { --tl-bg: var(--nx-surface-3); --tl-ink: var(--nx-muted); }
.tl-dot.tl-s-closed, .tl-dot.tl-s-logged, .tl-dot.tl-s-under, .tl-dot.tl-s-missing, .tl-dot.tl-s-today, .tl-dot.tl-s-leave, .tl-dot.tl-s-holiday, .tl-dot.tl-s-dayoff { background: var(--tl-bg); border-color: var(--tl-ink); }
html[data-theme="dark"] .tl-s-closed { --tl-bg: rgba(34, 197, 94, .18); --tl-ink: #86EFAC; }
html[data-theme="dark"] .tl-s-logged { --tl-bg: rgba(250, 178, 25, .18); --tl-ink: #FCD38A; }
html[data-theme="dark"] .tl-s-under { --tl-bg: rgba(236, 131, 90, .2); --tl-ink: #FDBA9A; }
html[data-theme="dark"] .tl-s-missing { --tl-bg: rgba(239, 68, 68, .18); --tl-ink: #FCA5A5; }
html[data-theme="dark"] .tl-s-holiday { --tl-bg: rgba(14, 165, 233, .16); --tl-ink: #7DD3FC; }
.tl-cell-empty { display: block; min-height: 44px; }
.tl-note { font-size: .875rem; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.tl-detail-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .75rem; }
@media (max-width: 600px) {
    .tl-filters { margin-inline-start: 0; width: 100%; }
    .tl-filters .set-input, .tl-filters .tl-search { flex: 1 1 140px; max-width: none; width: auto; }
    .tl-grid th.tl-person { min-width: 130px; max-width: 150px; }
}

/* Settings > Time logging */
.tls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1rem; }
.tls-card { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .625rem; }
.tls-card h2 { font-size: .9375rem; font-weight: 650; margin: 0 0 .25rem; }
.tls-card .set-field { margin: 0; }
.tls-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--nx-ink-2); }
.tls-num { width: 96px; }
.tls-sel { width: auto; max-width: 100%; }
.tls-team { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem 0; border-top: 1px solid var(--nx-ring); }
.tls-team-name { font-size: .875rem; font-weight: 560; }
.tls-team-name small { color: var(--nx-muted); font-weight: 400; }
.tls-foot { display: flex; justify-content: flex-end; margin-top: 1rem; }
html[data-theme="dark"] .cd-hours-in.is-suggested, html[data-theme="dark"] .cd-suggest, html[data-theme="dark"] .cd-suggest-tag, html[data-theme="dark"] .md-close-icon, html[data-theme="dark"] .cd-prompt { color: #C7C8FE; }
html[data-theme="dark"] .cd-suggest-tag { border-color: #A5B4FC; }
html[data-theme="dark"] .lt-chip.is-on { color: #fff; }

/* ---- Project costing (#439): the Costing tab on a project and Settings › Project costing ---- */
.pc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .75rem; }
.pc-actions { display: flex; gap: .5rem; }
.pc-dl { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border: 1px solid var(--nx-ring); border-radius: 8px; font-size: .8125rem; color: var(--nx-ink); text-decoration: none; background: var(--nx-surface); }
.pc-dl:hover { border-color: var(--nx-600); color: var(--nx-700); }
.pc-h { font-size: .9375rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.pc-table-wrap { padding: 0; overflow-x: auto; }
.pc-table td, .pc-table th { white-space: nowrap; }
.pc-table td:first-child { white-space: normal; }
.pc-total td { font-weight: 650; border-top: 2px solid var(--nx-ring); }
.pc-tag { display: inline-block; margin-inline-start: .375rem; padding: 0 .375rem; border-radius: 6px; font-size: .6875rem; background: var(--nx-50); color: var(--nx-700); }
.pc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1rem; }
.pc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem .75rem; align-items: end; }
.pc-form .set-field { margin: 0; }
.pc-wide { grid-column: span 2; }
.pc-form-foot { display: flex; align-items: end; }
.pc-form-foot.es-all { gap: .375rem; align-items: center; align-self: center; font-size: .8125rem; color: var(--nx-ink-2); cursor: pointer; }
.pc-file { margin-inline-start: .25rem; vertical-align: middle; color: var(--nx-600); }
.pcs-rule { display: flex; flex-direction: column; gap: .25rem; }
.pcs-sub { margin: 0 0 .25rem 1.75rem; }
.pcs-company { padding: .5rem 0; border-top: 1px solid var(--nx-ring); }
.pcs-company:first-of-type { border-top: 0; }
html[data-theme="dark"] .pc-tag { background: rgba(129, 140, 248, .16); color: #C7D2FE; }
html[data-theme="dark"] .pc-dl { background: transparent; color: var(--nx-ink); }
@media (max-width: 600px) {
    .pc-wide { grid-column: auto; }
    .pc-form { grid-template-columns: 1fr; }
    .pc-two { grid-template-columns: 1fr; }
    .pc-share { display: none; }
    .pcs-sub { margin-inline-start: 1rem; }
}
/* Resources in a project (Resources tab, Resource list) and effort sheets: built on the Costing tab's forms and tables (pc-*). */
.pc-pad { padding: 12px 14px; }
.pr-name { display: inline-flex; align-items: center; gap: .375rem; }
.pr-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.pr-check input { width: 16px; height: 16px; flex: none; accent-color: var(--nx-600); }
.pr-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .25rem .75rem; max-height: 220px; overflow-y: auto; padding: .25rem 0; }
.pr-chip { display: inline-block; margin: 0 .25rem .25rem 0; padding: 1px .5rem; border-radius: 999px; font-size: .75rem; background: var(--nx-50); color: var(--nx-700); text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.pr-chip:hover { text-decoration: underline; }
.pr-ico { vertical-align: middle; color: var(--nx-600); }
.pr-acts { white-space: nowrap; }
.es-sheet { display: block; }
.es-head { display: flex; flex-direction: column; gap: .25rem; margin: .25rem 0 .75rem; }
.es-head b { margin-inline-end: .5rem; }
.es-state { display: inline-block; font-size: .7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; vertical-align: middle; }
.es-open { background: var(--nx-50); color: var(--nx-700); }
.es-closed { background: #DCFCE7; color: #166534; }
.es-overdue { background: #FEE2E2; color: #991B1B; }
.es-pct { width: 90px; display: inline-block; text-align: end; }
.es-over { color: #B91C1C; }
.es-warn { margin-top: .5rem; padding: .5rem .75rem; border-radius: 8px; background: #FEF3C7; color: #92400E; font-size: .8125rem; }
.es-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 1rem; }
.es-reason { flex: 1 1 260px; max-width: 480px; }
.es-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .375rem .75rem; max-height: 420px; overflow-y: auto; }
html[data-theme="dark"] .pr-chip, html[data-theme="dark"] .es-open { background: rgba(129, 140, 248, .16); color: #C7D2FE; }
html[data-theme="dark"] .es-closed { background: rgba(34, 197, 94, 0.18); color: #86EFAC; }
html[data-theme="dark"] .es-overdue { background: rgba(239, 68, 68, 0.2); color: #FCA5A5; }
html[data-theme="dark"] .es-over { color: #FCA5A5; }
html[data-theme="dark"] .es-warn { background: rgba(245, 158, 11, 0.2); color: #FCD34D; }
@media (max-width: 600px) {
    .pr-tasks, .es-people { grid-template-columns: 1fr; }
    .es-pct { width: 70px; }
}
.pf-margin { color: inherit; text-decoration: none; font-weight: 600; }
.pf-margin:hover { text-decoration: underline; }

/* "Chat with support": the support chat at the bottom of every workspace page (Shared/SupportChat.razor). It sits under the Guide offer card, and the card
   steps aside while the chat is open. Its header is .sc-bar, not .sc-head: .sc-head is the sales calendar's day row (680px wide). */
.sc { position: fixed; right: 20px; bottom: 20px; z-index: 1400; display: flex; flex-direction: column; align-items: flex-end; gap: .625rem; }
/* While a side panel (Log time, new task...) or a dialog is open, the floating Support button steps aside so it never covers the panel's
   buttons (KM-19); an open support chat stays as it is. */
body:has(.side-panel, .nx-dialog, .mud-dialog-container) .sc:not(:has(.sc-panel)) { display: none; }
.sc-open { display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px; padding: .625rem 1rem; background: var(--nx-accent); color: #fff;
    font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; box-shadow: var(--nx-sh-pop); }
.sc-open:hover { background: var(--nx-700); }
.sc-open:focus-visible { outline: 3px solid var(--nx-ring-strong); outline-offset: 2px; }
.sc-panel { width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column; background: var(--nx-surface);
    color: var(--nx-ink); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg); box-shadow: var(--nx-sh-pop); overflow: hidden; animation: gd-rise .2s ease both; }
/* Inside, it looks like the assistant's chat (the .ac- styles of Assistant/AssistantChat.razor): the same header, bubbles, typing dots, answer
   formatting, copy button and question box. Only what is its own is styled here. */
.sc-bar { gap: .5rem; padding-inline: .75rem .5rem; flex: 0 0 auto; }
.sc-title { flex: 1 1 auto; min-width: 0; font-size: .9375rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-log { flex: 1 1 auto; min-height: 140px; padding: .875rem 1rem; }
.sc-composer { margin: .5rem .75rem .25rem; }
.sc-ticket { display: flex; gap: .5rem; align-items: flex-start; padding: .625rem .75rem; border-radius: 12px; background: var(--nx-surface-3); font-size: .8125rem; }
.sc-ticket .mud-icon-root { color: var(--nx-accent); flex: 0 0 auto; }
.sc-error { margin: 0 .75rem; padding: .5rem .75rem; border-radius: 10px; background: rgba(220, 38, 38, .1); color: #b91c1c; font-size: .8125rem; }
html[data-theme="dark"] .sc-error { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; }
body:has(.sc-panel) .gd-offer { display: none; }
.sc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; padding: .25rem .75rem .75rem; font-size: .75rem; color: var(--nx-ink-2); }
.sc-foot .ac-keys { flex-basis: 100%; color: var(--nx-muted); }
/* Files chosen in the chat before there is a request (the chips and the attach link are the task comments' .cm-chip and .cm-attach). */
.sc-files { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; padding: .625rem .75rem 0; }
.sc-files small { flex-basis: 100%; font-size: .75rem; color: var(--nx-muted); }
/* "Attach files" on the Help & Support request form and reply box (#489). */
.sup-attach .sup-attach-hint { flex-basis: 100%; font-size: .75rem; color: var(--nx-muted); }
.sup-attach-error { margin-top: .25rem; font-size: .8125rem; color: var(--mud-palette-error, #B42318); }
@media (max-width: 600px) {
    .sc { right: 12px; bottom: 12px; }
    .sc-open span { display: none; }
    .sc-open { padding: .75rem; }
    /* On a phone the open chat takes the whole screen, like the Ask panel; Close (or Escape) brings the page back. */
    .sc[data-sc-open] .sc-panel { position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none !important; border: 0; border-radius: 0; z-index: 1; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .sc[data-sc-open] .sc-open { display: none; }
    .sc-log { padding: .75rem; }
    .sc-composer { margin: .5rem .5rem .25rem; }
}
@media print { .sc { display: none; } }
/* The Support button can be moved (wwwroot/js/nx-support-fab.js): dragged with the mouse or a finger, it snaps to the nearest side of the screen
   and stays inside it; it can also be tucked away as a small tab on the edge. The place is set on <html> (sc-side-left/right, sc-upper with
   --sc-top, else --sc-bottom; sc-docked for the tab). The sides are real screen sides, so these rules are not mirrored for right-to-left languages.
   It still steps aside while a side panel or dialog is open (the KM-19 rule above and QuickLogState, KM-20), wherever it was put. */
.sc-open { touch-action: none; -webkit-user-select: none; user-select: none; }
.sc.is-dragging { transition: none; }
.sc.is-dragging .sc-open { cursor: grabbing; box-shadow: 0 12px 28px rgba(16, 24, 40, .28); }
.sc-bar-tools { display: inline-flex; align-items: center; gap: 2px; }
/*rtl:begin:ignore*/
html.sc-side-left .sc { left: 20px; right: auto; align-items: flex-start; }
html.sc-side-right .sc { right: 20px; left: auto; align-items: flex-end; }
html.sc-moved .sc { bottom: var(--sc-bottom, 20px); }
html.sc-moved.sc-upper .sc { top: var(--sc-top, 20px); bottom: auto; flex-direction: column-reverse; }
html.sc-moved.sc-upper .sc-panel { max-height: min(560px, calc(100dvh - var(--sc-top, 20px) - 80px)); }
html.sc-moved:not(.sc-upper) .sc-panel { max-height: min(560px, calc(100dvh - var(--sc-bottom, 20px) - 80px)); }
/* Tucked away: a small tab on the edge that brings the button back when pressed. */
html.sc-docked .sc-open { padding: .625rem .375rem; gap: 0; opacity: .85; box-shadow: var(--nx-sh-2); }
html.sc-docked .sc-open span { display: none; }
html.sc-docked .sc-open:hover, html.sc-docked .sc-open:focus-visible { opacity: 1; }
html.sc-docked.sc-side-right .sc { right: 0; }
html.sc-docked.sc-side-right .sc-open { border-radius: 12px 0 0 12px; }
html.sc-docked.sc-side-left .sc { left: 0; }
html.sc-docked.sc-side-left .sc-open { border-radius: 0 12px 12px 0; }
@media (max-width: 600px) {
    html.sc-side-left .sc { left: 12px; }
    html.sc-side-right .sc { right: 12px; }
    html.sc-docked.sc-side-right .sc { right: 0; }
    html.sc-docked.sc-side-left .sc { left: 0; }
}
/*rtl:end:ignore*/

/* List view: dragging a task onto another task list (TaskBoard.razor). The list it would land in is tinted; the task being dragged fades. */
.tb-row.is-dragging td { opacity: .45; }
.tb-list tbody.tb-drop-over td, .tb-list.is-dense tbody.tb-drop-over .tb-group td { background: var(--nx-accent-soft) !important; }
.tb-list tbody.tb-drop-over .tb-group td { box-shadow: inset 0 2px 0 var(--nx-accent); }
/* Where it will land: a line above the task it goes before, or above "Add Task" for the end of the list. */
.tb-list .tb-row.is-drop-before td, .tb-list .tb-add.is-drop-end td { box-shadow: inset 0 3px 0 var(--nx-accent); }
.tb-list .tb-row.is-drop-after td { box-shadow: inset 0 -3px 0 var(--nx-accent); }
/* The small card that follows the pointer (built in nx-gantt.js, shown only while dragging). */
.tb-drag-ghost { position: fixed; top: -1000px; left: -1000px; max-width: 320px; padding: 6px 12px; border-radius: 10px; background: var(--nx-surface); color: var(--nx-ink);
    border: 1px solid var(--nx-accent); box-shadow: var(--nx-sh-pop); font: 600 13px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Whiteboards (backlog 57): the list, the board's head, the toolbar and the drawing surface (nx-board.js). The surface itself is the same
   picture in every language (dir="ltr" on .wb-stage); only the panels around it follow the page's direction. */
.wb-new-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 0 14px; border-bottom: 1px solid var(--nx-ring); margin-bottom: 12px; }
.wb-new-form .mt-field { flex: 1 1 220px; }
.wb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 12px; }
.wb-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 320px; }
.wb-head-text { min-width: 0; }
.wb-head-text h1 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.wb-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wb-rename { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 auto; }
.wb-rename .set-input { flex: 1 1 200px; min-width: 0; }
.wb-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; }
.wb-people { margin-inline-start: auto; }
.wb-versions { margin-bottom: 12px; }
.wb-version-save { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 16px 12px; }
.wb-version-save .set-input { flex: 1 1 220px; min-width: 0; }
.wb-wrap { position: relative; height: calc(100vh - 240px); min-height: 520px; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg); overflow: hidden; background: var(--nx-surface-2); }
.wb-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
    background-image: radial-gradient(circle, rgba(100, 116, 139, .28) 1px, transparent 1.2px); background-size: 24px 24px; }
.wb-stage[data-tool="select"] { cursor: default; }
.wb-stage[data-tool="hand"], .wb-stage.is-panning { cursor: grab; }
.wb-stage.is-panning { cursor: grabbing; }
.wb-stage[data-tool="note"], .wb-stage[data-tool="rect"], .wb-stage[data-tool="ellipse"], .wb-stage[data-tool="arrow"], .wb-stage[data-tool="pen"] { cursor: crosshair; }
.wb-stage[data-tool="text"] { cursor: text; }
.wb-svg { display: block; width: 100%; height: 100%; }
.wb-svg .wb-handle { cursor: nwse-resize; }
.wb-svg circle.wb-handle { cursor: move; }
.wb-edit { position: absolute; z-index: 4; box-sizing: border-box; margin: 0; padding: 8px; border: 2px solid var(--nx-accent); border-radius: 4px; resize: none; outline: none;
    background: var(--nx-surface); color: var(--nx-ink); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.3; box-shadow: var(--nx-sh-2); }
.wb-edit.is-note { background: #FFFBEB; color: #1F2937; }
.wb-tools { position: absolute; z-index: 3; top: 10px; inset-inline-start: 10px; inset-inline-end: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.wb-group { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 10px; box-shadow: var(--nx-sh-2); pointer-events: auto; }
.wb-tool { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--nx-ink-2); cursor: pointer; font: inherit; }
.wb-tool:hover:not(:disabled) { background: var(--nx-surface-3); color: var(--nx-ink); }
.wb-tool.is-on { background: var(--nx-accent-soft); color: var(--nx-accent); }
.wb-tool:disabled { opacity: .4; cursor: default; }
.wb-tool:focus-visible, .wb-swatch:focus-visible, .wb-zoom-pct:focus-visible { outline: 3px solid var(--nx-ring-strong); outline-offset: 1px; }
.wb-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.wb-swatch { --sw: #FEF3C7; width: 24px; height: 24px; margin: 0 2px; border-radius: 50%; border: 2px solid var(--nx-surface); background: var(--sw); box-shadow: 0 0 0 1px var(--nx-ring); cursor: pointer; padding: 0; }
.wb-swatch.is-ink { background: var(--nx-ink); }
.wb-swatch.is-on { box-shadow: 0 0 0 2px var(--nx-accent); }
.wb-zoom { position: absolute; z-index: 3; bottom: 10px; inset-inline-end: 10px; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 10px; box-shadow: var(--nx-sh-2); }
/* Full screen (KM-13): fills the screen (or the window where the browser has no full screen of its own). */
.wb-wrap.is-full { position: fixed; inset: 0; z-index: 2000; height: auto; min-height: 0; border: 0; border-radius: 0; }
html.wb-full-page { overflow: hidden; }
.wb-full-btn .wb-full-off { display: none; }
.wb-wrap.is-full .wb-full-btn .wb-full-on { display: none; }
.wb-wrap.is-full .wb-full-btn .wb-full-off { display: inline-flex; }
.wb-full-btn > span { display: inline-flex; }
.wb-zoom-pct { min-width: 3.4em; border: 0; background: transparent; font: inherit; font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.wb-note-bar { position: absolute; z-index: 3; bottom: 10px; inset-inline-start: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; max-width: calc(100% - 220px);
    background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 10px; box-shadow: var(--nx-sh-2); }
.wb-note-bar .set-input { min-width: 0; max-width: 220px; }
.wb-hint { position: absolute; z-index: 2; bottom: 56px; inset-inline-end: 10px; max-width: 360px; font-size: .75rem; color: var(--nx-muted); text-align: end; pointer-events: none; }
html[data-theme="dark"] .wb-stage { background-image: radial-gradient(circle, rgba(148, 163, 184, .22) 1px, transparent 1.2px); }
html[data-theme="dark"] .wb-swatch { border-color: var(--nx-surface); }
@media (max-width: 760px) {
    .wb-wrap { height: calc(100dvh - 200px); min-height: 420px; }
    .wb-tools { top: 6px; inset-inline-start: 6px; inset-inline-end: 6px; gap: 4px; }
    .wb-tool { width: 32px; height: 32px; }
    .wb-hint { display: none; }
    .wb-note-bar { bottom: 56px; max-width: calc(100% - 20px); }
    .wb-head-actions .mud-button-root { min-width: 0; }
}
@media print { .wb-tools, .wb-zoom, .wb-note-bar, .wb-hint { display: none; } }

/* Shifts page (#529). */
.sh-default { display: inline-block; margin-inline-start: .375rem; padding: 0 .5rem; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--nx-surface)); color: var(--mud-palette-primary); font-size: .6875rem; font-weight: 600; vertical-align: middle; }
.sh-week { font-size: .8125rem; font-weight: 600; white-space: nowrap; }

/* Attendance (#531): the day's status as a small pill, set-aside punches struck through. */
.at-pill { display: inline-flex; align-items: center; padding: 1px .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.at-pill.at-ok { background: color-mix(in srgb, var(--mud-palette-success) 14%, var(--nx-surface)); color: var(--mud-palette-success-darken, var(--mud-palette-success)); }
.at-pill.at-warn { background: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--nx-surface)); color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.at-pill.at-bad { background: color-mix(in srgb, var(--mud-palette-error) 14%, var(--nx-surface)); color: var(--mud-palette-error); }
.at-pill.at-off { background: var(--nx-surface-3, #EEF0F6); color: var(--nx-muted); }
.at-pill.at-none { color: var(--nx-muted); }
.at-row-off td { color: var(--nx-muted); }
.at-ignored td { text-decoration: line-through; color: var(--nx-muted); }
.at-ignored td.w-act { text-decoration: none; }
.at-stats { margin-bottom: 1rem; }

/* Attendance devices (#531). */
.ad-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ad-code { margin: .5rem 0 0; padding: .625rem .75rem; border-radius: 8px; background: var(--nx-surface-2, #F5F6FA); font-size: .75rem; white-space: pre-wrap; word-break: break-all; }
.ad-steps { margin-top: 1rem; padding: .75rem 1rem; border-radius: 10px; background: var(--nx-surface-2, #F5F6FA); }
.ad-steps ol { margin: .5rem 0 0; padding-inline-start: 1.25rem; }
.ad-steps li { margin: .25rem 0; font-size: .875rem; }
.ad-token { border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 40%, transparent); }

/* Time logging: hours at work by attendance (#529). */
.tl-present { display: block; font-size: .625rem; color: var(--nx-muted); white-space: nowrap; }
.tl-present-total { display: block; }

/* Linked work between tasks (#540) */
.task-link-form { flex-wrap: wrap; }
.task-link-form #task-link-search { min-width: 180px; flex: 1; }
.task-link-form #task-link-target { min-width: 220px; flex: 1.4; }
.task-link-group { font-size: .6875rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); margin: 12px 0 4px; }
.task-link-row { gap: 8px; }
.task-link-row .project-code { text-decoration: none; }
.task-link-title { color: var(--nx-ink); text-decoration: none; font-weight: 550; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-link-title:hover { color: var(--nx-accent); text-decoration: underline; }
.task-link-owner { white-space: nowrap; }
.task-link-note { font-size: .75rem; color: var(--nx-muted); margin: 2px 0 8px; }
.task-blocked { display: inline-flex; align-items: center; gap: 3px; font-size: .6875rem; font-weight: 650; color: var(--nx-critical);
  background: color-mix(in srgb, var(--nx-critical) 10%, transparent); border: 1px solid color-mix(in srgb, var(--nx-critical) 28%, transparent);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.task-blocked .mud-icon-root { font-size: .875rem; }
.tp-warn { margin: 8px 0; padding: 10px 12px; border-radius: 10px; font-size: .8125rem; background: color-mix(in srgb, var(--nx-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--nx-warning) 40%, transparent); color: var(--nx-ink); }
.tp-warn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 640px) {
  .task-link-row { flex-wrap: wrap; }
  .task-link-title { white-space: normal; }
}

.tt-link-head { margin-bottom: .75rem; }
.tt-link-head .pf-title { margin-bottom: .25rem; }

/* Draft the plan with AI (#536) */
.ct-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.ai-del:hover { color: var(--nx-critical); }

/* Kaam360's own support hours (#474) */
.nx-hours { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: .8125rem; line-height: 1.5;
  background: var(--nx-surface-2, #f6f7fb); border: 1px solid var(--nx-ring, #e5e7eb); color: var(--nx-ink, #17153b); }
.nx-hours-ico { flex: none; margin-top: 2px; color: var(--nx-muted, #6b7280); }
.nx-hours.is-open .nx-hours-ico { color: var(--nx-good, #16a34a); }
.nx-hours-now { color: var(--nx-muted, #6b7280); }
.nx-hours.is-public { margin: 16px 0; max-width: 560px; text-align: start; }
.hc-hours { margin-inline: auto; }

/* Linked work in the task table (#540) */
.tt-links { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.tt-link { white-space: nowrap; font-size: .75rem; color: var(--nx-muted); }
.tt-link b { color: var(--nx-ink); font-weight: 600; }

/* A ticket's conversation order (#553) */
.dk-order { display: flex; gap: 6px; justify-content: flex-end; margin: 0 0 8px; }
.dk-earlier { display: block; width: 100%; margin: 6px 0; padding: 8px; border: 1px dashed var(--nx-ring); border-radius: 10px; background: var(--nx-surface-2);
  color: var(--nx-accent); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.dk-earlier:hover { border-color: var(--nx-accent); }
.dk-tag.is-new { background: color-mix(in srgb, var(--nx-accent) 14%, transparent); color: var(--nx-accent); font-weight: 650; }

/* Mind map of a project (#478): branches grow to the right; each branch is a row of its node and the column of what grows from it. */
.mm { overflow: auto; padding: 16px 8px 24px; }
.mm-branch { display: flex; align-items: center; position: relative; }
.mm-children { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 28px; position: relative; }
.mm-children > .mm-branch::before { content: ""; position: absolute; inset-inline-start: -16px; top: 50%; width: 16px; border-top: 1.5px solid var(--nx-ring-strong, var(--nx-ring)); }
.mm-children > .mm-branch::after { content: ""; position: absolute; inset-inline-start: -16px; top: 0; bottom: 0; border-inline-start: 1.5px solid var(--nx-ring-strong, var(--nx-ring)); }
.mm-children > .mm-branch:first-child::after { top: 50%; }
.mm-children > .mm-branch:last-child::after { bottom: 50%; }
.mm-children > .mm-branch:only-child::after { display: none; }
.mm-children::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 12px; border-top: 1.5px solid var(--nx-ring-strong, var(--nx-ring)); }
.mm-node { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 12px; padding: 6px 10px; border-radius: 999px; background: var(--nx-surface);
  border: 1px solid var(--nx-ring); box-shadow: 0 1px 2px rgba(15,23,42,.05); white-space: nowrap; max-width: 340px; font-size: .8125rem; }
.mm-node.is-project { background: var(--nx-accent); color: #fff; border-color: var(--nx-accent); font-weight: 650; font-size: .9375rem; padding: 8px 14px; }
.mm-node.is-list { background: color-mix(in srgb, var(--nx-accent) 9%, var(--nx-surface)); border-color: color-mix(in srgb, var(--nx-accent) 30%, var(--nx-ring)); font-weight: 600; }
.mm-node.is-task.is-done .mm-open { text-decoration: line-through; color: var(--nx-muted); }
.mm-node.is-task.is-blocked { border-color: color-mix(in srgb, var(--nx-critical) 45%, var(--nx-ring)); }
.mm-text { overflow: hidden; text-overflow: ellipsis; }
.mm-open { background: none; border: none; padding: 0; font: inherit; color: var(--nx-ink); cursor: pointer; text-align: start; overflow: hidden; text-overflow: ellipsis; }
.mm-open:hover { color: var(--nx-accent); text-decoration: underline; }
.mm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mm-code, .mm-count { font-size: .6875rem; color: var(--nx-muted); font-variant-numeric: tabular-nums; }
.mm-node.is-project .mm-count { color: #fff; }
.mm-add, .mm-fold { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--nx-ring); background: var(--nx-surface-2); color: var(--nx-muted);
  font: 600 13px/1 inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mm-node.is-project .mm-add { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }
.mm-add:hover { color: var(--nx-accent); border-color: var(--nx-accent); }
.mm-node.is-new { padding: 3px 4px 3px 8px; }
.mm-input { border: none; outline: none; background: transparent; font: inherit; min-width: 180px; color: var(--nx-ink); }
.mm-ok { border: none; border-radius: 999px; background: var(--nx-accent); color: #fff; font: inherit; font-size: .75rem; font-weight: 600; padding: 4px 10px; cursor: pointer; }
.mm-empty { color: var(--nx-muted); font-size: .8125rem; padding: 6px 0; }
@media (max-width: 640px) { .mm-node { max-width: 220px; } .mm-children { padding-inline-start: 20px; } }
/* AI plan: clause, suggestions and plan check (#536) */
.ai-plan-why { margin: -2px 0 8px; }
.ai-plan-ok { display: flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--nx-good) 80%, var(--nx-ink)); font-size: .8125rem; margin-bottom: 6px; }

/* Purchase items and purchase requests (#556) */
.pi-copy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 8px 0 12px; max-height: 320px; overflow: auto; }
.pi-copy-row { display: flex; align-items: center; gap: 6px; font-size: .875rem; }
.pr-facts { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.pr-reason { white-space: pre-wrap; }
.pr-from { margin-inline-start: 6px; font-size: .75rem; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--nx-accent) 10%, transparent); color: var(--nx-accent); text-decoration: none; }
.pr-from:hover { text-decoration: underline; }
.pr-orders { margin: 6px 0 4px; padding-inline-start: 18px; }
.pr-orders li { margin: 4px 0; }
.pr-decide { min-width: 120px; }
.pr-qty { max-width: 110px; margin-inline-start: auto; }

/* Plan from the contract (#536, second version): the steps, the contract brief and the plan review. */
.cp-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.cp-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--nx-surface-2); border: 1px solid var(--nx-ring);
  font-size: .8125rem; font-weight: 560; color: var(--nx-muted); }
.cp-steps li span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--nx-ring); color: var(--nx-ink-2); font-size: .7rem; }
.cp-steps li.is-on { background: var(--nx-accent-soft); border-color: var(--nx-accent); color: var(--nx-ink); }
.cp-steps li.is-on span { background: var(--nx-accent); color: #fff; }
.cp-steps li.is-done span { background: var(--nx-good); color: #fff; }
.cp-card { padding: 1rem 1.125rem; margin-bottom: 12px; }
.cp-card > p { margin: 0 0 .625rem; line-height: 1.55; }
.cp-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: .875rem; font-weight: 560; margin-bottom: 10px; }
.cp-list { margin: 4px 0 0; padding-inline-start: 18px; }
.cp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 16px; margin-top: 8px; }
.cp-fact { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--nx-muted); }
.cp-fact .set-input { font-size: .875rem; color: var(--nx-ink); }
.cp-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cp-item { border-top: 1px solid var(--nx-line, var(--nx-ring)); padding: 8px 0; }
.cp-item.is-check { border-inline-start: 3px solid var(--nx-warning); padding-inline-start: 8px; }
.cp-item-top { display: flex; align-items: center; gap: 8px; }
.cp-item-top .cp-title { flex: 1 1 auto; min-width: 0; font-weight: 560; }
.cp-detail { width: 100%; margin-top: 4px; font-size: .8125rem; color: var(--nx-ink-2); resize: vertical; }
.cp-item-fields { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; font-size: .75rem; color: var(--nx-muted); }
.cp-item-fields label { display: flex; align-items: center; gap: 6px; }
.cp-item-fields .cp-wide { flex: 1 1 320px; }
.cp-item-fields .cp-wide .set-input { flex: 1 1 auto; }
.cp-item-fields .set-input { font-size: .8125rem; padding: 4px 6px; }
.cp-num { width: 84px; }
.cp-ref { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 6px; background: var(--nx-surface-3, var(--nx-soft)); color: var(--nx-ink-2);
  font-family: var(--nx-mono); font-size: .72rem; text-align: center; }
.cp-src { font-size: .72rem; color: var(--nx-muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-src::before { content: "§ "; }
.cp-badge { font-size: .7rem; font-weight: 650; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.cp-badge.is-missing { background: var(--nx-surface-3, var(--nx-soft)); color: var(--nx-muted); }
.cp-badge.is-check { background: color-mix(in srgb, var(--nx-warning) 18%, transparent); color: color-mix(in srgb, var(--nx-warning) 55%, var(--nx-ink)); }
.cp-links { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.cp-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-ink); font-size: .72rem; }
.cp-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0 3px; }
.cp-link-add { width: auto; max-width: 220px; }
.cp-sticky { position: sticky; bottom: 0; z-index: 3; background: var(--nx-plane); padding: 10px 0; border-top: 1px solid var(--nx-ring); }
.cp-late { color: var(--nx-critical); }
.cp-findings { margin: 6px 0 0; padding: 0; list-style: none; font-size: .8125rem; }
.cp-findings li { padding: 5px 10px; margin: 3px 0; border-radius: 8px; border-inline-start: 3px solid var(--nx-ring-strong, var(--nx-ring)); background: var(--nx-surface-2); }
.cp-findings li.is-high { border-color: var(--nx-critical); }
.cp-findings li.is-medium { border-color: var(--nx-warning); }
.cp-findings li.is-info { border-color: var(--nx-500, var(--nx-accent)); }
#cp-gantt { margin-bottom: 12px; }
.cp-phase { margin-top: 12px; }
.cp-phase-name { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nx-ink-2); padding: 6px 0; border-bottom: 1px solid var(--nx-ring); }
.cp-deliv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0 2px; font-size: .875rem; }
.cp-task { display: grid; grid-template-columns: 28px minmax(220px, 1fr) 150px 76px 64px 90px 28px; gap: 6px 10px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--nx-line, var(--nx-ring)); }
.cp-task label { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; color: var(--nx-muted); }
.cp-task .set-input { font-size: .8125rem; padding: 4px 6px; }
.cp-task .cp-title { width: 100%; }
.cp-task label .set-input { width: 100%; }
.cp-no { font-family: var(--nx-mono); font-size: .75rem; color: var(--nx-muted); padding-top: 6px; text-align: end; }
.cp-task-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .72rem; color: var(--nx-muted); margin-top: 3px; }
.cp-kind { font-weight: 650; color: var(--nx-ink-2); }
.cp-task.is-acceptance .cp-kind, .cp-task.is-review .cp-kind { color: var(--nx-good); }
.cp-task.is-client .cp-kind { color: color-mix(in srgb, var(--nx-warning) 60%, var(--nx-ink)); }
.cp-steps-list { margin: 4px 0 0; padding-inline-start: 16px; font-size: .75rem; color: var(--nx-ink-2); }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-grid > .cp-card { margin-bottom: 0; }
.cp-grid + .cp-card { margin-top: 12px; }
.cp-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--nx-line, var(--nx-ring)); font-size: .8125rem; }
.cp-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-date { flex: 0 0 96px; color: var(--nx-ink-2); font-weight: 560; }
.cp-score { flex: 0 0 28px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--nx-surface-3, var(--nx-soft)); font-weight: 650; font-size: .75rem; }
@media (max-width: 760px) {
  .cp-task { grid-template-columns: 24px 1fr 1fr; }
  .cp-task .cp-task-main { grid-column: 2 / 4; }
  .cp-task > .ai-del { grid-column: 3; justify-self: end; }
  .cp-grid { grid-template-columns: 1fr; }
  .cp-src { max-width: 200px; }
}

/* ---- Effective rate (Insights) and the margin what-if on the Costing tab: built on Profit's cards and tables (pr-*, us-*) and the Costing tab's (pc-*, bg-*). */
.er-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.er-period { width: auto; min-width: 160px; }
.er-range { margin: 0 0 .5rem; }
.er-link { background: none; border: 0; padding: 0; font: inherit; color: var(--nx-700); cursor: pointer; text-decoration: underline; }
.er-table td:first-child { white-space: normal; min-width: 180px; }
.er-toggle { background: none; border: 0; padding: 0 4px 0 0; margin-inline-start: -4px; color: var(--nx-muted); cursor: pointer; vertical-align: middle; }
.er-child td { background: var(--nx-50); font-size: .8125rem; }
.er-child td:first-child { padding-inline-start: 32px; }
.er-rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .875rem; }
.er-rank b { margin-inline-start: auto; }
.er-rank small { flex-basis: 100%; color: var(--nx-muted); margin: 0 !important; }
.er-below { padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 12px; }
.er-targets { padding: 12px 14px; display: grid; gap: 8px; margin-top: 14px; max-width: 640px; }
.er-field { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.er-field .set-input, .er-num { width: 90px; }
.er-target-row { display: flex; align-items: center; gap: 10px; font-size: .875rem; border-bottom: 1px solid var(--nx-ring); padding: 2px 0; }
.er-target-row b { margin-inline-start: auto; }
.er-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.er-add select { flex: 1 1 180px; width: auto; }
.er-card { margin-top: 12px; }
.wi-card { padding: 12px 14px; display: grid; gap: 10px; }
.wi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem .75rem; align-items: end; }
.wi-field { display: grid; gap: 4px; font-size: .8125rem; color: var(--nx-ink-2); }
.wi-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nx-muted); font-weight: 700; margin-top: 4px; }
.wi-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--nx-ring); font-size: .8125rem; }
.wi-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-ink-2); }
.wi-row input[type=date] { width: 150px; }
.wi-who { width: auto; min-width: 180px; max-width: 260px; }
.wi-label { width: 180px; }
.wi-num { width: 90px; }
.wi-name { width: 200px; }
.wi-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.wi-tag.is-on { background: #DCFCE7; color: #166534; }
.wi-tag.is-off { background: #FEE2E2; color: #B42318; }
.wi-adds, .wi-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wi-summary { padding: 8px 12px; border-radius: 10px; background: var(--nx-50); font-weight: 600; font-size: .875rem; }
.wi-better { color: #166534; font-weight: 650; }
.wi-worse { color: #B42318; font-weight: 650; }
.wi-by { display: block; color: var(--nx-muted); font-size: .75rem; }
.wi-row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
html[data-theme="dark"] .wi-tag.is-on { background: rgba(34, 197, 94, .18); color: #86EFAC; }
html[data-theme="dark"] .wi-tag.is-off { background: rgba(239, 68, 68, .18); color: #FCA5A5; }
html[data-theme="dark"] .wi-better { color: #86EFAC; } html[data-theme="dark"] .wi-worse { color: #FCA5A5; }
html[data-theme="dark"] .er-child td, html[data-theme="dark"] .wi-summary { background: rgba(129, 140, 248, .10); }
html[data-theme="dark"] .er-link { color: #C7C8FE; }
@media (max-width: 600px) {
    .er-head-actions { width: 100%; }
    .er-period { flex: 1 1 auto; }
    .wi-row label { flex: 1 1 140px; }
    .wi-who, .wi-label, .wi-name, .wi-row input[type=date] { width: 100%; max-width: none; flex: 1 1 100%; }
    .wi-num { width: 100%; }
}

/* ---- Customer requests (CRM > Customer requests, the card on tasks, projects and customers). Colours come from the theme tokens, so dark mode follows. */
.cq-view { display: inline-flex; border: 1px solid var(--nx-ring); border-radius: 999px; overflow: hidden; }
.cq-view-btn { border: 0; background: transparent; color: var(--nx-ink-2); padding: 6px 12px; font: inherit; font-size: .8125rem; cursor: pointer; }
.cq-view-btn.is-on { background: var(--nx-accent-soft); color: var(--nx-ink); font-weight: 650; }
.cq-form-title { font-size: 1rem; font-weight: 650; margin: 0 0 .75rem; }
.cq-dupes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--nx-surface-2); border: 1px dashed var(--nx-ring); }
.cq-dupe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: .8125rem; }
.cq-link-pill { margin-inline-start: 6px; }
.cq-chosen { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.cq-hit { display: flex; align-items: center; gap: 6px; width: 100%; text-align: start; border: 0; border-bottom: 1px solid var(--nx-line, var(--nx-ring)); background: transparent; color: var(--nx-ink); padding: 6px 4px; font: inherit; font-size: .8125rem; cursor: pointer; }
.cq-hit:hover, .cq-hit:focus-visible { background: var(--nx-accent-soft); }
.cq-notify .usr-filters { align-items: center; }
.cq-skipped { margin: 4px 0 0; padding-inline-start: 18px; font-size: .8125rem; }
.cq-groups { display: flex; flex-direction: column; gap: 12px; }
.cq-group { padding: 0; overflow: hidden; }
.cq-group-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--nx-ring); flex-wrap: wrap; }
.cq-rank { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--nx-accent-soft); color: var(--nx-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cq-group-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cq-group-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9375rem; }
.cq-kind-ico { color: var(--nx-muted); vertical-align: middle; }
.cq-blockers { color: var(--nx-critical); font-weight: 600; }
.cq-figures { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.cq-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 70px; }
.cq-fig-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.cq-fig-lbl { font-size: .6875rem; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .04em; }
.cq-group .crm-table-wrap { border: 0; }
.cq-table td.cq-req { white-space: normal; min-width: 13rem; max-width: 22rem; overflow: visible; }
.cq-table td.cq-who { white-space: normal; min-width: 8rem; max-width: 12rem; }
.cq-table td.cq-work { white-space: normal; min-width: 8rem; max-width: 13rem; }
.cq-table td.w-act { white-space: nowrap; }
.cq-quote { display: block; color: var(--nx-ink-2); font-style: italic; font-size: .8125rem; margin-top: 2px; white-space: pre-line; }
.cq-link { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 8px; font-size: .8125rem; }
.cq-done-ico { color: var(--nx-good); }
.cq-unlink { border: 0; background: none; color: var(--nx-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.cq-unlink:hover { color: var(--nx-critical); }
.cq-link-find { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-width: 360px; }
.cq-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cq-card-add { display: inline-flex; align-items: center; gap: 2px; font-size: .8125rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.cq-card-figs { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8125rem; color: var(--nx-ink-2); margin-bottom: 8px; }
.cq-card-figs b { color: var(--nx-ink); }
.cq-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cq-card-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .8125rem; }
.cq-card-main { flex: 1 1 auto; min-width: 0; }
.cq-card-more { display: inline-block; margin-top: 8px; font-size: .8125rem; }
.se-request { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; margin-top: 4px; }
@media (max-width: 640px) {
  /* On a phone each request becomes a card, like the portfolio list: every field on its own line, with its column name. */
  .cq-table thead { display: none; }
  .cq-table, .cq-table tbody, .cq-table tr, .cq-table td { display: block; width: 100%; }
  table.set-table.cq-table { min-width: 0; }
  .cq-table td .cq-link { margin-inline-end: 0; }
  .cq-table tr { position: relative; border: 1px solid var(--nx-ring); border-radius: 10px; margin: 10px 0; padding: 4px 10px; }
  .cq-table td, .cq-table td.cq-who, .cq-table td.cq-work { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; border-bottom: 1px dashed var(--nx-ring); padding: 7px 0; text-align: end; white-space: normal; max-width: none; min-width: 0; }
  .cq-table td:last-child { border-bottom: none; justify-content: flex-end; }
  .cq-table td[data-label]::before { content: attr(data-label); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); text-align: start; }
  .cq-table td.cq-req { display: block; text-align: start; min-width: 0; max-width: none; padding-inline-end: 28px; }
  .cq-table td.cq-req::before { display: none; }
  .cq-table td.w-check { position: absolute; inset-inline-end: 8px; top: 8px; width: auto; border: 0; padding: 0; }
  .cq-group .crm-table-wrap { padding: 0 10px; }
}
@media (max-width: 760px) {
  .cq-group-head { padding: 10px 12px; }
  .cq-figures { width: 100%; justify-content: space-between; gap: 8px; }
  .cq-fig { align-items: flex-start; min-width: 0; }
  .cq-view { width: 100%; }
  .cq-view-btn { flex: 1 1 50%; }
}
/* Work triage (/triage and /triage/rules): a list of waiting items beside the chosen one, its suggestions and actions. */
.tr-stats { margin-bottom: 1rem; }
.tr-filters { margin-bottom: .75rem; align-items: center; }
.tr-keys-hint { font-size: .75rem; color: var(--nx-muted); margin-inline-start: auto; }
.tr-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; align-items: start; }
.tr-list { padding: .25rem; max-height: 72vh; overflow-y: auto; }
.tr-row { display: block; width: 100%; text-align: start; border: 0; background: transparent; color: var(--nx-ink); padding: .625rem .75rem; border-radius: var(--nx-r-sm); cursor: pointer; border-bottom: 1px solid var(--nx-ring); font: inherit; }
.tr-row:last-child { border-bottom: 0; }
.tr-row:hover { background: var(--nx-surface-2); }
.tr-row.is-on { background: var(--nx-accent-soft); box-shadow: inset 3px 0 0 var(--nx-accent); }
.tr-row:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.tr-row-top { display: flex; gap: .5rem; align-items: baseline; font-size: .875rem; }
.tr-row-meta { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; font-size: .75rem; color: var(--nx-muted); margin-top: .25rem; }
.tr-age { margin-inline-start: auto; }
.tr-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1rem; color: var(--nx-muted); text-align: center; font-size: .875rem; }
.tr-detail { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.tr-title { width: 100%; max-width: none; font-size: 1.0625rem; font-weight: 600; }
.tr-desc { margin: .75rem 0; padding: .625rem .75rem; background: var(--nx-surface-2); border-radius: var(--nx-r-sm); font-size: .875rem; max-height: 280px; overflow-y: auto; overflow-wrap: anywhere; }
.tr-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .625rem .75rem; margin-top: .75rem; }
.tr-fields > label { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--nx-ink-2); font-weight: 600; }
.tr-fields > label.tr-inline { flex-direction: row; align-items: center; align-self: end; }
.tr-labels, .tr-checks { display: flex; flex-wrap: wrap; gap: .375rem .75rem; align-items: center; margin-top: .75rem; }
.tr-link { border: 0; background: transparent; color: var(--nx-accent); cursor: pointer; font: inherit; font-size: .8125rem; padding: 0; }
.tr-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
.tr-actions kbd { margin-inline-start: .375rem; font-family: var(--nx-mono); font-size: .6875rem; padding: 0 .3rem; border: 1px solid currentColor; border-radius: 4px; opacity: .7; }
.tr-panel { margin-top: .875rem; padding: .75rem; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface-2); display: flex; flex-direction: column; gap: .5rem; }
.tr-panel textarea { width: 100%; }
.tr-hit { text-align: start; border: 1px solid var(--nx-ring); background: var(--nx-surface); color: var(--nx-ink); border-radius: var(--nx-r-xs); padding: .375rem .5rem; cursor: pointer; font: inherit; font-size: .8125rem; }
.tr-hit:hover { border-color: var(--nx-accent); }
.tr-sug-head { display: flex; align-items: center; gap: .5rem; }
.tr-sug-head .pf-title { margin: 0; }
.tr-sug-head button { margin-inline-start: auto; }
.tr-sug { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--nx-ring); font-size: .875rem; }
.tr-sug:last-of-type { border-bottom: 0; }
.tr-sug-kind { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); font-weight: 700; }
.tr-project { display: flex; gap: .5rem; align-items: center; padding: .375rem 0; font-size: .875rem; border-bottom: 1px solid var(--nx-ring); }
.tr-project:last-child { border-bottom: 0; }
.tr-section { margin-top: 1rem; font-weight: 700; font-size: .8125rem; color: var(--nx-ink-2); }
.tr-rule { display: flex; gap: .75rem; align-items: flex-start; padding: .625rem 0; border-bottom: 1px solid var(--nx-ring); }
.tr-rule:last-child { border-bottom: 0; }
.tr-rule.is-off { opacity: .6; }
.tr-rule-order { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent); display: grid; place-items: center; font-weight: 700; font-size: .8125rem; flex: none; }
.tr-rule-body { flex: 1; min-width: 0; font-size: .875rem; }
.tr-rule-tools { display: flex; flex: none; }
@media (max-width: 900px) {
    .tr-layout { grid-template-columns: 1fr; }
    .tr-list { max-height: 40vh; }
    .tr-keys-hint { display: none; }
}
/* ===== Project updates (a project's Updates tab, the Updates feed, the customer portal) and Delivery speed ===== */
.pu-list { display: flex; flex-direction: column; gap: .75rem; }
.pu-card { padding: 14px 16px; border-inline-start: 4px solid var(--nx-good); }
.pu-card.is-risk { border-inline-start-color: var(--nx-warning); }
.pu-card.is-off { border-inline-start-color: var(--nx-critical); }
.pu-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pu-proj { font-weight: 600; color: var(--nx-ink); text-decoration: none; }
.pu-proj:hover { text-decoration: underline; }
.pu-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: var(--nx-muted); font-size: .8125rem; }
.pu-av { width: 22px; height: 22px; font-size: .625rem; }
.pu-was, .pu-edited { color: var(--nx-muted); font-size: .8125rem; }
.pu-shared, .pu-ai { display: inline-flex; align-items: center; gap: .2rem; color: var(--nx-accent); font-size: .8125rem; }
.pu-acts { margin-inline-start: auto; display: inline-flex; gap: .25rem; }
.pu-sec { margin-top: .5rem; }
.pu-label { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); margin-bottom: .15rem; }
.pu-text { white-space: pre-line; color: var(--nx-ink); margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.pu-block .pu-text { color: var(--nx-ink); }
.pu-block { background: var(--nx-surface-2); border-radius: 8px; padding: .5rem .65rem; }
.pu-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.pu-file { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border: 1px solid var(--nx-ring-strong); border-radius: 999px; font-size: .8125rem; color: var(--nx-ink); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.pu-file small { color: var(--nx-muted); }
.pu-overdue { display: inline-flex; align-items: center; gap: .2rem; color: var(--nx-critical); font-weight: 600; }
.pu-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pu-form .set-field { margin-top: .6rem; }
.pu-form textarea.set-input { width: 100%; resize: vertical; min-height: 64px; }
.pu-health-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.pu-pick { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); color: var(--nx-ink); font: inherit; font-size: .875rem; cursor: pointer; min-height: 36px; }
.pu-pick .dot, .pt-health .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-good); }
.pu-pick.is-risk .dot, .pt-health.is-risk .dot { background: var(--nx-warning); }
.pu-pick.is-off .dot, .pt-health.is-off .dot { background: var(--nx-critical); }
.pu-pick.is-on-pick { border-color: var(--nx-accent); box-shadow: 0 0 0 2px var(--nx-accent-soft-2); font-weight: 600; }
.pu-pick:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.up-kpi { display: block; width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--nx-ring); }
.up-kpi.is-picked { border-color: var(--nx-accent); box-shadow: 0 0 0 2px var(--nx-accent-soft-2); }
.up-kpi:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.up-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.up-feed { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.up-side { padding: 12px 14px; position: sticky; top: 72px; max-height: calc(100vh - 96px); overflow: auto; }
.up-projects { list-style: none; margin: 0; padding: 0; }
.up-project { padding: .5rem 0; border-bottom: 1px solid var(--nx-ring); }
.up-project:last-child { border-bottom: 0; }
.up-project-name { display: block; color: var(--nx-ink); text-decoration: none; font-weight: 600; font-size: .875rem; overflow-wrap: anywhere; }
.up-project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .8125rem; }
.pu-follow-btn { margin-inline-start: auto; border: 1px solid var(--nx-ring-strong); background: var(--nx-surface); color: var(--nx-ink-2); border-radius: 999px; padding: .1rem .6rem; font: inherit; font-size: .75rem; cursor: pointer; min-height: 28px; }
.pu-follow-btn[aria-pressed="true"] { background: var(--nx-accent-soft); color: var(--nx-accent); border-color: var(--nx-accent-soft-2); }
.up-summary .pu-text + .pu-text { margin-top: .5rem; }
.up-lines { margin: .5rem 0 0; padding-inline-start: 1.1rem; color: var(--nx-ink-2); font-size: .875rem; }
.up-lines li { margin: .15rem 0; overflow-wrap: anywhere; }
.ds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ds-date { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--nx-ink-2); }
.ds-date .set-input { width: auto; }
.ds-table td, .ds-table th { white-space: normal; }
.ds-click { cursor: pointer; }
.ds-click:hover td { background: var(--nx-surface-2); }
/* Unbilled work: the kinds take two thirds of the row, the trend the rest (one column below 1100px, like Delivery speed). */
.ub-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .ub-grid { grid-template-columns: minmax(0, 1fr); } }
.pt-update { padding: .5rem 0; border-bottom: 1px solid #F2F3F9; }
.pt-update:last-child { border-bottom: 0; }
.pt-update .pt-help { margin: .35rem 0 0; white-space: pre-line; }
.pt-health { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.pt-file { display: inline-block; margin: .35rem .5rem 0 0; font-size: .875rem; }
html[data-theme="dark"] .pt-update { border-bottom-color: rgba(255,255,255,.08); }
@media (max-width: 1100px) { .ds-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .up-grid { grid-template-columns: minmax(0, 1fr); } .up-side { position: static; max-height: none; order: -1; } }
@media (max-width: 640px) { .pu-card { padding: 12px; } .pu-acts { margin-inline-start: 0; } .ds-date { width: 100%; } .ds-date .set-input { flex: 1; } }

/* ---- Scope Guard: verdict badges, the card on a piece of work, the free-work meter and the contract's promises (team only) ---- */
.dk-pill.bad { background: #FEE2E2; color: #991B1B; }
html[data-theme="dark"] .dk-pill.bad { background: #5F1D1D; color: #FECACA; }
.sg-badge { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; cursor: help; vertical-align: middle; }
.sg-badge .sg-badge-icon { font-size: .875rem; }
.sg-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.sg-head .tp-card-head { margin-bottom: 0; }
.sg-card .sg-head { margin-bottom: .35rem; }
.sg-inline { margin-top: .5rem; padding: .5rem .75rem; border: 1px dashed var(--nx-ring-strong); border-radius: 10px; }
.sg-label { font-size: .75rem; font-weight: 600; color: var(--nx-muted); }
.sg-why { font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.sg-meta { font-size: .75rem; color: var(--nx-muted); margin-top: .2rem; overflow-wrap: anywhere; }
.sg-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.sg-form { display: grid; gap: .5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--nx-ring); min-width: 0; }
.sg-choices { display: flex; flex-wrap: wrap; gap: .75rem; }
.sg-explain { margin: 0; padding-inline-start: 1.1rem; font-size: .75rem; color: var(--nx-ink-2); display: grid; gap: .2rem; }
.sg-panel { margin-bottom: 1.25rem; }
.sg-title { margin-bottom: .75rem; }
.sg-section, .sg-meter { padding: 1rem; margin-bottom: 1rem; }
.sg-meter { margin-top: 1rem; }
.sg-stats { margin: .5rem 0; }
.sg-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; }
.sg-row { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--nx-ring); min-width: 0; }
.sg-row:first-child { border-top: 0; }
.sg-row > input[type="checkbox"] { margin-top: .25rem; flex: none; }
.sg-row-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sg-num { flex: none; font-variant-numeric: tabular-nums; font-size: .8125rem; }
.sg-progress { height: 6px; border-radius: 999px; background: var(--nx-surface-3); overflow: hidden; width: 160px; max-width: 100%; margin-top: .35rem; }
.sg-progress > span { display: block; height: 100%; background: var(--nx-600); }
@media (max-width: 599px) { .sg-row { flex-wrap: wrap; } .sg-num { width: 100%; } }
/* Early warnings: the project "black box" card, its flag on the portfolio, and the customer health trend (shared with the health card's badges and lists) */
.ew-headline { margin: 0 0 4px; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.ew-sub { font-size: .75rem; font-weight: 650; color: var(--nx-ink-2); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.ew-signs { margin-bottom: 10px; }
.ew-signs li::before { content: "•"; color: #B91C1C; font-weight: 700; margin-inline-end: 8px; }
html[data-theme="dark"] .ew-signs li::before { color: #FCA5A5; }
.ew-ai { border-inline-start: 3px solid var(--nx-accent); padding: 6px 12px; margin: 6px 0 10px; font-size: .875rem; line-height: 1.5; white-space: pre-line; }
.ew-flag { margin-top: 6px; font-size: 11.5px; padding: 1px 9px; text-decoration: none; width: fit-content; }
.ew-flag:hover { text-decoration: underline; }
.ch-trend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; margin: 0 0 10px; color: var(--nx-ink-2); }
.ch-trend strong { font-weight: 700; }
.ch-trend.is-down strong { color: #B91C1C; }
.ch-trend.is-up strong { color: #166534; }
html[data-theme="dark"] .ch-trend.is-down strong { color: #FCA5A5; }
html[data-theme="dark"] .ch-trend.is-up strong { color: #86EFAC; }
.ch-spark { width: 120px; height: 28px; flex: none; color: var(--nx-accent); }
.ch-spark polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ar-list { display: grid; gap: 0; }
.ar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 12px 16px; border-bottom: 1px solid var(--nx-ring, rgba(0,0,0,.06)); align-items: start; }
.ar-row:last-child { border-bottom: 0; }
.ar-name { font-weight: 600; }
.ar-meta { font-size: .75rem; color: var(--nx-muted); margin-top: 2px; }
.ar-scores { text-align: end; display: grid; gap: 4px; justify-items: end; }
.ar-change { font-size: 12.5px; font-weight: 700; color: #B91C1C; }
html[data-theme="dark"] .ar-change { color: #FCA5A5; }
.ar-row .ch-factors { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; }
@media (max-width: 640px) {
    .ar-row { grid-template-columns: 1fr; }
    .ar-scores { justify-items: start; text-align: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
}

/* ---- User manual (/manual): a readable chapter with its sections on the side, numbered steps, full-width pictures that open large,
   Tip and "If something goes wrong" boxes; phone width, dark mode and right-to-left use the same rules; prints without the menu. ---- */
:root { --man-tip-bg: #F0FDF4; --man-tip-line: #86EFAC; --man-fix-bg: #FFF7ED; --man-fix-line: #FDBA74; --man-note-bg: #EEF2FF; --man-note-line: #A5B4FC; --man-warn-bg: #FFFBEB; --man-warn-line: #FCD34D; }
html[data-theme="dark"] { --man-tip-bg: rgba(34,197,94,.10); --man-tip-line: rgba(74,222,128,.45); --man-fix-bg: rgba(249,115,22,.10); --man-fix-line: rgba(251,146,60,.45); --man-note-bg: rgba(99,102,241,.14); --man-note-line: rgba(129,140,248,.45); --man-warn-bg: rgba(234,179,8,.10); --man-warn-line: rgba(250,204,21,.45); }
.man-search { position: relative; display: flex; gap: .5rem; align-items: center; max-width: 720px; margin-bottom: 1.25rem; }
.man-search .set-input { flex: 1 1 auto; min-width: 0; padding-inline-start: 2.25rem; height: 42px; }
.man-search-icon { position: absolute; inset-inline-start: .75rem; color: var(--nx-muted); pointer-events: none; }
.man-btn { display: inline-flex; align-items: center; gap: .375rem; height: 42px; padding: 0 1rem; border-radius: var(--nx-r-sm, 10px); border: 1px solid transparent; background: var(--nx-accent); color: #fff; font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer; white-space: nowrap; }
.man-btn:hover { background: var(--nx-accent-hover); }
.man-btn.is-quiet { height: 34px; padding: 0 .75rem; background: transparent; color: var(--nx-ink-2); border-color: var(--nx-ring-strong); font-weight: 550; font-size: .8125rem; }
.man-btn.is-quiet:hover { background: var(--nx-surface-3); }
.man-muted { color: var(--nx-muted); font-size: .875rem; }
.man-results { padding: 1rem 1.25rem; margin-bottom: 1.5rem; max-width: 900px; }
.man-results-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; margin-bottom: .5rem; }
.man-hits { list-style: none; margin: 0; padding: 0; }
.man-hits li { padding: .625rem 0; border-top: 1px solid var(--nx-ring); }
.man-hits a { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; text-decoration: none; }
.man-hit-title { font-weight: 650; color: var(--nx-accent); }
html[data-theme="dark"] .man-hit-title { color: var(--nx-300); }
.man-hit-where { font-size: .75rem; color: var(--nx-muted); }
.man-hit-snippet { font-size: .8125rem; color: var(--nx-ink-2); margin-top: .125rem; overflow-wrap: anywhere; }
.man-contents-title { font-size: 1rem; margin: 0 0 .75rem; }
.man-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: .75rem; }
.man-chapter-card a { display: flex; gap: 1rem; padding: 1.125rem 1.25rem; text-decoration: none; color: inherit; height: 100%; border-radius: inherit; }
.man-chapter-card a:hover { background: var(--nx-surface-2); }
.man-chapter-no { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--nx-accent-soft); color: var(--nx-accent); font-weight: 750; font-size: 1.125rem; }
html[data-theme="dark"] .man-chapter-no { background: rgba(129,140,248,.16); color: var(--nx-300); }
.man-chapter-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.man-chapter-title { font-weight: 700; font-size: 1rem; color: var(--nx-ink); }
.man-chapter-summary { font-size: .875rem; color: var(--nx-ink-2); line-height: 1.5; }
.man-chapter-meta { font-size: .75rem; color: var(--nx-muted); }
.man-foot { margin-top: 1.25rem; }
.man-empty { padding: 1rem 1.25rem; }
.man-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; max-width: 1180px; }
.man-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; font-size: .8125rem; padding-inline-end: .25rem; }
.man-toc-title { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--nx-muted); margin-bottom: .5rem; }
.man-toc ol { list-style: none; margin: 0 0 1rem; padding: 0; border-inline-start: 2px solid var(--nx-ring); }
.man-toc li a { display: block; padding: .3rem .75rem; color: var(--nx-ink-2); text-decoration: none; line-height: 1.35; margin-inline-start: -2px; border-inline-start: 2px solid transparent; }
.man-toc li a:hover { color: var(--nx-accent); border-inline-start-color: var(--nx-accent); }
html[data-theme="dark"] .man-toc li a:hover { color: var(--nx-300); border-inline-start-color: var(--nx-300); }
.man-toc li.is-sub a { padding-inline-start: 1.5rem; font-size: .78rem; }
.man-article { padding: 2rem 2.5rem 1.5rem; min-width: 0; }
.man-head { max-width: 72ch; margin-bottom: 1.5rem; }
.man-eyebrow { font-size: .75rem; font-weight: 650; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .05em; }
.man-head h1 { font-size: 1.75rem; line-height: 1.2; margin: .25rem 0 .5rem; letter-spacing: -0.02em; }
.man-lead { font-size: 1.0625rem; color: var(--nx-ink-2); margin: 0; line-height: 1.55; }
.man-body { line-height: 1.7; font-size: 1rem; color: var(--nx-ink); }
.man-body p { margin: 0 0 1rem; }
.man-body > p, .man-body > ul, .man-body > ol, .man-body > h2, .man-body > h3, .man-body > .man-box { max-width: 72ch; }
.man-body h2 { font-size: 1.3rem; margin: 2.25rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--nx-ring); scroll-margin-top: 80px; }
.man-body h3 { font-size: 1.075rem; margin: 1.5rem 0 .5rem; scroll-margin-top: 80px; }
.man-anchor { margin-inline-start: .5rem; color: var(--nx-muted); text-decoration: none; opacity: 0; font-weight: 400; }
.man-body h2:hover .man-anchor, .man-body h3:hover .man-anchor { opacity: 1; }
.man-body code { background: var(--nx-surface-3); border-radius: 5px; padding: 1px 6px; font-size: .9em; }
.man-body ul { padding-inline-start: 1.25rem; }
.man-steps { list-style: none; counter-reset: man-step; padding: 0; margin: 1rem 0; }
.man-steps[start] { counter-reset: man-step calc(var(--man-start, 1) - 1); }
.man-steps > li { counter-increment: man-step; position: relative; padding-inline-start: 2.5rem; margin: 0 0 1rem; max-width: none; }
.man-steps > li::before { content: counter(man-step); position: absolute; inset-inline-start: 0; top: .1rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--nx-accent); color: #fff; font-weight: 700; font-size: .8125rem; line-height: 1; }
.man-steps > li > p { margin: .5rem 0 0; max-width: 72ch; }
.man-fig { margin: 1rem 0 1.5rem; }
.man-steps .man-fig { margin: .75rem 0 .5rem; }
.man-fig a { display: inline-block; max-width: 100%; vertical-align: top; border: 1px solid var(--nx-ring-strong); border-radius: 10px; overflow: hidden; cursor: zoom-in; background: var(--nx-surface-2); }
.man-fig img { display: block; max-width: 100%; height: auto; }
.man-fig figcaption { font-size: .8125rem; color: var(--nx-muted); margin-top: .4rem; }
.man-box { margin: 1rem 0; padding: .75rem 1rem; border-radius: 10px; border: 1px solid var(--man-note-line); border-inline-start-width: 4px; background: var(--man-note-bg); font-size: .9375rem; }
.man-box.is-tip { background: var(--man-tip-bg); border-color: var(--man-tip-line); }
.man-box.is-fix { background: var(--man-fix-bg); border-color: var(--man-fix-line); }
.man-box.is-warn { background: var(--man-warn-bg); border-color: var(--man-warn-line); }
.man-box-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .125rem; }
/* Translated chapters (#manual-languages): the "not translated yet" note above an English chapter, and keyboard keys or codes inside an
   Arabic or Urdu chapter, which keep reading left to right. */
.man-untranslated { margin: 0 0 1.25rem; max-width: 72ch; font-size: .875rem; }
.man-body[dir="rtl"] code { direction: ltr /*rtl:ignore*/; unicode-bidi: isolate; }
.man-chapter-english { font-style: italic; }
.man-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--nx-ring); }
.man-pager-link { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; border: 1px solid var(--nx-ring-strong); border-radius: 10px; text-decoration: none; color: var(--nx-ink); font-weight: 650; max-width: 48%; }
.man-pager-link span { font-size: .75rem; font-weight: 500; color: var(--nx-muted); }
.man-pager-link.is-next { margin-inline-start: auto; text-align: end; }
.man-pager-link:hover { border-color: var(--nx-accent); }
.man-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.man-lightbox::backdrop { background: rgba(10, 12, 24, .82); }
.man-lightbox img { display: block; max-width: 96vw; max-height: 88vh; width: auto; height: auto; border-radius: 8px; background: #fff; }
.man-lightbox-caption { color: #fff; text-align: center; margin: .5rem 0 0; font-size: .875rem; }
.man-lightbox-close { position: absolute; top: -.5rem; inset-inline-end: -.5rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: #111; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
@media (max-width: 960px) {
  .man-layout { grid-template-columns: 1fr; }
  .man-toc { position: static; max-height: none; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r, 12px); padding: .875rem 1rem; }
}
@media (max-width: 600px) {
  .man-article { padding: 1.25rem 1rem 1rem; }
  .man-head h1 { font-size: 1.4rem; }
  .man-body { font-size: .9688rem; }
  .man-steps > li { padding-inline-start: 2.125rem; }
  .man-search .man-btn { padding: 0 .75rem; }
  .man-pager { flex-direction: column; }
  .man-pager-link { max-width: none; }
}
@media print {
  .man-toc, .man-crumbs, .man-pager, .man-lightbox, .man-anchor { display: none !important; }
  .man-layout { display: block; max-width: none; }
  .man-article { border: 0 !important; box-shadow: none !important; padding: 0; }
  .man-body { font-size: 11pt; color: #000; }
  .man-body h2 { break-after: avoid; border-top: 0; }
  .man-fig, .man-box, .man-steps > li { break-inside: avoid; }
  .man-fig img { max-height: 11cm; width: auto; max-width: 100%; margin: 0 auto; }
  .man-fig a { border-color: #ccc; }
  .man-steps > li::before { background: #fff; color: #000; border: 1.5px solid #000; }
}
/* Quote accuracy: finished projects quoted against actual, the price advice on quotations and deals, and the "Runs over" flag. */
.qa-table td.num, .qa-table th.num { white-space: nowrap; }
.qa-table .qa-bad { color: #B42318; font-weight: 650; }
.qa-table .qa-warn { color: #B54708; font-weight: 600; }
.qa-table .qa-good { color: #067647; }
.qa-table tr.is-picked td { background: var(--nx-accent-soft); }
.qa-runs { margin-inline-start: 8px; }
.qa-src { font-size: .75rem; color: var(--nx-ink-2); max-width: 260px; }
.qa-advice .qa-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; margin-bottom: 10px; }
.qa-advice .qa-inputs .set-field { margin: 0; font-size: .8125rem; color: var(--nx-ink-2); display: grid; gap: 4px; }
.qa-suggest { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.qa-sug { flex: 1 1 180px; display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--nx-surface-2); border: 1px solid var(--nx-ring); }
.qa-sug b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.qa-sug small, .qa-sug-cap { font-size: .75rem; color: var(--nx-muted); }
.qa-basis { margin: 6px 0 8px; padding-inline-start: 18px; font-size: .8125rem; line-height: 1.5; color: var(--nx-ink-2); }
.qa-acts { justify-content: flex-start; margin-top: 6px; }
.qa-flag a { margin-inline-start: 6px; }
html[data-theme="dark"] .qa-table .qa-bad { color: #FDA29B; }
html[data-theme="dark"] .qa-table .qa-warn { color: #FEC84B; }
html[data-theme="dark"] .qa-table .qa-good { color: #75E0A7; }
html[data-theme="dark"] .qa-table tr.is-picked td { background: rgba(139, 140, 245, 0.16); }
@media (max-width: 640px) {
    .qa-advice .qa-inputs { grid-template-columns: 1fr; }
    .qa-src { max-width: none; }
}

/* Employee Workload: a person's day in their own order (dragged cards). The number is the card's place; a line shows where it will land. */
.load-item-rank{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-inline-end:4px;border-radius:999px;background:var(--mud-palette-primary);color:#fff;font-size:.65rem;font-weight:700;line-height:1}
.load-item.is-drop-before{box-shadow:0 -3px 0 0 var(--mud-palette-primary)}
/* Candidates (#592): the application's text, its files and the filters */
.cd-filters{display:flex;gap:10px;flex-wrap:wrap}
.cd-filters input{flex:1 1 240px}
.cd-filters select{flex:0 0 200px}
.cd-notes{width:100%;resize:vertical}
.cd-message{white-space:pre-wrap;max-height:320px;overflow:auto;padding:10px 12px;border:1px solid var(--nx-border,#EAECF0);border-radius:8px;background:var(--nx-surface-2,#F9FAFB);font-size:.9rem}
.cd-files{list-style:none;margin:6px 0 0;padding:0}
.cd-files li{display:flex;align-items:center;gap:8px;padding:4px 0}
.cd-files a{word-break:break-all}


/* Attendance devices: the Kaam360 Connector's setup steps */
.ad-connector-steps{margin:12px 0 8px;padding-inline-start:20px}
.ad-connector-steps li{margin:4px 0}

/* Close my day: the daily check-in (project autopilot) */
.cd-checkins{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cd-checkins li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 0;border-top:1px solid var(--nx-border,#EAECF0)}
.cd-checkins li:first-child{border-top:0}
.cd-check-title{flex:1 1 260px;min-width:0}
.cd-check-title a{font-weight:600}
.cd-late{color:var(--mud-palette-error)}
.cd-check-choices{display:flex;gap:6px;flex-wrap:wrap}
.cd-check-btn{border:1px solid var(--nx-border,#D0D5DD);background:var(--nx-surface);border-radius:999px;padding:3px 12px;font-size:.8rem;font-weight:600;cursor:pointer;color:inherit}
.cd-check-btn:focus-visible{outline:2px solid var(--mud-palette-primary);outline-offset:1px}
.cd-check-btn.is-ontrack.active{background:color-mix(in srgb,var(--mud-palette-success) 16%,var(--nx-surface));border-color:var(--mud-palette-success)}
.cd-check-btn.is-atrisk.active{background:color-mix(in srgb,var(--mud-palette-warning) 18%,var(--nx-surface));border-color:var(--mud-palette-warning)}
.cd-check-btn.is-blocked.active{background:color-mix(in srgb,var(--mud-palette-error) 14%,var(--nx-surface));border-color:var(--mud-palette-error)}
.cd-check-note{flex:1 1 100%}

/* Project autopilot, layer 3: the delay radar and the reminder record */
.dr-reasons{margin:0;padding-inline-start:16px}
.dr-reasons li{margin:2px 0}
.dr-actions{white-space:nowrap}
.rr-text{max-width:420px}

/* ---- Live screen sharing (#606): the customer's page /share/{token} and the supporter's viewer on a ticket */
.ss-card { max-width: 560px; margin: 48px auto; }
.ss-org { font-size: .85rem; color: var(--nx-text-muted, #64748b); font-weight: 600; }
.ss-title { font-size: 1.4rem; margin: 4px 0 12px; }
.ss-points { margin: 0 0 18px; padding-inline-start: 20px; line-height: 1.6; }
.ss-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ss-status { margin: 14px 0 0; min-height: 1.4em; font-weight: 600; }
.ss-card.is-over .ss-points { opacity: .6; }
.ss-viewer { margin-bottom: 16px; }
.ss-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ss-viewer-head .pf-title { display: flex; align-items: center; gap: 6px; margin: 0; }
.ss-link { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.ss-link .set-input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, monospace; font-size: .85rem; }
.ss-stage { position: relative; display: none; margin-top: 8px; background: #0f172a; border-radius: 10px; overflow: hidden; }
.ss-stage.is-live { display: block; }
.ss-stage video { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #0f172a; }
.ss-full { position: absolute; top: 8px; right: 8px; border: 0; border-radius: 6px; padding: 4px 10px; background: rgba(15, 23, 42, .75); color: #fff; cursor: pointer; font-size: .8rem; }
.ss-full:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) { .ss-card { margin: 20px 16px; } .ss-title { font-size: 1.2rem; } }
/* ---- Team chat (#607): the list, the conversation and the thread side by side; one at a time on a phone */
.tc-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; height: calc(100vh - 120px); min-height: 480px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r); overflow: hidden; }
.tc-shell.show-thread { grid-template-columns: 260px minmax(0, 1fr) 360px; }
.tc-side { border-right: 1px solid var(--nx-ring); overflow-y: auto; padding: 10px 8px; background: var(--nx-surface-2); }
.tc-side-head { padding: 4px 8px 8px; }
.tc-h1 { font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: 6px; }
.tc-search { padding: 0 4px 8px; }
.tc-search .set-input { width: 100%; }
.tc-group-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--nx-muted); }
.tc-plus { border: 0; background: transparent; color: var(--nx-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: var(--nx-r-xs); padding: 0 6px; }
.tc-plus:hover, .tc-plus:focus-visible { background: var(--nx-surface-3); color: var(--nx-ink); }
.tc-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; background: transparent; border-radius: var(--nx-r-sm); color: var(--nx-ink-2); text-decoration: none; font: inherit; text-align: start; cursor: pointer; }
.tc-row:hover { background: var(--nx-surface-3); }
.tc-row.is-on { background: var(--nx-accent-soft); color: var(--nx-ink); }
.tc-row.is-unread .tc-name { font-weight: 700; color: var(--nx-ink); }
.tc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-hash { width: 18px; text-align: center; color: var(--nx-muted); flex: none; }
.tc-av { width: 20px; height: 20px; font-size: .6rem; flex: none; }
.tc-badge { margin-left: 0; }
.tc-badge.is-mention { background: var(--nx-accent); }
.tc-browse { color: var(--nx-muted); }
.tc-archived summary { cursor: pointer; padding: 10px 8px 4px; font-size: .75rem; color: var(--nx-muted); }
.tc-hits { margin: 0 0 6px; }
.tc-hit { display: block; width: 100%; text-align: start; border: 0; background: var(--nx-surface); border-radius: var(--nx-r-sm); padding: 6px 8px; margin-bottom: 4px; cursor: pointer; font: inherit; color: var(--nx-ink-2); }
.tc-hit:hover { background: var(--nx-surface-3); }
.tc-hit-where { display: block; font-size: .72rem; color: var(--nx-muted); }
.tc-hit-text { display: block; font-size: .85rem; }
.tc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.tc-thread { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--nx-ring); background: var(--nx-surface); }
.tc-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--nx-ring); }
.tc-head-text { flex: 1; min-width: 0; }
.tc-head h2 { font-size: 1rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-head-sub { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--nx-muted); }
.tc-back { display: none; font-size: 1.5rem; line-height: 1; color: var(--nx-ink); text-decoration: none; border: 0; background: transparent; cursor: pointer; padding: 0 4px; }
.tc-close { font-size: 1.2rem; }
.tc-stream { flex: 1; overflow-y: auto; padding: 8px 16px 12px; min-height: 0; }
.tc-day { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: .72rem; color: var(--nx-muted); font-weight: 600; }
.tc-day::before, .tc-day::after { content: ""; flex: 1; border-top: 1px solid var(--nx-ring); }
.tc-first, .tc-typing { color: var(--nx-muted); font-size: .85rem; padding: 10px 0; }
.tc-typing { font-style: italic; padding: 4px 0 0; }
.tc-msg { position: relative; display: flex; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--nx-r-sm); }
.tc-msg:hover, .tc-msg:focus-within { background: var(--nx-surface-2); }
.tc-msg-av { width: 32px; height: 32px; flex: none; font-size: .75rem; }
.tc-msg-body { flex: 1; min-width: 0; }
.tc-msg-head { font-size: .88rem; }
.tc-when { color: var(--nx-muted); font-size: .72rem; margin-left: 4px; }
.tc-text { font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; color: var(--nx-ink); }
.tc-text code { background: var(--nx-surface-3); border-radius: 4px; padding: 0 4px; font-size: .85em; }
.tc-text a { color: var(--nx-accent); }
.tc-gone { color: var(--nx-muted); font-style: italic; }
.tc-at { background: var(--nx-accent-soft); color: var(--nx-accent); border-radius: 4px; padding: 0 2px; font-weight: 600; }
.tc-at.is-me { background: #fef3c7; color: #92400e; }
.tc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tc-pic img { display: block; max-width: 260px; max-height: 200px; border-radius: var(--nx-r-sm); border: 1px solid var(--nx-ring); }
.tc-task { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; max-width: 520px; border: 1px solid var(--nx-ring); border-left: 3px solid var(--nx-accent); border-radius: var(--nx-r-sm); background: var(--nx-surface); color: var(--nx-ink); text-decoration: none; }
.tc-task:hover { background: var(--nx-surface-2); }
.tc-task-title { font-weight: 600; }
.tc-task-meta { font-size: .75rem; color: var(--nx-muted); flex-basis: 100%; padding-left: 24px; }
.tc-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tc-react { border: 1px solid var(--nx-ring); background: var(--nx-surface); border-radius: 999px; padding: 0 8px; font-size: .85rem; cursor: pointer; line-height: 1.6; }
.tc-react.is-mine { border-color: var(--nx-accent); background: var(--nx-accent-soft); }
.tc-react span { font-size: .75rem; color: var(--nx-ink-2); margin-left: 2px; }
.tc-replies { border: 0; background: transparent; color: var(--nx-accent); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; padding: 2px 0; }
.tc-tools { position: absolute; top: -12px; right: 8px; display: none; gap: 2px; padding: 2px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.tc-msg:hover .tc-tools, .tc-msg:focus-within .tc-tools { display: flex; }
.tc-tools button, .tc-emoji summary { border: 0; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: var(--nx-r-xs); font-size: .9rem; color: var(--nx-ink-2); list-style: none; }
.tc-emoji summary::-webkit-details-marker { display: none; }
.tc-tools button:hover, .tc-emoji summary:hover { background: var(--nx-surface-3); }
.tc-tools .is-danger { color: var(--nx-critical); font-size: .78rem; font-weight: 600; }
.tc-emoji { position: relative; }
.tc-emoji-list { position: absolute; top: 100%; right: 0; z-index: 5; display: flex; gap: 2px; padding: 4px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.tc-edit { width: 100%; margin-top: 4px; }
.tc-compose { border-top: 1px solid var(--nx-ring); padding: 10px 16px 12px; }
.tc-input { width: 100%; resize: vertical; min-height: 44px; max-height: 240px; }
.tc-compose-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tc-hint { flex: 1; text-align: end; font-size: .72rem; color: var(--nx-muted); }
.tc-join { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--nx-ring); background: var(--nx-surface-2); }
.tc-empty { margin: auto; text-align: center; max-width: 380px; padding: 24px; color: var(--nx-muted); }
.tc-empty .mud-icon-root { font-size: 3rem; color: var(--nx-accent); }
.tc-empty h2 { color: var(--nx-ink); font-size: 1.2rem; }
.tc-panel { margin: 12px 16px 0; }
.tc-sub-title { margin-top: 12px; }
.tc-browse-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--nx-ring); }
.tc-members { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tc-member { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--nx-surface-3); font-size: .82rem; }
.tc-pick { margin: 10px 0; position: relative; }
.tc-pick-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
.tc-pick .set-input { width: 100%; }
.tc-pick-list { margin-top: 4px; border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); background: var(--nx-surface); max-height: 260px; overflow-y: auto; }
@media (max-width: 900px) {
    .tc-shell, .tc-shell.show-thread { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 100px); }
    .tc-shell.show-list .tc-main, .tc-shell.show-list .tc-thread { display: none; }
    .tc-shell.show-chat .tc-side, .tc-shell.show-chat .tc-thread { display: none; }
    .tc-shell.show-thread .tc-side, .tc-shell.show-thread .tc-main { display: none; }
    .tc-shell.show-list .tc-main:has(.tc-panel) { display: flex; }
    .tc-back { display: inline-block; }
    .tc-thread { border-left: 0; }
    .tc-hint { display: none; }
    .tc-stream { padding: 8px 12px; }
    .tc-pic img { max-width: 100%; }
}
html[data-theme="dark"] .tc-at.is-me { background: #78350f; color: #fde68a; }

/* ---- What's new: the release notes page, the dot and row in the Guide menu, and the once-only window for a big release */
.gd-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-accent); box-shadow: 0 0 0 2px var(--nx-surface); }
.gd-news { position: relative; }
.gd-row .gd-news-count { margin-left: auto; display: inline-block; align-self: center; }
.wn-list { max-width: 760px; }
.wn-day { margin-bottom: 18px; }
.wn-date { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--nx-muted); margin: 0 0 8px; }
.wn-item { margin-bottom: 10px; padding: 14px 18px; }
.wn-item.is-new { border-left: 3px solid var(--nx-accent); }
.wn-item-head { display: flex; align-items: center; gap: 8px; }
.wn-item h3 { font-size: 1rem; margin: 0; }
.wn-item p { margin: 6px 0 0; color: var(--nx-ink-2); line-height: 1.55; }
.wn-badge { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-accent); }
.wn-actions, .wn-pop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; font-size: .875rem; }
.wn-list .wn-actions a, .wn-pop .wn-pop-actions a { color: var(--nx-accent); font-weight: 600; text-decoration: none; }
.wn-list .wn-actions a:hover, .wn-pop .wn-pop-actions a:hover { text-decoration: underline; }
.wn-list .wn-try, .wn-pop .wn-try { display: inline-block; padding: 5px 14px; border-radius: var(--nx-r-sm); background: var(--nx-accent); color: #fff !important; }
.wn-list .wn-try:hover, .wn-pop .wn-try:hover { text-decoration: none !important; filter: brightness(1.08); }
.wn-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1400; }
.wn-pop { position: fixed; z-index: 1401; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); width: min(480px, calc(100vw - 32px)); background: var(--nx-surface); color: var(--nx-ink); border-radius: var(--nx-r); padding: 22px 24px; box-shadow: 0 18px 48px rgba(0, 0, 0, .25); }
.wn-pop-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--nx-accent); text-transform: uppercase; letter-spacing: .03em; }
.wn-pop h2 { font-size: 1.25rem; margin: 8px 0 6px; }
.wn-pop p { margin: 0; line-height: 1.55; color: var(--nx-ink-2); }
.wn-close { margin-left: auto; border: 1px solid var(--nx-ring); background: transparent; color: var(--nx-ink); border-radius: var(--nx-r-sm); padding: 5px 14px; cursor: pointer; font: inherit; }
.wn-close:hover { background: var(--nx-surface-2); }
@media (prefers-reduced-motion: no-preference) { .wn-pop { animation: wn-in .18s ease-out; } @keyframes wn-in { from { opacity: 0; transform: translateY(-46%); } to { opacity: 1; transform: translateY(-50%); } } }
/* Previous / next record on a record's page ("‹ 3 of 12 ›", RecordStepper; keys [ and ]). Same height as the small outlined buttons beside it.
   The chevrons are mirrored in right-to-left languages, so "next" always points the reading direction. */
.nx-step { display: inline-flex; align-items: center; gap: 2px; height: 31px; padding: 0 2px; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r-sm); background: var(--nx-surface); color: var(--nx-ink); }
.nx-step-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--nx-r-xs); background: transparent; color: inherit; cursor: pointer; }
.nx-step-btn:hover { background: var(--nx-accent-soft); color: var(--nx-accent); }
.nx-step-btn:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 1px; }
.nx-step-pos { padding: 0 4px; font-size: .8125rem; color: var(--nx-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
html[dir="rtl"] .nx-step-btn .mud-icon-root { transform: scaleX(-1); }
@media (max-width: 600px) { .nx-step-pos { display: none; } .nx-step-btn { width: 30px; height: 30px; } .nx-step { height: 34px; } }

/* ---- Team chat on every page (Shared/ChatDock.razor): a round Chat button above Support, the list of conversations, and small chat windows
   docked at the bottom of the screen, like a messenger. One window fills the screen on a phone. */
.cd { position: fixed; inset-inline-end: 20px; bottom: 84px; z-index: 1390; display: flex; flex-direction: column; align-items: flex-end; gap: .625rem; pointer-events: none; }
.cd > * { pointer-events: auto; }
body:has(.side-panel, .nx-dialog, .mud-dialog-container) .cd { display: none; }
body:has(.sc-panel) .cd-fab, body:has(.sc-panel) .cd-panel { display: none; }
.cd-fab { position: relative; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--nx-accent); color: #fff; cursor: pointer; box-shadow: var(--nx-sh-pop); display: inline-flex; align-items: center; justify-content: center; }
.cd-fab:hover { background: var(--nx-700); }
.cd-fab:focus-visible { outline: 3px solid var(--nx-ring-strong); outline-offset: 2px; }
.cd-fab-count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--nx-surface); }
.cd-panel { width: min(340px, calc(100vw - 32px)); max-height: min(520px, calc(100dvh - 180px)); display: flex; flex-direction: column; background: var(--nx-surface); color: var(--nx-ink); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-lg); box-shadow: var(--nx-sh-pop); overflow: hidden; animation: gd-rise .2s ease both; }
.cd-panel-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 6px 14px; }
.cd-panel-head strong { flex: 1; font-size: 1rem; }
.cd-search { box-sizing: border-box; width: calc(100% - 20px); margin: 0 10px 8px; }
.cd-list { overflow-y: auto; padding: 0 6px 8px; }
.cd-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; background: transparent; border-radius: var(--nx-r-sm); color: var(--nx-ink-2); font: inherit; text-align: start; cursor: pointer; }
.cd-row:hover { background: var(--nx-surface-2); }
.cd-row.is-unread .cd-row-name { font-weight: 700; color: var(--nx-ink); }
.cd-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row-hint { font-size: .72rem; color: var(--nx-muted); }
.cd-badge { margin: 0; }
.cd-av { width: 28px; height: 28px; font-size: .7rem; flex: none; }
.cd-icon { border: 0; background: transparent; color: var(--nx-muted); border-radius: var(--nx-r-xs); padding: 4px; cursor: pointer; display: inline-flex; text-decoration: none; }
.cd-icon:hover { background: var(--nx-surface-3); color: var(--nx-ink); }
.cd-empty { padding: 14px; color: var(--nx-muted); font-size: .85rem; text-align: center; }
/* The windows sit on the bottom edge, to the side of the buttons, newest nearest. */
.cd-wins { position: fixed; bottom: 0; inset-inline-end: 88px; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; pointer-events: none; }
.cd-win { pointer-events: auto; width: 320px; height: 440px; max-height: calc(100dvh - 90px); display: flex; flex-direction: column; background: var(--nx-surface); color: var(--nx-ink); border: 1px solid var(--nx-ring); border-bottom: 0; border-radius: var(--nx-r) var(--nx-r) 0 0; box-shadow: var(--nx-sh-pop); overflow: hidden; }
.cd-win.is-small { height: auto; width: 240px; }
.cd-win-head { display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 8px; border-bottom: 1px solid var(--nx-ring); background: var(--nx-surface); }
.cd-win.has-new .cd-win-head { background: var(--nx-accent-soft); }
.cd-win-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; font: inherit; font-weight: 650; color: var(--nx-ink); cursor: pointer; text-align: start; padding: 0; }
.cd-win-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-log { flex: 1; overflow-y: auto; padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 4px; }
.cd-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.cd-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.cd-who { font-size: .7rem; color: var(--nx-muted); margin: 4px 0 1px 8px; }
.cd-bubble { padding: 6px 10px; border-radius: 16px; background: var(--nx-surface-3); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.cd-msg.is-mine .cd-bubble { background: var(--nx-accent); color: #fff; }
.cd-msg.is-mine .cd-bubble a { color: #fff; text-decoration: underline; }
.cd-msg.is-deleted .cd-bubble { background: transparent; border: 1px dashed var(--nx-ring); color: var(--nx-muted); }
.cd-bubble .tc-at { background: rgba(255, 255, 255, .25); color: inherit; }
.cd-pic img { display: block; max-width: 200px; max-height: 160px; border-radius: 10px; margin-top: 4px; }
.cd-file, .cd-task { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .8rem; color: inherit; }
.cd-replies { font-size: .72rem; color: var(--nx-accent); margin: 2px 8px; text-decoration: none; }
.cd-reacts { display: flex; gap: 4px; font-size: .75rem; margin: 2px 6px; }
.cd-reacts span { background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 999px; padding: 0 6px; }
.cd-typing { font-size: .75rem; color: var(--nx-muted); font-style: italic; padding: 2px 6px; }
.cd-compose { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--nx-ring); }
.cd-input { flex: 1; resize: none; min-height: 36px; max-height: 120px; border-radius: 18px; padding: 7px 12px; }
.cd-send { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--nx-accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cd-send:disabled { opacity: .45; cursor: default; }
.cd-join { padding: 10px; border-top: 1px solid var(--nx-ring); text-align: center; font-size: .85rem; }
@media (max-width: 1100px) { .cd-wins .cd-win:nth-child(n+3) { display: none; } }
@media (max-width: 700px) {
    .cd { inset-inline-end: 12px; bottom: 72px; }
    .cd-wins { inset: auto 0 0 0; flex-direction: column; align-items: stretch; gap: 0; }
    .cd-win:not(.is-small) { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; position: fixed; inset: 0; z-index: 1500; }
    .cd-win.is-small { display: none; }
    body:has(.cd-win:not(.is-small)) .cd-fab, body:has(.cd-win:not(.is-small)) .sc { display: none; }
}
/* The tour and set-up offer sits above the Chat button too, never on it. */
body:has(.cd-fab) .gd-offer { bottom: 148px; }
@media (max-width: 700px) { body:has(.cd-fab) .gd-offer { bottom: 136px; } }
body:has(.cd-panel, .cd-win:not(.is-small)) .gd-offer { display: none; }   /* the offer waits while someone is chatting */

/* Kaam360 Chat for Windows: the download link in Chat (hidden inside the desktop app itself). */
.tc-desktop-link { display: flex; align-items: center; gap: 8px; margin: 14px 8px 4px; padding: 8px 10px; border: 1px dashed var(--nx-ring); border-radius: 10px; color: var(--nx-ink-2); font-size: .82rem; text-decoration: none; }
.tc-desktop-link:hover { border-color: var(--nx-accent); color: var(--nx-accent); }
html.in-desktop-app .tc-desktop-link, html.in-desktop-app .tc-desktop-link-icon { display: none; }
/* ---- Team chat, the new look (owner, 11 Nov 2026: "too basic"): rows with a preview line, time and online dot; a header with the person's
   picture and status; grouped messages; a "New messages" line; a rounded message box with emoji, mention and files; animated typing dots.
   The same look in the docked windows. These rules come after the first chat rules on purpose and refine them. */
.tc-shell { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.tc-side { background: var(--nx-surface); padding: 12px 8px; }
.tc-search .set-input { border-radius: 999px; padding-inline-start: 14px; background: var(--nx-surface-2); }
.tc-row { padding: 8px 10px; gap: 10px; align-items: center; border-radius: 10px; }
.tc-row.is-on { background: var(--nx-accent-soft); }
.tc-row.is-on .tc-name { color: var(--nx-accent); }
.tc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tc-preview { font-size: .78rem; color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-row.is-unread .tc-preview { color: var(--nx-ink-2); font-weight: 600; }
.tc-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.tc-row-time { font-size: .7rem; color: var(--nx-muted); }
.tc-row.is-unread .tc-row-time { color: var(--nx-accent); font-weight: 700; }
.tc-tile { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--nx-surface-3); color: var(--nx-ink-2); font-weight: 700; font-size: .95rem; }
.tc-av { width: 34px; height: 34px; font-size: .78rem; position: relative; }
.tc-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #9ca3af; box-shadow: 0 0 0 2px var(--nx-surface); }
.tc-dot.is-online { background: #16a34a; }
.nx-avatar:has(.tc-dot) { position: relative; overflow: visible; }
.tc-head { gap: 12px; padding: 12px 18px; min-height: 64px; }
.tc-head-tile { width: 40px; height: 40px; font-size: 1.1rem; }
.tc-head-av { width: 40px; height: 40px; font-size: .9rem; flex: none; position: relative; }
.tc-head h2 { font-size: 1.05rem; }
.tc-online { color: #16a34a; font-weight: 600; }
.tc-stack { display: flex; flex-direction: row-reverse; }
.tc-stack .nx-avatar { width: 28px; height: 28px; font-size: .65rem; margin-inline-start: -8px; box-shadow: 0 0 0 2px var(--nx-surface); }
.tc-stack-more { background: var(--nx-surface-3) !important; color: var(--nx-ink-2) !important; }
.tc-stream { padding: 12px 18px 16px; background: var(--nx-surface); }
.tc-msg { padding: 4px 10px; margin: 0 -10px; gap: 12px; }
.tc-msg:not(.is-compact) { margin-top: 10px; }
.tc-msg-av { width: 36px; height: 36px; font-size: .8rem; position: relative; }
.tc-msg-gutter { width: 36px; flex: none; font-size: .65rem; color: transparent; text-align: center; padding-top: 4px; }
.tc-msg:hover .tc-msg-gutter { color: var(--nx-muted); }
.tc-msg-head strong { font-weight: 700; }
.tc-edited { margin-left: 0; }
.tc-text { font-size: .94rem; line-height: 1.55; }
.tc-text.is-emoji { font-size: 2rem; line-height: 1.2; }
.tc-msg.is-mine .tc-msg-head strong { color: var(--nx-accent); }
.tc-new-line { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: #dc2626; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.tc-new-line::before, .tc-new-line::after { content: ""; flex: 1; border-top: 1px solid rgba(220, 38, 38, .45); }
.tc-day span { background: var(--nx-surface-2); border: 1px solid var(--nx-ring); border-radius: 999px; padding: 2px 10px; }
.tc-day::before, .tc-day::after { border-top-color: var(--nx-ring); }
.tc-typing { display: flex; align-items: center; gap: 8px; font-style: normal; }
.tc-dots { display: inline-flex; gap: 3px; padding: 6px 8px; border-radius: 12px; background: var(--nx-surface-3); }
.tc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--nx-muted); display: block; }
@media (prefers-reduced-motion: no-preference) {
    .tc-dots i { animation: tc-blink 1.2s infinite ease-in-out; }
    .tc-dots i:nth-child(2) { animation-delay: .15s; }
    .tc-dots i:nth-child(3) { animation-delay: .3s; }
    @keyframes tc-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
}
.tc-react { padding: 1px 9px; }
.tc-tools { top: -14px; border-radius: 10px; padding: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
/* The message box: one rounded box, the text on top and the tools underneath. */
.tc-compose { padding: 10px 18px 16px; border-top: 0; }
.tc-box { border: 1px solid var(--nx-ring); border-radius: 14px; background: var(--nx-surface); transition: border-color .15s, box-shadow .15s; }
.tc-box:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); }
.tc-box .tc-input { display: block; width: 100%; box-sizing: border-box; border: 0; outline: 0; resize: none; background: transparent; color: var(--nx-ink); font: inherit; font-size: .94rem; line-height: 1.5; padding: 12px 14px 4px; min-height: 44px; max-height: 220px; }
.tc-box-foot { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; }
.tc-box-foot .cm-mention-wrap { position: relative; }
.tc-box-foot .cm-link { font-size: .8rem; color: var(--nx-muted); padding: 4px 8px; border-radius: 8px; }
.tc-box-foot .cm-link:hover { background: var(--nx-surface-2); color: var(--nx-ink); }
.tc-tool { border: 0; background: transparent; color: var(--nx-muted); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tc-tool:hover, .tc-tool:focus-visible { background: var(--nx-surface-2); color: var(--nx-ink); }
.tc-send { margin-inline-start: auto; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--nx-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tc-send:disabled { background: var(--nx-surface-3); color: var(--nx-muted); cursor: default; }
.tc-box-foot .tc-hint { margin-inline-start: 8px; flex: 0 1 auto; text-align: start; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.tc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: var(--nx-surface-2); border: 1px solid var(--nx-ring); font-size: .8rem; }
.tc-emo { position: relative; }
.tc-emo-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; width: 288px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.tc-emo-pop button { border: 0; background: transparent; font-size: 1.25rem; line-height: 1; padding: 5px 0; border-radius: 8px; cursor: pointer; }
.tc-emo-pop button:hover { background: var(--nx-surface-2); }
.tc-empty { max-width: 420px; }
.tc-empty .mud-icon-root { font-size: 3.5rem; background: var(--nx-accent-soft); border-radius: 20px; padding: 14px; box-sizing: content-box; }
/* The docked windows, the same look. */
.cd-fab { width: 56px; height: 56px; box-shadow: 0 10px 24px rgba(67, 56, 202, .35); }
.cd-panel { border-radius: 16px; }
.cd-panel-head strong { font-size: 1.1rem; }
.cd-search { border-radius: 999px; background: var(--nx-surface-2); }
.cd-row { padding: 8px; border-radius: 10px; }
.cd-av { width: 36px; height: 36px; font-size: .75rem; position: relative; }
.cd-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cd-row-preview { font-size: .76rem; color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row.is-unread .cd-row-preview { color: var(--nx-ink-2); font-weight: 600; }
.cd-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.cd-row-time { font-size: .68rem; color: var(--nx-muted); }
.cd-win { width: 336px; height: 470px; border-radius: 14px 14px 0 0; }
.cd-win.is-small { width: 250px; }
.cd-win-head { padding: 8px 6px 8px 10px; }
.cd-win-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cd-win-sub { font-size: .7rem; color: var(--nx-muted); font-weight: 500; }
.cd-log { padding: 10px 10px 6px; gap: 2px; background: var(--nx-surface); }
.cd-day { align-self: center; font-size: .68rem; color: var(--nx-muted); background: var(--nx-surface-2); border-radius: 999px; padding: 1px 10px; margin: 8px 0 4px; }
.cd-msg { position: relative; padding-inline-start: 34px; max-width: 88%; }
.cd-msg.is-mine { padding-inline-start: 0; }
.cd-msg.is-first { margin-top: 6px; }
.cd-msg-av { position: absolute; inset-inline-start: 0; bottom: 0; width: 26px; height: 26px; font-size: .6rem; }
.cd-msg-av.is-hidden { visibility: hidden; }
.cd-who { margin-inline-start: 4px; }
.cd-bubble { border-radius: 18px; padding: 7px 12px; }
.cd-msg:not(.is-mine) .cd-bubble { background: var(--nx-surface-3); }
.cd-msg.is-mine:not(.is-first) .cd-bubble { border-top-right-radius: 6px; }
.cd-msg:not(.is-mine):not(.is-first) .cd-bubble { border-top-left-radius: 6px; }
.cd-compose { align-items: center; gap: 4px; padding: 8px; }
.cd-compose .tc-emo-pop { left: 0; width: 264px; }
.cd-input { border: 1px solid var(--nx-ring); background: var(--nx-surface-2); color: var(--nx-ink); font: inherit; font-size: .88rem; outline: 0; }
.cd-input:focus { border-color: var(--nx-accent); background: var(--nx-surface); }
.cd-typing { display: flex; align-items: center; gap: 6px; font-style: normal; }
body:has(.tc-shell) .gd-offer { display: none; }   /* the set-up and tour offer waits while the Chat page is open: it would cover the message box */
html[data-theme="dark"] .tc-row.is-on .tc-name { color: var(--nx-ink); }
html[data-theme="dark"] .tc-row.is-on { background: rgba(99, 102, 241, .22); }

/* ---- Customer chat (#607): the label and pieces on the team's side, and the chat page in the client portal (/client/chat) */
.tc-tile-cust { background: #ecfdf5; color: #047857; }
html[data-theme="dark"] .tc-tile-cust { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
.tc-cust { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: .68rem; font-weight: 700; vertical-align: 1px; }
html[data-theme="dark"] .tc-cust { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
.tc-member.is-client { background: #ecfdf5; color: #065f46; }
html[data-theme="dark"] .tc-member.is-client { background: rgba(16, 185, 129, .18); color: #a7f3d0; }
.tc-company { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: start; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--nx-ring); border-radius: 10px; background: var(--nx-surface); color: var(--nx-ink); font: inherit; cursor: pointer; }
.tc-company:hover { border-color: var(--nx-accent); }
.tc-company small { color: var(--nx-muted); }
.tc-chosen-company { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.tc-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 10px; }
.pc-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 520px; height: calc(100dvh - 260px); background: var(--nx-surface, #fff); border: 1px solid var(--nx-ring, #e5e7eb); border-radius: 16px; overflow: hidden; margin-top: 12px; }
.pc-side { border-right: 1px solid var(--nx-ring, #e5e7eb); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pc-new { width: 100%; }
.pc-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pc-row:hover { background: var(--nx-surface-2, #f3f4f6); }
.pc-row.is-on { background: var(--nx-accent-soft, #eef2ff); }
.pc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-row.is-unread .pc-row-name { font-weight: 800; }
.pc-row-preview { font-size: .78rem; color: var(--nx-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pc-row-time { font-size: .7rem; color: var(--nx-muted, #6b7280); }
.pc-empty, .pc-placeholder, .pc-help { color: var(--nx-muted, #6b7280); font-size: .9rem; padding: 12px; }
.pc-placeholder { margin: auto; }
.pc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pc-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--nx-ring, #e5e7eb); }
.pc-head h2 { font-size: 1.05rem; margin: 0; }
.pc-back { display: none; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: inherit; }
.pc-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.pc-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.pc-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.pc-who { font-size: .72rem; color: var(--nx-muted, #6b7280); margin: 4px 8px 1px; }
.pc-bubble { padding: 8px 12px; border-radius: 16px; background: var(--nx-surface-3, #f1f5f9); overflow-wrap: anywhere; }
.pc-msg.is-mine .pc-bubble { background: var(--bk-accent, var(--nx-accent, #4338ca)); color: #fff; }
.pc-msg.is-mine .pc-bubble a { color: #fff; }
.pc-text { white-space: pre-wrap; line-height: 1.45; }
.pc-time { font-size: .68rem; color: var(--nx-muted, #6b7280); margin: 2px 8px; }
.pc-pic img { display: block; max-width: 260px; max-height: 200px; border-radius: 10px; margin-top: 4px; }
.pc-filelink { display: block; margin-top: 4px; }
.pc-compose { padding: 10px 16px 14px; border-top: 1px solid var(--nx-ring, #e5e7eb); }
.pc-label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; margin-bottom: 8px; }
.pc-select { max-width: 360px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--nx-ring, #d1d5db); font: inherit; }
.pc-box { border: 1px solid var(--nx-ring, #d1d5db); border-radius: 14px; background: var(--nx-surface, #fff); }
.pc-box:focus-within { border-color: var(--bk-accent, var(--nx-accent, #4338ca)); }
.pc-input { display: block; width: 100%; box-sizing: border-box; border: 0; outline: 0; resize: vertical; background: transparent; font: inherit; padding: 10px 12px 4px; min-height: 48px; color: inherit; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.pc-chip { font-size: .78rem; padding: 2px 8px; border-radius: 8px; background: var(--nx-surface-2, #f3f4f6); }
.pc-foot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.pc-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pc-attach { cursor: pointer; font-size: .85rem; color: var(--nx-muted, #6b7280); padding: 4px 8px; border-radius: 8px; }
.pc-attach:hover { background: var(--nx-surface-2, #f3f4f6); }
.pc-send { margin-inline-start: auto; }
.pc-error { color: #b91c1c; font-size: .85rem; margin-top: 6px; }
@media (max-width: 700px) {
    .pc-shell { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 200px); }
    .pc-shell.is-open .pc-side { display: none; }
    .pc-shell:not(.is-open) .pc-main { display: none; }
    .pc-back { display: inline-block; }
}

/* Team chat: work from chat (#607 stage 2): the "more" menu on a message (Make a task / Make a ticket), the quoted message, project channels */
.tc-more { position: relative; }
.tc-msg:has(details[open]) .tc-tools { display: flex; }
.tc-more summary { border: 0; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: var(--nx-r-xs); font-size: .9rem; color: var(--nx-ink-2); list-style: none; }
.tc-more summary::-webkit-details-marker { display: none; }
.tc-more summary:hover { background: var(--nx-surface-3); }
.tc-more-list { position: absolute; top: 100%; right: 0; z-index: 5; display: flex; flex-direction: column; min-width: 170px; padding: 4px; background: var(--nx-surface); border: 1px solid var(--nx-ring); border-radius: var(--nx-r-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.tc-tools .tc-more-list button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 6px 8px; white-space: nowrap; color: var(--nx-ink); }
.tc-quote { border-inline-start: 3px solid var(--nx-ring); padding-inline-start: 8px; margin: 4px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-tile-project { background: #eff6ff; color: #1d4ed8; }
html[data-theme="dark"] .tc-tile-project { background: rgba(59, 130, 246, .18); color: #93c5fd; }

/* Calls (#607 stage 3): the call window (built by nx-call.js on the page body), the ringing window, the bar over a conversation with a call going on */
.nx-call { position: fixed; inset-inline-end: 168px; bottom: 24px; z-index: 1600; width: min(880px, calc(100vw - 192px)); height: min(600px, calc(100vh - 48px)); display: flex; flex-direction: column;
  background: #0f172a; color: #f8fafc; border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); overflow: hidden; }
.nx-call.is-max, .nx-call:fullscreen { inset: 0; width: 100vw; height: 100vh; border-radius: 0; }
.nx-call.is-small { height: auto; width: 320px; }
.nx-call.is-small .nx-call-grid, .nx-call.is-small .nx-call-note { display: none; }
.nx-call-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, .04); }
.nx-call-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-call-meta { font-size: .8rem; color: #cbd5e1; white-space: nowrap; }
.nx-call-grid { flex: 1 1 auto; display: grid; gap: 8px; padding: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: minmax(140px, 1fr); overflow: auto; }
.nx-call-grid[data-count="1"] { grid-template-columns: 1fr; }
.nx-call-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.nx-call-tile { position: relative; display: flex; align-items: center; justify-content: center; background: #1e293b; border-radius: 12px; overflow: hidden; outline: 2px solid transparent; transition: outline-color .15s; }
.nx-call-tile.is-speaking { outline-color: #22c55e; }
.nx-call-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx-call-tile.is-me video { transform: scaleX(-1); }
.nx-call-tile.is-screen video, .nx-call-tile.is-me.is-screen video { object-fit: contain; transform: none; background: #000; }
.nx-call-tile.is-screen { grid-column: 1 / -1; grid-row: span 2; }
.nx-call-av { width: 64px; height: 64px; border-radius: 50%; background: #475569; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; }
.nx-call-tile.has-video .nx-call-av { display: none; }
.nx-call-name { position: absolute; inset-inline-start: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-call-note { min-height: 0; padding: 0 14px; color: #fbbf24; font-size: .85rem; }
.nx-call-note:not(:empty) { padding: 6px 14px; }
.nx-call-bar { display: flex; justify-content: center; gap: 10px; padding: 10px; }
.nx-call-btn { border: 0; cursor: pointer; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; background: #334155; color: #f8fafc; font-size: 1.05rem; }
.nx-call-btn:hover { background: #475569; }
.nx-call-btn.is-on { background: #e2e8f0; color: #0f172a; }
.nx-call-head .nx-call-btn { min-width: 32px; height: 32px; font-size: .9rem; background: transparent; }
.nx-call-btn.is-leave { background: #dc2626; font-weight: 600; font-size: .9rem; padding: 0 18px; }
.nx-call-btn.is-leave:hover { background: #b91c1c; }
.nx-call-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
@media (max-width: 640px) {
  .nx-call { inset: 0; width: 100vw; height: 100vh; border-radius: 0; }
  .nx-call.is-small { inset: auto 8px 8px 8px; width: auto; height: auto; border-radius: 12px; }
  .nx-call-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, 1fr); }
}

.nx-ring { position: fixed; top: 76px; inset-inline-end: 24px; z-index: 1700; display: flex; align-items: center; gap: 12px; width: min(380px, calc(100vw - 32px)); padding: 12px 14px;
  background: var(--nx-surface); color: var(--nx-ink); border: 1px solid var(--nx-ring); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); animation: nx-ring-in .2s ease-out; }
@keyframes nx-ring-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nx-ring { animation: none; } }
.nx-ring-av { width: 42px; height: 42px; flex: 0 0 auto; }
.nx-ring-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nx-ring-text span { font-size: .82rem; color: var(--nx-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-ring-actions { display: flex; gap: 6px; }
.nx-ring-btn { border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; font-size: 1.05rem; color: #fff; }
.nx-ring-btn.is-join { background: #16a34a; }
.nx-ring-btn.is-join:hover { background: #15803d; }
.nx-ring-btn.is-decline { background: #dc2626; }
.nx-ring-btn.is-decline:hover { background: #b91c1c; }
@media (max-width: 640px) { .nx-ring { top: 8px; inset-inline-end: 16px; } }

.tc-callbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #f0fdf4; color: #166534; border-bottom: 1px solid #bbf7d0; font-size: .88rem; }
.tc-callbar > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-callbar-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); flex: 0 0 auto; }
.tc-callbar-full { font-weight: 600; }
html[data-theme="dark"] .tc-callbar { background: rgba(34, 197, 94, .12); color: #86efac; border-bottom-color: rgba(34, 197, 94, .3); }
/* Chat button, Support button and chat windows never cover each other (owner's report, 12 Nov 2026).
   The round Chat button always sits just above the Support button, on the same side, wherever the person dragged Support to;
   the chat windows dock to the left of both buttons, so their message box and Send button are never under them. */
@media (min-width: 701px) {
    .cd-wins { inset-inline-end: 168px; }
    html.sc-moved:not(.sc-upper) .cd { bottom: calc(var(--sc-bottom, 20px) + 66px); }
    html.sc-moved.sc-upper .cd { top: calc(var(--sc-top, 20px) + 66px); bottom: auto; flex-direction: column-reverse; }
    html.sc-side-left .cd { inset-inline-end: auto; left: 20px; right: auto; align-items: flex-start; }
    html.sc-side-left .cd-wins { inset-inline-end: 20px; }
    html.sc-side-right .cd { inset-inline-end: auto; right: 20px; left: auto; align-items: flex-end; }
    html.sc-docked.sc-side-right .cd { right: 12px; }
    html.sc-docked.sc-side-left .cd { left: 12px; }
}
@media (max-width: 1280px) and (min-width: 701px) { .cd-wins .cd-win:nth-child(n+3) { display: none; } }
/* On the Chat page, the conversation ends above the Support button, so the Send buttons (conversation and thread) are never under it;
   the thread's narrow reply box keeps its Send button whole and leaves out the keyboard hint, which the main box already shows. */
@media (min-width: 701px) {
    body:has(.tc-shell) .tc-shell { height: calc(100vh - 120px - 64px); }
}
.tc-thread .tc-hint { display: none; }
.tc-thread .tc-send, .cd-win .tc-send { flex: 0 0 auto; }

/* Proposals (quotation sections and the template library, Nov 2026). Uses the shared cards, tables, tabs and form fields; these only lay them out. */
.prp-tabs { align-items: center; }
.prp-tabs .prp-filter { margin-inline-start: auto; width: auto; min-width: 180px; }
.prp-card { margin-bottom: 1rem; }
.prp-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.prp-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.prp-empty { color: var(--nx-muted); font-size: .875rem; padding: .75rem 0; }
.prp-edit .dk-check { display: flex; align-items: center; gap: .5rem; margin: .375rem 0; }
.prp-editor { display: grid; gap: .5rem; }
.prp-pic { border: 1px dashed var(--nx-ring-strong); border-radius: var(--nx-r); padding: .625rem; display: grid; gap: .5rem; background: var(--nx-surface-2, transparent); }
.prp-pic-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.prp-pic-row .set-input { width: auto; min-width: 140px; }
.prp-pic-file { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 .75rem; border: 1px solid var(--nx-ring-strong); border-radius: var(--nx-r); cursor: pointer; font-size: .875rem; max-width: 100%; overflow: hidden; }
.prp-pic-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.prp-tools { display: flex; align-items: center; gap: .5rem; }
.prp-cover { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--nx-muted); }
.prp-cover .set-input { width: auto; }
.prp-sec { border: 1px solid var(--nx-ring); border-radius: var(--nx-r); margin-bottom: .5rem; background: var(--nx-surface); }
.prp-sec-head, .prp-mod-head { display: flex; align-items: center; gap: .375rem; padding: .375rem .5rem; }
.prp-sec-toggle { border: 0; background: transparent; color: var(--nx-muted); cursor: pointer; display: inline-flex; padding: 2px; border-radius: 6px; }
.prp-sec-toggle:hover { background: var(--nx-accent-soft); color: var(--nx-ink); }
.prp-sec-no { min-width: 24px; height: 24px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-accent); font-weight: 700; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.prp-sec-no.is-sub { background: transparent; border: 1px solid var(--nx-ring); color: var(--nx-muted); }
.prp-sec-title { flex: 1 1 200px; min-width: 0; font-weight: 600; }
.prp-kind { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--nx-muted); border: 1px solid var(--nx-ring); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.prp-kind.is-pricing { color: var(--nx-accent); border-color: var(--nx-accent); }
.prp-sec-body { padding: 0 .75rem .75rem; display: grid; gap: .5rem; }
.prp-mods { display: grid; gap: .5rem; border-inline-start: 3px solid var(--nx-accent-soft); padding-inline-start: .625rem; }
.prp-mod { border: 1px solid var(--nx-ring); border-radius: var(--nx-r); padding-bottom: .5rem; }
.prp-mod .prp-editor { padding: 0 .5rem; }
.prp-add-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.prp-add-row .set-input { width: auto; min-width: 220px; max-width: 100%; }
.prp-add-main { margin-top: .5rem; }
.prp-lib-link { font-size: .8125rem; margin-inline-start: auto; }
.prp-billing { display: flex; gap: .25rem; }
.prp-billing .set-input { min-width: 0; }
.prp-recurring { font-weight: 600; margin-top: .5rem; }
.prp-tc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.prp-tc-head .set-input { width: auto; }
/* Pictures in proposal text: beside the text (left or right), in the middle, or across the page; on a phone always across. */
.nx-rich-body .nx-img-left, .nx-rich-view .nx-img-left { float: left; margin: 0 1rem .5rem 0; max-width: 60%; height: auto; }
.nx-rich-body .nx-img-right, .nx-rich-view .nx-img-right { float: right; margin: 0 0 .5rem 1rem; max-width: 60%; height: auto; }
.nx-rich-body .nx-img-center, .nx-rich-view .nx-img-center { display: block; margin: .5rem auto; max-width: 100%; height: auto; }
.nx-rich-body .nx-img-full, .nx-rich-view .nx-img-full { display: block; width: 100%; height: auto; margin: .5rem 0; }
@media (max-width: 640px) {
  .prp-add-row .set-input, .prp-tabs .prp-filter { width: 100%; min-width: 0; }
  .prp-lib-link { margin-inline-start: 0; }
  .nx-rich-body .nx-img-left, .nx-rich-body .nx-img-right, .nx-rich-view .nx-img-left, .nx-rich-view .nx-img-right { float: none; display: block; margin: .5rem auto; max-width: 100%; width: auto !important; }
}
.prp-outline { margin: 0 0 .5rem; padding-inline-start: 1.25rem; display: grid; gap: .25rem; }
.prp-outline-sub { color: var(--nx-muted); font-size: .8125rem; margin-inline-start: .5rem; }