/* crm-core — layout chrome + global primitives. Deps: crm-tokens (the --crm-* definitions live THERE, never here). */

body[data-crm-theme] {
    background-color: var(--crm-surface-1);
    color: var(--crm-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

[class^="crm-"],
[class*=" crm-"] {
    font-family: var(--crm-font);
    line-height: var(--crm-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.crm-ul{
    padding-left: 18px;
}

.crm-widget {
    max-width: 100%;
    margin: 30px auto;

    background: var(--crm-bg);
    box-shadow: var(--crm-shadow-lg);
    width: 520px;
    border-radius: var(--crm-radius-lg);
    overflow: hidden;
}
.crm-widget__header-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
}
.crm-widget__header {
    background: var(--crm-primary);
    color: var(--crm-text-on-primary);
    padding: var(--crm-sp-3) var(--crm-sp-4);
    display: flex;
    align-items: center;
    gap: var(--crm-sp-3);
}
.crm-widget__header,
.crm-widget__header * {
    color: var(--crm-text-on-primary);
}
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-widget__header {
    background: var(--crm-surface-2);
}
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-widget__header,
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-widget__header * {
    color: var(--crm-text);
}
.crm-widget__header-title {
    font-size: var(--crm-text-lg);
    font-weight: var(--crm-weight-semibold);
    margin: 0;
}
.crm-widget__header-user {
    font-size: var(--crm-text-xs);
    opacity: 0.8;
    margin-left: auto;
}
.crm-widget__body {
    padding: var(--crm-sp-4);
}
.crm-widget-body {
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .crm-widget {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .crm-widget__header-wrapper {
        position: static;
    }
    .crm-widget .crm-widget__nav {
        position: static;
    }
    .crm-widget .crm-widget__body {
        padding: var(--crm-sp-3);
    }
}

.crm-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

body:has(.crm-layout), html:has(.crm-layout) {
    padding: 0 !important;
    margin: 0 !important;
}

body:has(.crm-layout) div#wpadminbar {
    opacity: 0;
}
body:has(.crm-layout) div#wpadminbar:hover{
    opacity: 1;
}

/* Chrome depth — each chrome layer sits "below" its right neighbour (menu < rail < canvas).
   Inset so the cast survives overflow:hidden ancestors (chat grid). */
[data-crm-chrome] { box-shadow: inset -18px 0 32px -18px var(--crm-elev-cast); }

.crm-appearance { min-width: 240px; }
/* Vzhled trigger mirrors the topbar user pill (Roman 2026-08-19):
   tight sp-1 padding, disc flush to the edge, border only on hover/open. */
[data-crm-toolpop="crm-appearance"] .crm-toolpop__trigger {
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-1) var(--crm-sp-2) var(--crm-sp-1) var(--crm-sp-1);
    border: 1px solid transparent;
    border-radius: var(--crm-radius-full);
    transition: background var(--crm-ease), border-color var(--crm-ease);
    padding: 0 var(--crm-sp-2) 0 0;
    height: auto;
    margin-left: -4px;
}
[data-crm-toolpop="crm-appearance"]  .crm-toolpop__trigger .crm-toolpop__label{
    display: block!important;
}

[data-crm-toolpop="crm-appearance"] .crm-toolpop__trigger:hover,
[data-crm-toolpop="crm-appearance"].crm-toolpop--open .crm-toolpop__trigger {
    background: var(--crm-surface-2);
    border-color: var(--crm-border-strong, var(--crm-border));
}
[data-crm-toolpop="crm-appearance"] .crm-toolpop__icon--glyph {
    width: 28px;
    height: 28px;
    border-radius: var(--crm-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--crm-primary-soft);
    font-size: 15px;
}
/* ⚠ This panel's own z-index is inert — .crm-layout__sidebar is a stacking
   context, so what actually decides whether the panel is visible is the
   sidebar's z-index (chrome tier 100; see the note there). Without it the
   DOM-later chat column, then the harmonogram project column, painted OVER
   this panel (Roman 2026-08-19). */
@media (min-width: 721px) {
    [data-crm-toolpop="crm-appearance"].crm-toolpop .crm-toolpop__panel,
    [data-crm-toolpop="crm-appearance"].crm-toolpop--open .crm-toolpop__panel {
        width: 320px;
        min-width: 0;
        max-height: min(600px, calc(100vh - 96px));
        overflow-y: auto;
    }
}
/* .crm-appearance — appearance picker: segmented mode control + skin gallery rows. */
.crm-appearance__label {
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--crm-text-muted);
    margin: 0 0 var(--crm-sp-1);
}
.crm-appearance__label:first-child{
    margin-top: 0;
}
.crm-appearance__label--skins { margin-top: var(--crm-sp-3); }
.crm-appearance__seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--crm-sp-1);
}
.crm-appearance__seg-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--crm-sp-2) 4px;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    color: var(--crm-text-secondary);
    font: inherit;
    cursor: pointer;
}
.crm-appearance__seg-opt:hover { border-color: var(--crm-border-strong); }
.crm-appearance__seg-opt--on {
    border-color: var(--crm-primary);
    background: var(--crm-primary-soft);
    color: var(--crm-primary-text);
}
.crm-appearance__seg-icon { font-size: 16px; line-height: 1; }
.crm-appearance__seg-name { font-size: var(--crm-text-xs); font-weight: var(--crm-weight-medium); }
.crm-appearance__list { display: flex; flex-direction: column; gap: var(--crm-sp-1); }
.crm-appearance__row {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    min-height: 30px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--crm-radius);
    background: transparent;
    color: var(--crm-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.crm-appearance__row:hover { background: var(--crm-surface-2); }
.crm-appearance__row--on {
    border-color: var(--crm-primary);
    background: var(--crm-primary-soft);
}
.crm-appearance__row--on::after {
    content: "✓";
    margin-left: auto;
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-bold);
    color: var(--crm-primary-text);
}
.crm-appearance__name { font-size: var(--crm-text-sm); font-weight: var(--crm-weight-medium); }
.crm-appearance__seg-opt:focus-visible,
.crm-appearance__row:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: -1px;
}
.crm-appearance__dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--crm-surface); }
.crm-appearance__label {
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--crm-text-muted);
    margin: var(--crm-sp-2) 0;
}
.crm-appearance__grid { grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr)); }
.crm-appearance__dots { display: inline-flex; flex: none; }
.crm-appearance__dot + .crm-appearance__dot { margin-left: -4px; }

/* ⚠ `position: relative` + a z-index makes this a STACKING CONTEXT, so every
   popover the sidebar owns — the Appearance panel at z-index 10000 — is
   TRAPPED inside it and competes with page content at the value below, not at
   its own. It must therefore outrank content layering, not merely beat plain
   paint order: z-index 1 lost to .crm-harmonogram__project (sticky, z-index 5,
   whose nearest stacking-context ancestor is the ROOT), which painted the
   project column over the open skin picker (Roman 2026-08-19).
   100 = chrome tier: above every content component (max 60 in components/*.css)
   and below the overlay tier — mobile backdrop 199, drawer 200, toast 9999,
   modals 100000+, tooltip 100100, lightbox 200000. Raising it is safe because
   the sidebar's box never overlaps content; only viewport-fixed elements share
   it, and all of those live in the overlay tier. */
.crm-layout__sidebar {

    width: var(--crm-menu-sidebar-w, 240px);
    flex-shrink: 0;
    background: var(--crm-bg);
    border-right: 1px solid var(--crm-border);
    transition: width 0.2s ease;
    position: relative;
    z-index: 100;
}


.crm-layout__sidebar--resizing { transition: none; }

.crm-layout__sidebar-resizer { display: none; }
@media (min-width: 769px) {
    .crm-layout__sidebar-resizer {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: -4px;
        width: 8px;
        cursor: col-resize;
        z-index: 5;
        user-select: none;
        touch-action: none;
        background: transparent;
    }
    .crm-layout__sidebar-resizer::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 3px;
        width: 2px;
        background: var(--crm-primary);
        opacity: 0;
        transition: opacity 0.15s ease;
    }
    .crm-layout__sidebar-resizer:hover::before,
    .crm-layout__sidebar--resizing .crm-layout__sidebar-resizer::before {
        opacity: 1;
    }
}

body.crm-menu-resizing,
body.crm-menu-resizing * { cursor: col-resize !important; user-select: none !important; }

body.crm-drag-panning,
body.crm-drag-panning * { cursor: grabbing !important; user-select: none !important; }
.crm-layout__sidebar-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    padding: var(--crm-sp-2) 0 0;
}
.crm-layout__logo {

    padding: 0 var(--crm-sp-4) var(--crm-sp-2);
    font-size: var(--crm-text-base);
    font-weight: var(--crm-weight-bold);
    color: var(--crm-text);
    letter-spacing: -0.02em;
}

/* The brand is an <a> to the dashboard. Declared on the block itself rather
   than on a new modifier: it is the same brand either way, and the theme's
   link colour + underline would otherwise repaint it. */
a.crm-layout__logo {
    display: block;
    text-decoration: none;
    color: var(--crm-text);
    transition: opacity var(--crm-ease);
}
a.crm-layout__logo:hover,
a.crm-layout__logo:focus-visible { opacity: 0.75; }
a.crm-layout__logo--with-name { display: flex; }

.crm-layout__logo--with-name {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
}
.crm-layout__logo--with-name .crm-layout__logo-img {

    max-height: 28px;
    flex-shrink: 0;
}
.crm-layout__logo-name {

    line-height: 1.2;
}
.crm-layout__logo-img {
    display: block;
    max-width: 100%;

    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}

body:not([data-crm-theme]) .crm-layout__logo-img--light { display: none; }
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-layout__logo-img--light { display: none; }
/* ⚠ no "mixed" here — the sidebar logo sits in a dark zone; body[mixed] must not hide the dark image */
:is([data-crm-theme="light"], [data-crm-zone="light"]) .crm-layout__logo-img--dark { display: none; }
.crm-layout__nav {
    flex: 1;
    padding: 0 var(--crm-sp-2);
}

.crm-layout__nav .crm-menu--vertical .crm-menu__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.crm-layout__nav .crm-menu__item {
    margin: 0;
}
.crm-layout__nav .crm-menu__link {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-radius: var(--crm-radius);
    color: var(--crm-text-secondary);
    text-decoration: none;
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
    transition: background var(--crm-ease), color var(--crm-ease);
}
.crm-layout__nav .crm-menu__link:hover {
    background: var(--crm-surface-2);
    color: var(--crm-text);
}

.crm-layout__nav .crm-menu__emoji {
    flex: 0 0 20px;
    width: 20px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
}

.crm-layout__nav .crm-menu__badge {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--crm-radius-full);

    background: var(--crm-success);
    color: var(--crm-text-on-success);
    font-family: var(--crm-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: var(--crm-weight-bold);
    line-height: 1.6;
    text-align: center;
}

:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-layout__nav .crm-menu__badge {
    background: color-mix(in srgb, var(--crm-success) 60%, var(--crm-bg));
}
.crm-layout__nav .crm-menu__item--active > .crm-menu__link,
.crm-layout__nav .crm-menu__item--active > .crm-menu__row > .crm-menu__link {
    background: var(--crm-primary-soft);
    color: var(--crm-primary-text);
    font-weight: var(--crm-weight-semibold);
}
.crm-layout__nav .crm-menu__item--toggle {
    padding: var(--crm-sp-2) var(--crm-sp-3);
}

.crm-layout__nav .crm-menu__item--parent {
    display: flex;
    flex-direction: column;
}
.crm-layout__nav .crm-menu__row {
    display: flex;
    align-items: stretch;
    gap: 2px;
}
.crm-layout__nav .crm-menu__row .crm-menu__link {
    flex: 1;
    min-width: 0;
}

.crm-layout__nav .crm-menu__link--external .crm-menu__external-glyph {
    margin-left: auto;
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);
    opacity: 0.75;
}
.crm-layout__nav .crm-menu__link--external:hover .crm-menu__external-glyph {
    opacity: 1;
}
.crm-layout__nav .crm-menu__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--crm-text-secondary);
    cursor: pointer;
    border-radius: var(--crm-radius);
    font-size: var(--crm-text-xs);
    line-height: 1;
    transition: background var(--crm-ease), color var(--crm-ease), transform var(--crm-ease);
}
.crm-layout__nav .crm-menu__chevron:hover {
    background: var(--crm-surface-2);
    color: var(--crm-text);
}
.crm-layout__nav .crm-menu__chevron.is-open {
    transform: rotate(90deg);
}

.crm-layout__nav .crm-menu__submenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 2px 0 var(--crm-sp-1) var(--crm-sp-3);
    padding: 0 0 0 var(--crm-sp-2);
    border-left: 1px solid var(--crm-border);
}
.crm-layout__nav .crm-menu__item--child .crm-menu__link {
    font-size: calc(var(--crm-text-sm) * 0.9);
    padding: calc(var(--crm-sp-2) * 0.75) var(--crm-sp-3);
}
.crm-layout__nav .crm-menu__item--child .crm-menu__link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

.crm-icon-pick {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
}
.crm-icon-pick__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    cursor: pointer;
    transition: border-color var(--crm-ease), background var(--crm-ease);
    flex-shrink: 0;
}
.crm-icon-pick__btn:hover {
    border-color: var(--crm-primary);
    background: var(--crm-surface-2);
}
.crm-icon-pick__btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: var(--crm-text);
}
.crm-icon-pick__placeholder {
    color: var(--crm-text-muted);
    font-size: var(--crm-text-sm);
}
.crm-icon-pick__name {
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);
}
.crm-icon-pick__clear {
    background: none;
    border: none;
    color: var(--crm-text-muted);
    cursor: pointer;
    font-size: var(--crm-text-lg);
    padding: 0 var(--crm-sp-1);
    line-height: 1;
}
.crm-icon-pick__clear:hover {
    color: var(--crm-danger);
}
.crm-icon-pick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 4px;
    max-height: 340px;
    overflow-y: auto;
    padding: var(--crm-sp-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
}
.crm-icon-pick__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: var(--crm-radius-sm);
    background: none;
    cursor: pointer;
    transition: background var(--crm-ease), border-color var(--crm-ease);
    padding: 0;
}
.crm-icon-pick__cell:hover {
    background: var(--crm-surface-2);
    border-color: var(--crm-border);
}
.crm-icon-pick__cell--active {
    background: var(--crm-primary-soft);
    border-color: var(--crm-primary);
}
.crm-icon-pick__cell--none {
    color: var(--crm-text-muted);
    font-size: var(--crm-text-lg);
    font-weight: bold;
}
.crm-icon-pick__cell .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: var(--crm-text);
}

.crm-emoji-pick__group + .crm-emoji-pick__group { margin-top: var(--crm-sp-3); }
.crm-emoji-pick__group-title {
    margin: 0 0 var(--crm-sp-1);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold, 600);
    color: var(--crm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.crm-emoji-pick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 4px;
}
.crm-emoji-pick__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.35rem;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--crm-radius-sm);
    background: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--crm-ease), border-color var(--crm-ease);
}
.crm-emoji-pick__cell:hover {
    background: var(--crm-surface-2);
    border-color: var(--crm-border);
}
.crm-emoji-pick__cell--active {
    background: var(--crm-primary-soft);
    border-color: var(--crm-primary);
}

.crm-layout__sidebar-timer {
    padding: var(--crm-sp-2) var(--crm-sp-2);
    margin-top: auto;
}

.crm-layout__user {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-3) var(--crm-sp-4);
    border-top: 1px solid var(--crm-border);
    text-decoration: none;
}

.crm-layout__username {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
    color: var(--crm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-layout__version {
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-normal);
    color: var(--crm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: auto
}

.crm-layout__user-menu {
    position: relative;
    border-top: 1px solid var(--crm-border);
}
button.crm-layout__user {
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.crm-layout__user-menu button.crm-layout__user {

    border-top: 0;
    height: 54px;
}

button.crm-layout__user:hover {
    background: var(--crm-surface-1);
}
button.crm-layout__user:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: -2px;
}

.crm-layout__user-menu--open button.crm-layout__user {
    background: var(--crm-surface-2, var(--crm-surface-1));
}

.crm-layout__user-kebab {
    margin-left: auto;
    font-size: var(--crm-text-base);
    color: var(--crm-text-muted);
    opacity: 0.6;
    transition: opacity .15s ease, color .15s ease;
    position: relative;
    top: 0px;
}
button.crm-layout__user:hover .crm-layout__user-kebab,
.crm-layout__user-menu--open .crm-layout__user-kebab {
    opacity: 1;
    color: var(--crm-text);
}

.crm-layout__user-popover {
    position: absolute;
    bottom: 100%;
    left: var(--crm-sp-2);
    right: var(--crm-sp-2);
    margin-bottom: var(--crm-sp-1);
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-lg);
    padding: var(--crm-sp-1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.crm-layout__user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-radius: var(--crm-radius-sm);
    color: var(--crm-text);
    text-decoration: none;
    font-size: var(--crm-text-sm);
}
.crm-layout__user-menu-item:hover {
    background: var(--crm-surface-1);
    color: var(--crm-text);
    text-decoration: none;
}
.crm-layout__user-menu-item--danger {
    color: var(--crm-danger);
}
.crm-layout__user-menu-item--danger:hover {
    background: var(--crm-danger-soft);
    color: var(--crm-danger);
}
.crm-layout__user-menu-icon {
    font-size: var(--crm-text-base);
    width: 1.25em;
    text-align: center;
    flex-shrink: 0;
}

.crm-layout__user-sep {
    height: 1px;
    background: var(--crm-border);
    margin: var(--crm-sp-1) var(--crm-sp-2);
}
.crm-layout__user-scope-label {
    margin: 0;
    padding: var(--crm-sp-1) var(--crm-sp-3) 0;
    font-size: var(--crm-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--crm-text-muted);
}
button.crm-layout__user-scope-opt {
    width: 100%;
    appearance: none;
    border: 0;
    background: none;
    font-family: var(--crm-font);
    text-align: left;
    cursor: pointer;
}
button.crm-layout__user-scope-opt:disabled { cursor: progress; opacity: .7; }
.crm-layout__user-scope-opt--on { color: var(--crm-primary); }
.crm-layout__user-scope-mark { margin-left: auto; font-size: var(--crm-text-sm); }
.crm-layout__user-scope-error {
    margin: 0;
    padding: var(--crm-sp-1) var(--crm-sp-3);
    font-size: var(--crm-text-xs);
    color: var(--crm-danger);
}

.crm-layout__user-menu--topbar {
    border-top: 0;
    flex: 0 0 auto;

    border-radius: var(--crm-radius-full);
}

.crm-layout__user-menu--topbar:hover,
.crm-layout__user-menu--topbar.crm-layout__user-menu--open {
    outline: 1px solid var(--crm-border-strong, var(--crm-border));
    outline-offset: -1px;
}
.crm-layout__user-menu--topbar button.crm-layout__user {
    width: auto;
    height: auto;
    gap: var(--crm-sp-2);

    padding: var(--crm-sp-1) var(--crm-sp-2) var(--crm-sp-1) var(--crm-sp-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-full);
    background: var(--crm-surface);
}
.crm-layout__user-menu--topbar button.crm-layout__user:hover {
    background: var(--crm-surface-2);
}
.crm-layout__user-menu--topbar .crm-layout__username {
    max-width: 160px;
}
.crm-layout__user-menu--topbar .crm-layout__user-popover {
    top: calc(100% + var(--crm-sp-1));
    bottom: auto;
    left: auto;
    right: 0;
    margin: 0;
    min-width: 220px;
}
@media (max-width: 768px) {
    .crm-layout__user-menu--topbar .crm-layout__username,
    .crm-layout__user-menu--topbar .crm-layout__user-kebab {
        display: none;
    }
    .crm-layout__user-menu--topbar button.crm-layout__user {
        padding: var(--crm-sp-1);
    }
}

.crm-layout__sidebar-search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: var(--crm-sp-1) var(--crm-sp-3) var(--crm-sp-1);
    padding: 6px 10px;
    background: var(--crm-surface-2);
    border: 0;

    border-radius: var(--crm-radius-lg);
    color: var(--crm-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--crm-text-sm);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.crm-layout__sidebar-search:hover {
    background: var(--crm-surface-3);
}
.crm-layout__sidebar-search:focus-visible {
    outline: none;
    background: var(--crm-surface-3);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--crm-primary) 30%, transparent);
}
.crm-layout__sidebar-search-icon {
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
    opacity: 0.6;
}
.crm-layout__sidebar-search-text {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-layout__sidebar-search-kbd {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
.crm-layout__sidebar-search-kbd kbd {
    font-size: 10px;
    line-height: 1.4;
    padding: 1px 4px;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface);
    color: var(--crm-text-secondary);
    font-family: var(--crm-font);
}

.crm-layout__sidebar-version {
    border-top: 1px solid var(--crm-border);
    padding: var(--crm-sp-2) var(--crm-sp-4);
    display: flex;
    align-items: center;
}
.crm-layout__sidebar-version .crm-layout__version {
    margin-left: 0;
}

.crm-layout__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.crm-layout__topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-1) var(--crm-sp-4);
    background: var(--crm-surface-2);
    border-bottom: 1px solid var(--crm-border-strong);
    backdrop-filter: blur(18px);
}
@media (max-width: 769px) {
    .crm-layout__topbar {
        padding: var(--crm-sp-2) var(--crm-sp-3);
    }
}
.crm-layout__topbar .crm-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-sp-4);
    width: 100%;
    max-width: none;
}
.crm-layout__title {
    margin: 0;
    font-size: var(--crm-text-lg);
    font-weight: var(--crm-weight-bold);
    color: var(--crm-text);
}
@media (min-width: 769px) {
    .crm-layout__title { flex: 1; min-width: 0; }
}

.crm-layout__content {
    padding: var(--crm-sp-5);
    flex: 1;
}
.crm-layout__content--full {
    max-width: none;
}
.crm-layout__content:has(.crm-split) {
    padding-bottom: 0;
}
.crm-container{
    max-width: 1230px;
    margin: 0 auto;
}

.crm-header-create {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.crm-header-create .crm-action-menu__trigger.crm-btn {
    min-height: 32px;
    line-height: 1;
    border-radius: var(--crm-radius-full);
}
@media (max-width: 768px) {

    .crm-header-create .crm-action-menu__trigger-text {
        display: none;
    }

    .crm-header-create .crm-action-menu__trigger.crm-btn {
        min-height: 36px;
        min-width: 36px;
        padding: 0;
    }
}

.crm-layout__topbar-icons {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    flex: 1;
    justify-content: flex-end;
}
.crm-layout__topbar-icons .crm-notify {
    position: relative;
    flex: 0 0 auto;
}
@media (max-width: 768px) {

    .crm-layout__topbar .crm-container { gap: var(--crm-sp-2); }
}
@media (max-width: 500px) {
    /* Narrow phones: topbar shows only title/tabs + hamburger + user pill.
       Add / KB help / notifications are reachable elsewhere (sidebar / drawer). */
    .crm-header-create,
    .crm-kb-help-icon,
    .crm-layout__topbar-icons { display: none !important; }
}
.crm-layout__topbar .crm-notify__bell {
    background: none;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: var(--crm-sp-1) var(--crm-sp-2);
    cursor: pointer;
    color: var(--crm-text-muted);
    transition: background var(--crm-ease);
}
.crm-layout__topbar .crm-notify__bell:hover {
    background: var(--crm-surface-2);
    color: var(--crm-text);
}
.crm-notify__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--crm-danger);
    color: var(--crm-text-on-danger);
    font-size: 10px;
    font-weight: var(--crm-weight-bold);
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: var(--crm-radius-full);
    padding: 0 4px;
}
.crm-notify__drawer {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-lg);
    z-index: 100;
    margin-top: var(--crm-sp-1);
    overflow: hidden;
}
.crm-notify__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.crm-notify__item {
    display: flex;
    align-items: flex-start;
    gap: var(--crm-sp-3);
    padding: var(--crm-sp-3);
    border-bottom: 1px solid var(--crm-border);
    cursor: pointer;
    transition: background var(--crm-ease);
    text-decoration: none;
    color: inherit;
}
.crm-notify__item:hover {
    background: var(--crm-surface-1);
    text-decoration: none;
    color: inherit;
}
.crm-notify__item--unread {
    background: var(--crm-primary-soft);
}
.crm-notify__item--unread:hover {
    background: var(--crm-surface-2);
}
.crm-notify__icon {
    flex-shrink: 0;
    width: 1.5em;
    text-align: center;
    font-size: var(--crm-text-base);
    line-height: 1.2;
}
.crm-notify__body {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-1);
    min-width: 0;
    flex: 1;
}
.crm-notify__actor {
    display: block;
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    color: var(--crm-text-muted);
}
.crm-notify__message {
    display: block;
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
    word-wrap: break-word;
}
.crm-notify__time {
    display: block;
    font-size: var(--crm-text-xs);
    color: var(--crm-text-faint);
}
.crm-notify__empty {
    padding: var(--crm-sp-4);
    text-align: center;
    color: var(--crm-text-faint);
    font-style: italic;
}
.crm-notify__mark-all {
    display: block;
    width: 100%;
    padding: var(--crm-sp-2);
    border: none;
    border-top: 1px solid var(--crm-border);
    background: var(--crm-surface-1);
    color: var(--crm-primary);
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-semibold);
    cursor: pointer;
    text-align: center;
    transition: background var(--crm-ease);
    flex-shrink: 0;
}
.crm-notify__mark-all:hover {
    background: var(--crm-surface-2);
}

.crm-notify__mark-all--animating {
    overflow: hidden;
    transition: opacity .24s ease,
                max-height .3s cubic-bezier(.4, 0, .2, 1),
                padding-top .3s cubic-bezier(.4, 0, .2, 1),
                padding-bottom .3s cubic-bezier(.4, 0, .2, 1),
                border-top-color .24s ease,
                transform .3s cubic-bezier(.4, 0, .2, 1);
}
.crm-notify__mark-all--expanded {
    opacity: 1;
    max-height: 3rem;
    transform: translateY(0);
}
.crm-notify__mark-all--collapsed {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
    transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
    .crm-notify__mark-all--animating { transition: opacity .12s ease; }
    .crm-notify__mark-all--collapsed { transform: none; }
}

.crm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-4);
    background: var(--crm-surface-2);
    color: var(--crm-text);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    font-family: var(--crm-font);
    font-size: var(--crm-text-base);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    cursor: pointer;
    transition: background var(--crm-ease), border-color var(--crm-ease), box-shadow var(--crm-ease), color var(--crm-ease);
    white-space: nowrap;
    text-decoration: none!important;
}
.crm-btn:hover:not(:disabled) {
    background: var(--crm-surface-3);
}
.crm-btn:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}
.crm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-btn--primary {
    background: var(--crm-primary);
    color: var(--crm-text-on-primary);
    border-color: transparent;
}
.crm-btn--primary:hover:not(:disabled) {
    background: var(--crm-primary-hover);
}

.crm-btn--danger {
    background: var(--crm-danger);
    color: var(--crm-text-on-danger);
    border-color: transparent;
}
.crm-btn--danger:hover:not(:disabled) {
    background: var(--crm-danger-hover);
}

/* Success fill — first consumer: the topbar ＋ Create button (2026-08-09).
   ⚠️ NOT `background: var(--crm-success)` — the sidebar nav badge comment
   above already worked this out and it applies verbatim here: raw
   `--crm-success` (#16a34a) under white text is 3.4:1, under AA for normal
   text. `--crm-success-text` is the deep variant of the same hue (7.0:1 with
   white) — same idiom as `.crm-menu__badge`, reused rather than re-derived.
   Dark theme darkens `--crm-success` against the page ground instead (its
   `--crm-success-text` is a pale mint that fails white-on-top even harder). */
.crm-btn--success {
    background: var(--crm-success);
    color: var(--crm-text-on-success);
    border-color: transparent;
}
.crm-btn--success:hover:not(:disabled) {
    background: color-mix(in srgb, var(--crm-success) 82%, black);
}
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-btn--success {
    background: color-mix(in srgb, var(--crm-success) 60%, var(--crm-bg));
}
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-btn--success:hover:not(:disabled) {
    background: color-mix(in srgb, var(--crm-success) 80%, var(--crm-bg));
}

.crm-btn--secondary {
    background: var(--crm-surface-2);
    color: var(--crm-text);
    border-color: var(--crm-border);
}
.crm-btn--secondary:hover:not(:disabled) {
    background: var(--crm-surface-3);
}

.crm-btn--ghost {
    background: transparent;
    color: var(--crm-text-muted);
}
.crm-btn--ghost:hover:not(:disabled) {
    background: var(--crm-surface-2);
    color: var(--crm-text);
}

/* Page-ground fill — idle "+ Add …" controls that sit on surface-1 strips. */
.crm-btn--bg {
    background: var(--crm-bg);
    color: var(--crm-text-muted);
}
.crm-btn--bg:hover:not(:disabled) {
    background: var(--crm-surface-2);
    color: var(--crm-text);
}

.crm-btn--ghost.crm-btn--danger {
    background: transparent;
    color: var(--crm-danger);
    border-color: transparent;
}
.crm-btn--ghost.crm-btn--danger:hover:not(:disabled) {
    background: var(--crm-danger-soft, rgba(220, 38, 38, 0.08));
    color: var(--crm-danger);
}

.crm-btn--small,
.crm-btn--sm {
    padding: var(--crm-sp-1) var(--crm-sp-3);
    font-size: var(--crm-text-sm);
    line-height: var(--crm-leading-tight);
}

.crm-btn--icon {
    padding: var(--crm-sp-1);
    min-width: 32px;
    min-height: 32px;
}

.crm-btn--block {
    width: 100%;
}

.crm-input,
.crm-select,
.crm-textarea {
    width: 100%;
    padding: var(--crm-sp-2) var(--crm-sp-3);
    font-family: var(--crm-font);
    font-size: var(--crm-text-base);
    line-height: var(--crm-leading-normal);
    color: var(--crm-text);
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    transition: border-color var(--crm-ease), box-shadow var(--crm-ease);
    box-sizing: border-box;
}
.crm-input:focus,
.crm-select:focus,
.crm-textarea:focus {
    outline: none;
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px var(--crm-ring);
}

.crm-textarea--code {
    font-family: var(--crm-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--crm-text-sm);
}
.crm-input::placeholder {
    color: var(--crm-text-faint);
}
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-input[type="time"]::-webkit-calendar-picker-indicator,
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-input[type="date"]::-webkit-calendar-picker-indicator,
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
.crm-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.crm-password-field {
    position: relative;
}
.crm-password-field__input {

    padding-right: 40px;
}
.crm-password-field__toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--crm-radius-full);
    background: transparent;
    color: var(--crm-text-muted);
    cursor: pointer;
}
.crm-password-field__toggle:hover {
    background: var(--crm-surface-2);
    color: var(--crm-text);
}

.crm-password-field__toggle .dashicons {
    font-family: dashicons;
    font-size: 18px;
    line-height: 1;
}

.crm-field {
    margin-bottom: var(--crm-sp-3);
}
.crm-field > label,
.crm-label {
    display: block;
    font-weight: var(--crm-weight-semibold);
    font-size: var(--crm-text-sm);
    color: var(--crm-text-secondary);
    margin-bottom: var(--crm-sp-1);
}

.crm-field__error {
    margin: var(--crm-sp-1) 0 0;
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
    color: var(--crm-danger);
}

/* crm-signin — P5 U2's CRM-owned sign-in / forgot / reset plate ([crm_login]).

   ⚠ NOT `.crm-login`, which is already taken: crm-login.css skins WordPress's
   OWN login page and is scoped to `body.login`. Two different surfaces run side
   by side through the P5 dual-run, so they must not share a block name — a
   reader seeing `.crm-login__title` would reasonably expect it on /login108/.

   ⚠ Every colour is a var(--crm-*), so light + dark and all nine skins follow
   with no per-mode rule here. */
/* The page behind the plate follows the mode too — otherwise a dark plate floats on the theme's
   hardcoded white --pub-bg, which knows nothing about crm_theme.
   ⚠ Keyed on the class the head stamp puts on <html>, NOT on a body class: the theme's public-page
   template writes its <body class> as a literal and never calls body_class(), so a body_class filter
   is never run on the one template this plate may live on.
   ⚠ The descendant selector is also what wins the cascade — (0,1,2) beats the theme's
   `body.iwt-public` (0,1,1) on specificity rather than on stylesheet order. */
html.crm-signin-page body {
    background: var(--crm-bg-alt);
    color: var(--crm-text);
}

.crm-signin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* ⚠ The min() is the gutter. This plate renders inside whatever container the host page gives
       it — often one with no padding at all — so a bare max-width lets it touch both screen edges
       at any viewport just under the cap, not only on phones. */
    max-width: min(860px, calc(100% - var(--crm-sp-8)));
    margin: var(--crm-sp-8) auto;
    background: var(--crm-surface);
    /* ⚠ The plate must declare its OWN text colour and never inherit one. It renders inside an
       arbitrary host template — on naukazku that is the theme's public page, which sets a hardcoded
       slate that is not theme-aware — so inherited text lands on top of a theme-aware background.
       Measured live in dark mode: colour and background were BOTH rgb(30,41,59) and "Keep me signed
       in" was invisible, while light mode looked perfect. Every child inherits from here; the panel
       overrides with its own. */
    color: var(--crm-text);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-lg);
    overflow: hidden;
}

/* ⚠ Gap-driven, and every child below zeroes its own margin — a stray margin here collapses
   against the gap and the three states stop agreeing on their vertical rhythm. */
.crm-signin__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--crm-sp-4);
    padding: var(--crm-sp-6) var(--crm-sp-5);
}

.crm-signin__title {
    margin: 0;
    font-size: var(--crm-text-xl);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    color: var(--crm-text);
    letter-spacing: -0.02em;
}

.crm-signin__lede {
    margin: 0;
    font-size: var(--crm-text-sm);
    line-height: var(--crm-leading-normal);
    color: var(--crm-text-muted);
}

.crm-signin__form {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-3);
    margin: 0;
}

.crm-signin__remember {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    cursor: pointer;
}

.crm-signin__hint {
    margin: var(--crm-sp-1) 0 0;
    font-size: var(--crm-text-sm);
    color: var(--crm-text-secondary);
}

.crm-signin__alt {
    margin: 0;
    font-size: var(--crm-text-sm);
    text-align: center;
}

/* ⚠ The STATE is carried by the tint and the edge, the TEXT stays --crm-text. Colouring the words
   themselves is what fails here: --crm-danger on --crm-danger-soft measures 3.95:1 in light mode,
   under AA for body text, and this is the sentence telling somebody why they could not get in.
   Measured across light/dark/mixed — never re-tint the text without re-measuring all three. */
.crm-signin__notice {
    margin: 0;
    padding: var(--crm-sp-3);
    border-left: 3px solid transparent;
    border-radius: var(--crm-radius);
    color: var(--crm-text);
    font-size: var(--crm-text-sm);
    line-height: var(--crm-leading-normal);
}

.crm-signin__notice--error {
    border-left-color: var(--crm-danger);
    background: var(--crm-danger-soft);
}

.crm-signin__notice--ok {
    border-left-color: var(--crm-success);
    background: var(--crm-success-soft);
}

/* ⚠ 16px floor: iOS Safari zooms the viewport on focus below it, and this is the one page a locked-out person reaches on a phone. */
.crm-signin .crm-input {
    width: 100%;
    box-sizing: border-box;
    font-size: max(16px, var(--crm-text-base));
}

.crm-signin .crm-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    margin-top: var(--crm-sp-2);
    font-size: max(15px, var(--crm-text-base));
}

/* ⚠ Set by crm-signin.js on first submit; without the cursor change a slow bcrypt reads as a dead button and invites a second click. */
.crm-signin .crm-btn[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

.crm-signin__panel {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-5);
    padding: var(--crm-sp-6) var(--crm-sp-5);
    /* ⚠ The RECESSED surface, not --crm-bg: in light mode --crm-bg and the plate's --crm-surface are
       both #ffffff, so the panel would vanish into the form. --crm-bg-alt stays distinct in all three
       modes, and darkens on its own inside the mixed-mode chrome zone. */
    background: var(--crm-bg-alt);
    color: var(--crm-text);
}

/* ⚠ The font-size lives HERE, not on __brandname, because the logo is sized in `em` against it —
   that is what keeps the mark on the text's own line instead of growing the row. Move the
   declaration down to the name and the logo silently sizes against --crm-text-base instead. */
.crm-signin__brand {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    min-width: 0;
    font-size: var(--crm-text-xl);
    line-height: var(--crm-leading-tight);
}

/* ⚠ `height` is capped at exactly one line box (1.25em = --crm-leading-tight), so ANY uploaded
   logo — tall, square or wordmark — sits inline with the name and cannot extend the line.
   object-fit guards the aspect ratio when max-width bites on a very wide mark. */
.crm-signin__logo {
    flex: none;
    width: auto;
    height: 1.25em;
    max-width: 45%;
    object-fit: contain;
    object-position: left center;
}

/* ⚠ Logo with no name beside it (brand_show_name_with_logo off): the mark IS the brand here, so it
   is released from the inline cap and given real presence. `:only-child` reads the PHP's own
   branching — do not replace it with a modifier class without moving that decision too. */
.crm-signin__logo:only-child {
    height: auto;
    max-height: 44px;
    max-width: 100%;
}

.crm-signin__brandname {
    font-family: var(--crm-font-display);
    font-weight: var(--crm-weight-semibold);
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

/* ⚠ `margin-top: auto` is the composition: brand pins to the top, rail + tagline settle together at
   the foot as one captioned block. Without it the three children spread and the rail floats. */
.crm-signin__rail {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-2);
    margin-top: auto;
}

.crm-signin__bar {
    height: 6px;
    border-radius: var(--crm-radius-full);
    opacity: 0.45;
    transform-origin: left center;
    animation: crm-signin-draw 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.crm-signin__bar:nth-child(1) { margin-left: 0;   width: 40%; animation-delay: 60ms; }
.crm-signin__bar:nth-child(2) { margin-left: 10%; width: 34%; animation-delay: 150ms; }
.crm-signin__bar:nth-child(3) { margin-left: 22%; width: 46%; animation-delay: 240ms; }
.crm-signin__bar:nth-child(4) { margin-left: 38%; width: 30%; animation-delay: 330ms; }
.crm-signin__bar:nth-child(5) { margin-left: 52%; width: 44%; animation-delay: 420ms; }

.crm-signin__bar--idea          { background: var(--crm-status-idea); }
.crm-signin__bar--not-started   { background: var(--crm-status-not-started); }
.crm-signin__bar--in-progress   { background: var(--crm-status-in-progress); }
.crm-signin__bar--client-review { background: var(--crm-status-client-review); }
.crm-signin__bar--done          { background: var(--crm-status-done); opacity: 1; }

@keyframes crm-signin-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.crm-signin__tagline {
    margin: 0;
    font-family: var(--crm-font-display);
    font-size: var(--crm-text-lg);
    font-weight: var(--crm-weight-normal);
    line-height: var(--crm-leading-normal);
    color: var(--crm-text-secondary);
    text-wrap: balance;
}

/* ⚠ The plate styles its own links and must keep doing so. It renders for a LOGGED-OUT visitor on
   whatever template the site gives it, so it cannot inherit a link colour from the CRM chrome —
   left to the UA default this is #0000EE on a near-black panel in dark mode, which is how the one
   escape hatch on a login page becomes invisible to the people who need it. */
.crm-signin a {
    color: var(--crm-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.crm-signin a:hover {
    color: var(--crm-primary-hover);
}

.crm-signin a:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
    border-radius: var(--crm-radius-sm);
}


/* ⚠ Stacked below 720px, and the rail turns into a horizontal spine rather than hiding: these
   nth-child rules match the vertical ones' specificity and win on source order, so no !important. */
@media (max-width: 720px) {
    .crm-signin {
        grid-template-columns: 1fr;
        max-width: min(460px, calc(100% - var(--crm-sp-5)));
        margin: var(--crm-sp-4) auto;
    }

    .crm-signin__panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--crm-sp-4);
        padding: var(--crm-sp-4) var(--crm-sp-5);
    }

    .crm-signin__rail {
        flex-direction: row;
        gap: 3px;
        width: 84px;
        flex: none;
        margin-top: 0;
    }

    .crm-signin__bar:nth-child(1),
    .crm-signin__bar:nth-child(2),
    .crm-signin__bar:nth-child(3),
    .crm-signin__bar:nth-child(4),
    .crm-signin__bar:nth-child(5) {
        margin-left: 0;
        width: auto;
        flex: 1;
        height: 4px;
    }

    .crm-signin__tagline {
        display: none;
    }

    .crm-signin__main {
        padding: var(--crm-sp-5) var(--crm-sp-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-signin__bar {
        animation: none;
    }
}

/* Modal-host wrappers carry the Alpine factory, never a box. Emitted from
   almost every work-item surface (Modal\PlannedEventModalHost alone is on My
   tasks, Inbox, views and project detail), so the rule is a primitive — it
   lived in crm-board.css until asset scoping made that file page-specific. */
.crm-card-modal-host,
.crm-card-task-modal-host,
.crm-planned-event-modal-host { display: contents; }

/* Quiet helper line under a control. Lived in crm-teams.css until asset
   scoping made that file page-specific; the emitters are BillingPartiesPanel,
   BoardsShortcode, ClientDetailShortcode and ProjectsShortcode, so its home
   is the primitive layer. */
.crm-form-hint {
    margin: var(--crm-sp-1) 0 0;
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    line-height: 1.35;
}

/* Conditional visibility — crm-field-conditions.js + FieldForm `visible_if`. */
/* ⚠ !important is load-bearing: the [hidden] UA rule loses to every author
   `display` (.crm-settings-form__fieldset is flex, a <tr> is table-row), and
   component files load after this one. */
.crm-conditional--hidden {
    display: none !important;
}

.crm-conditional--reveal {
    animation: crm-conditional-in .24s ease-out both;
}

@keyframes crm-conditional-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .crm-conditional--reveal { animation: none; }
}

.crm-checkbox,
label.crm-checkbox,
.crm-field > label.crm-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-2);
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-regular);
    margin-bottom: 0;
    cursor: pointer;
    color: var(--crm-text-secondary);
}
input[type="checkbox"].crm-checkbox,
.crm-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    border: 2px solid var(--crm-border-strong);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-bg);
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    transition: background var(--crm-ease), border-color var(--crm-ease);
    margin: -3px 0 0;
    z-index: 2;
}
input[type="checkbox"].crm-checkbox:checked,
.crm-checkbox input[type="checkbox"]:checked {
    background: var(--crm-primary);
    border-color: var(--crm-primary);
}
input[type="checkbox"].crm-checkbox:checked::after,
.crm-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    border: 2px solid var(--crm-text-on-primary);
    border-top: none;
    border-left: none;
    transform: translate(-50%, -60%) rotate(45deg);
}
input[type="checkbox"].crm-checkbox:focus-visible,
.crm-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}

.crm-radio-group {
    display: flex;
    gap: var(--crm-sp-4);
}
.crm-radio-group label {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-1);
    font-size: var(--crm-text-sm);
    cursor: pointer;
    color: var(--crm-text-secondary);
}
.crm-radio-group input[type="radio"] {
    accent-color: var(--crm-primary);
}

.crm-toggle-chip {
    padding: 4px 10px;
    border-radius: var(--crm-radius-full);
    border: 1px solid var(--crm-border);
    background: var(--crm-surface);
    color: var(--crm-text-secondary);
    font-size: var(--crm-text-sm);
    cursor: pointer;
    transition: background var(--crm-ease), border-color var(--crm-ease);

    text-decoration: none;
}
.crm-toggle-chip:hover:not(:disabled) {
    border-color: var(--crm-primary);
    text-decoration: none;
}

.crm-toggle-chip:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 1px;
}
.crm-toggle-chip:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.crm-toggle-chip--on {
    border-color: var(--crm-primary);
    background: var(--crm-primary-soft);
    color: var(--crm-primary-text);
    font-weight: 600;
}

.crm-toggle-chip--sm {
    padding: 2px 8px;
    font-size: var(--crm-text-xs);
}

.crm-toggle-chip__glyph { margin-right: 4px; }

.crm-toggle-chip__x {
    margin-left: 5px;
    font-size: .85em;
    opacity: .55;

    vertical-align: baseline;
}
.crm-toggle-chip:hover .crm-toggle-chip__x,
.crm-toggle-chip:focus-visible .crm-toggle-chip__x { opacity: 1; }

.crm-toggle-chip__x[x-cloak] { display: none !important; }

.crm-toggle-chip[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}
.crm-toggle-chip[aria-disabled="true"]:hover { border-color: var(--crm-border); }

/* ── .crm-chipset — a SET of .crm-toggle-chip pills as one control ────────
   The pills themselves are unchanged; what this adds is the set-level
   contract a lone chip cannot carry: one `role="group"` with a name, and a
   place to say why some members are unavailable.

   ⚠️ That note is the reason this exists rather than a bare flex row. The
   builder's source picker used to be a tile grid, and each greyed tile
   carried its own § 10.6 rejection sentence inline. A pill has no room for
   one, and putting it in a `title` would hide it from every touch device —
   so the reasons surface together, under the row, where they stay readable.
   Dropping a visible explanation to gain a tighter control is not a trade
   this design system makes.

   Markup: <div class="crm-chipset" role="group" aria-label="…">
             <div class="crm-chipset__chips"> …pills… </div>
             <p class="crm-chipset__note">…</p>   (only when something is off)
           </div>
   ------------------------------------------------------------------ */
.crm-chipset { display: flex; flex-direction: column; gap: var(--crm-sp-1); }
.crm-chipset__chips { display: flex; flex-wrap: wrap; gap: var(--crm-sp-1); align-items: center; }
.crm-chipset__note {
    margin: 0;
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
}

.crm-chipset--inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
.crm-chipset--inline .crm-chipset__note { flex-basis: 100%; }

.crm-switch {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-2);
    flex-shrink: 0;
    vertical-align: middle;
    font-family: var(--crm-font);
    font-size: var(--crm-text-sm);
    line-height: 1;
    color: var(--crm-text);
}

.crm-switch::before {
    content: '';
    display: block;
    width: 40px;
    height: 22px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-text-muted);
    transition: background var(--crm-ease);
    flex-shrink: 0;
}

.crm-switch::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow-sm);
    transition: transform var(--crm-ease);
    pointer-events: none;
}
.crm-switch--on::before {
    background: var(--crm-primary);
}
.crm-switch--on::after {
    transform: translateX(18px);
}

.crm-switch--danger.crm-switch--on::before {
    background: var(--crm-danger);
}

.crm-switch--success.crm-switch--on::before {
    background: var(--crm-success);
}

/* ⚠ Checkbox-driven variant — a switch on a plain form must POST, and the
   button-based one posts nothing. State comes from :has() only, never a
   server-written --on, or unticking would leave the track lit.
   ⚠ The `.crm-field > label` selector below is load-bearing, exactly as it is
   for .crm-checkbox: it is (0,1,1) and sets display:block, so without it the
   track and its label stack and overlap inside a form row. */
.crm-switch--input,
label.crm-switch--input,
.crm-field > label.crm-switch--input {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-2);
    cursor: pointer;
    margin-bottom: 0;
    font-weight: var(--crm-weight-medium);
    font-size: var(--crm-text-sm);
}
.crm-switch--input input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.crm-switch--input:has(input:checked)::before { background: var(--crm-primary); }
.crm-switch--input:has(input:checked)::after { transform: translateX(18px); }
.crm-switch--input:has(input:focus-visible) {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
    border-radius: var(--crm-radius-sm);
}
.crm-switch--input:has(input:disabled) { opacity: .55; cursor: not-allowed; }

.crm-switch--sm::before {
    width: 32px;
    height: 18px;
}
.crm-switch--sm::after {
    width: 14px;
    height: 14px;
    margin-top: -7px;
}
.crm-switch--sm.crm-switch--on::after {
    transform: translateX(14px);
}
.crm-switch__label {
    white-space: nowrap;
    user-select: none;
    color: var(--crm-text);
}
.crm-switch:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
    border-radius: var(--crm-radius-sm);
}
.crm-switch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .crm-switch::before,
    .crm-switch::after {
        transition: none;
    }
}

.crm-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-1);
    padding: 2px var(--crm-sp-2);
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    white-space: nowrap;
    border: none;
}

.crm-badge--idea              { color: var(--crm-status-idea); background: var(--crm-status-idea-bg); }
.crm-badge--not_started       { color: var(--crm-status-not-started); background: var(--crm-status-not-started-bg); }
.crm-badge--in_progress       { color: var(--crm-status-in-progress); background: var(--crm-status-in-progress-bg); }
.crm-badge--client_review     { color: var(--crm-status-client-review); background: var(--crm-status-client-review-bg); }
.crm-badge--done              { color: var(--crm-status-done); background: var(--crm-status-done-bg); }

.crm-badge--low               { color: var(--crm-priority-low); background: var(--crm-priority-low-bg); }
.crm-badge--medium            { color: var(--crm-priority-medium); background: var(--crm-priority-medium-bg); }
.crm-badge--high              { color: var(--crm-priority-high); background: var(--crm-priority-high-bg); }

.crm-badge--clickable { cursor: pointer; transition: opacity var(--crm-ease); user-select: none; }
.crm-badge--clickable:hover { opacity: 0.75; }

.crm-badge--off { opacity: 0.3; }

.crm-dep-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px var(--crm-sp-1);
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.crm-dep-chip--blocked {
    color: var(--crm-warning-text);
    background: var(--crm-warning-soft);
}

.crm-mgmt-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px var(--crm-sp-1);
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.crm-mgmt-chip--on {
    color: var(--crm-info-text);
    background: var(--crm-info-soft);
}

.crm-recur-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px var(--crm-sp-1);
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.crm-recur-chip--on {
    color: var(--crm-text-muted);
    background: var(--crm-surface-2);
}

/* ── .crm-due-tone — THE colour of a deadline (Roman, 2026-07-31) ─────
   A tone utility, not a component: it carries colour and nothing else, so
   it can be dropped on whatever element actually prints the date — a
   table cell, a chip, or a whole sentence in a feed row.

   The rule is the task table's rule and only that rule, expressed once:
     --past  overdue (yesterday or earlier)  → red
     --soon  due today or tomorrow           → green
     --done  finished; the deadline is history, however late → muted
   Anything further out gets NO class, because a date that is merely in
   the future is not a signal and colouring it would spend red on noise.

   Tones come from FormatHelper::dueToneClass(); the wording that usually
   sits inside is FormatHelper::dueLabel(). `.crm-pd-col-date--*`
   (crm-projects.css) and `.crm-picker__label--due-*` (crm-picker.css)
   predate this and say the same thing in their own vocabulary —
   converging them onto it is the intended follow-up.

   ── RETUNING THE COLOURS (Roman, 2026-07-31) ─────────────────────────
   The three tones are knobs: `--crm-due-past`, `--crm-due-soon`,
   `--crm-due-done`. Declare any of them ONCE — in the token block, on
   `body`, or per theme — and every date in the product moves with it:

       body[data-crm-theme] { --crm-due-past: #b91c1c; }

   They are deliberately left UNDECLARED by default, with the semantic
   token as an inline `var()` fallback. That is not laziness, it is the
   only form that stays theme-correct: a custom property is substituted at
   computed-value time on the element that DECLARES it, so
   `:root { --crm-due-past: var(--crm-danger) }` would bake in the LIGHT
   red and keep it in dark mode. Resolving the fallback at the use site
   instead means each rule picks up the theme in force, with no per-theme
   duplication to keep in sync.

   ⚠️ The doubled class (`.crm-due-tone.crm-due-tone--past`) is deliberate
   and must stay. A single class would tie with the component rule on the
   same element — `.crm-board__card-due`, `.crm-boards__card-due` — and
   every component file is enqueued AFTER crm-core, so the tie goes to the
   component and the tone silently loses. That was live for one build: a
   card due today carried `--soon` and still rendered muted grey. Doubling
   wins that tie without `!important`, and every emitter goes through
   `FormatHelper::dueToneClass()` / `crmDue.toneClass()`, which always emit
   BOTH classes — do not hand-write just the modifier. */
.crm-due-tone.crm-due-tone--past { color: var(--crm-due-past, var(--crm-danger)); }
.crm-due-tone.crm-due-tone--soon { color: var(--crm-due-soon, var(--crm-success)); }
.crm-due-tone.crm-due-tone--done { color: var(--crm-due-done, var(--crm-text-muted)); }

.crm-drift-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px var(--crm-sp-2);
    border-radius: var(--crm-radius-full);
    font-family: var(--crm-font-mono);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--crm-leading-tight);
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
    color: var(--crm-text-muted);
    background: var(--crm-surface-2);
}
.crm-drift-chip--late   { color: var(--crm-danger);       background: var(--crm-danger-soft); }
.crm-drift-chip--ontime { color: var(--crm-success-text); background: var(--crm-success-soft); }
.crm-drift-chip--early  { color: var(--crm-text-muted);   background: var(--crm-surface-2); }

.crm-drift-chip--label { font-family: var(--crm-font); font-variant-numeric: tabular-nums; }

.crm-budget-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px var(--crm-sp-2);
    border-radius: var(--crm-radius-full);
    font-family: var(--crm-font-mono);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--crm-leading-tight);
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
    color: var(--crm-text-muted);
    background: var(--crm-surface-2);
}
.crm-budget-chip--over { color: var(--crm-danger); background: var(--crm-danger-soft); }
.crm-budget-chip--ok   { color: var(--crm-success-text); background: var(--crm-success-soft); }

.crm-done-stamp {
    position: absolute;

    z-index: 1;
    right: var(--crm-sp-5);
    bottom: -16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--crm-sp-2) 14px 7px;
    border: 2px solid var(--crm-success);
    border-radius: var(--crm-radius-sm);
    outline: 1px solid var(--crm-success);
    outline-offset: 3px;
    background: var(--crm-surface);
    color: var(--crm-success);
    transform-origin: 100% 50%;

    opacity: 0;
    visibility: hidden;
    transform: rotate(-1deg) scale(1.2);
    transition: opacity 200ms ease-in, transform 200ms ease-in,
                box-shadow 160ms ease, visibility 0s linear 200ms;

}

.crm-done-stamp--on:hover {
    z-index: 6;
    transform: rotate(0deg) scale(1.45);
    box-shadow: var(--crm-shadow-lg);
}

.crm-done-stamp * { pointer-events: none; }
.crm-done-stamp__word {
    font-family: var(--crm-font-display);
    font-size: 15px;
    font-weight: var(--crm-weight-bold);
    line-height: 1;
    letter-spacing: 0.2em;

    text-indent: 0.2em;
    text-transform: uppercase;
}
.crm-done-stamp__rule {
    width: 100%;
    height: 1px;
    margin: var(--crm-sp-1) 0 3px;
    background: currentColor;
    opacity: 0.45;
}
.crm-done-stamp__meta {
    font-family: var(--crm-font-mono);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    color: var(--crm-success-text);
}

.crm-done-stamp__meta > span { display: block; }

.crm-done-stamp--on {
    opacity: 1;
    visibility: visible;
    transform: rotate(-4deg) scale(1);
    transition: opacity 160ms ease-out, transform 160ms ease-out,
                box-shadow 160ms ease, visibility 0s;
}

.crm-done-stamp--unsigned { padding-bottom: var(--crm-sp-2); }
.crm-done-stamp--unsigned .crm-done-stamp__rule,
.crm-done-stamp--unsigned .crm-done-stamp__meta { display: none; }

.crm-done-stamp__meta > span:empty { display: none; }

.crm-done-stamp--in { animation: crm-done-stamp-in 420ms cubic-bezier(0.2, 1.25, 0.4, 1) both; }

@keyframes crm-done-stamp-in {
    0%   { opacity: 0; transform: rotate(-13deg) scale(1.55); }
    60%  { opacity: 1; transform: rotate(-3deg)  scale(0.95); }
    100% { opacity: 1; transform: rotate(-4deg)  scale(1); }
}

@media (prefers-reduced-motion: reduce) {

    .crm-done-stamp     { transition: none; }
    .crm-done-stamp--on { transition: none; }
    .crm-done-stamp--in { animation: none; }
}

@media (max-width: 640px) {

    .crm-done-stamp {
        right: var(--crm-sp-4);

        bottom: -3px;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 4px 9px;
        max-width: calc(100% - var(--crm-sp-8));

        transform: rotate(-1deg) scale(1);
    }
    .crm-done-stamp__word { font-size: 11px; letter-spacing: 0.12em; text-indent: 0.12em; }
    .crm-done-stamp__rule { display: none; }
    .crm-done-stamp__meta { font-size: 8px; line-height: 1; }
    .crm-done-stamp__meta > span { display: inline; }

    .crm-done-stamp__meta > span + span::before { content: " · "; }
}

.crm-level-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    padding: 2px var(--crm-sp-2);
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    color: var(--crm-text-secondary);
    background: var(--crm-surface-2);

    flex-wrap: wrap;
}
.crm-level-chip__icon {
    font-size: 1em;
    line-height: 1;
}

.crm-level-chip__icon[hidden] {
    display: none;
}
.crm-level-chip__text {
    min-width: 0;
}

.crm-level-chip__id {
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-medium);
    color: var(--crm-text-faint);
    font-variant-numeric: tabular-nums;
}

.crm-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--crm-sp-2);
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
    white-space: nowrap;
    vertical-align: middle;
    border: none;
}
.crm-health-badge__dot { font-size: 0.7em; line-height: 1; }
.crm-health-badge--on_track {
    color: var(--crm-status-done);
    background: var(--crm-status-done-bg);
}
.crm-health-badge--at_risk {
    color: var(--crm-status-client-review);
    background: var(--crm-status-client-review-bg);
}
.crm-health-badge--off_track {
    color: var(--crm-priority-high);
    background: var(--crm-priority-high-bg);
}
.crm-health-badge--on_hold {
    color: var(--crm-status-idea);
    background: var(--crm-status-idea-bg);
}
.crm-health-badge--complete {
    color: var(--crm-status-in-progress);
    background: var(--crm-status-in-progress-bg);
}

.crm-health-badge--dot-only { padding: 2px; gap: 0; }
.crm-health-badge--dot-only .crm-health-badge__label { display: none; }

.crm-health-bar {
    display: flex;
    width: 100%;
    height: 10px;
    gap: 1px;
    border-radius: var(--crm-radius-full);
    overflow: hidden;
    background: var(--crm-surface-2);
}
.crm-health-bar--lg { height: 16px; }
.crm-health-bar__seg { min-width: 2px; height: 100%; }
.crm-health-bar__seg--on_track  { background: var(--crm-status-done); }
.crm-health-bar__seg--at_risk    { background: var(--crm-status-client-review); }
.crm-health-bar__seg--off_track  { background: var(--crm-priority-high); }
.crm-health-bar__seg--on_hold    { background: var(--crm-status-idea); }
.crm-health-bar__seg--complete   { background: var(--crm-status-in-progress); }

.crm-health-bar__seg--none {
    background: repeating-linear-gradient(
        45deg,
        var(--crm-surface-3), var(--crm-surface-3) 4px,
        var(--crm-surface-2) 4px, var(--crm-surface-2) 8px
    );
}
.crm-health-bar__empty { flex: 1; height: 100%; background: var(--crm-surface-2); }

.crm-choice-grid {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: var(--crm-sp-2);
    min-width: 0;
    width: 100%;
    align-items: stretch;
}
.crm-choice-grid__opt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    align-content: start;
    gap: 2px var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    cursor: pointer;
    color: var(--crm-text-secondary);
    font-size: var(--crm-text-sm);
    text-align: left;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.crm-choice-grid__opt:hover { border-color: var(--crm-border-strong); }
.crm-choice-grid__opt:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 1px;
}
.crm-choice-grid__opt--on {
    border-color: var(--crm-primary);
    background: var(--crm-primary-soft);
    color: var(--crm-primary-text);
    box-shadow: inset 0 0 0 1px var(--crm-primary);
}
.crm-choice-grid__glyph {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface-2);
    font-size: 15px;
}
.crm-choice-grid__opt--on .crm-choice-grid__glyph { background: var(--crm-surface); }
.crm-choice-grid__name {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
}
.crm-choice-grid__desc {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.crm-choice-grid__opt--on .crm-choice-grid__desc { color: var(--crm-primary-text); opacity: 0.85; }

.crm-choice-grid--multi .crm-choice-grid__opt {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.crm-choice-grid--multi .crm-choice-grid__desc { grid-column: 2 / span 2; }
.crm-choice-grid__mark {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    font-size: var(--crm-text-xs);
    line-height: 1.3;
    color: var(--crm-primary);

    min-width: 12px;
    text-align: right;
}
.crm-choice-grid__opt--on .crm-choice-grid__mark { color: var(--crm-primary-text); }

.crm-choice-grid__opt--locked { cursor: default; }

/* ── Action menu — reusable "stack the row actions behind one ⋯" primitive ───
   Promoted 2026-07-27 (roles consolidation C4b) out of two feature-scoped
   duplicates that had already independently grown the same shape:
     • `.crm-bulkbar__menu` / `__menu-head` / `__opt`  (crm-task-bulk.css)
     • `.crm-chat-inbox__send-menu` / `__send-menu-item` / `__send-menu-glyph`
       / `__send-menu-text` / `--on`                    (crm-chat-inbox.css)
   The users roster was about to become the third, which is where the reuse
   ladder says promote instead of building a fourth. Generalised from the
   send-menu (the richer of the two: glyph + title + sub-line + on-state).

   Anatomy:
     .crm-action-menu                 positioning root (also the outside-click
                                      boundary — the popover stays a DOM
                                      descendant, so `@click.outside` on the
                                      root correctly ignores in-menu clicks)
       .crm-action-menu__trigger      the ⋯ button (see the hit-target note)
       .crm-action-menu__menu         the popover, role="menu"
         .crm-action-menu__head       optional uppercase group caption
         .crm-action-menu__item       role="menuitem" button
           .crm-action-menu__glyph    leading emoji, fixed column
           .crm-action-menu__text     <strong>label</strong> + optional <small>
         .crm-action-menu__item--on       selected/current state
         .crm-action-menu__item--danger   destructive action
         .crm-action-menu__sep        1px rule between groups

   Hit target: own min-block-size for 28×28, larger than `.crm-icon-btn` by
   intent (menu trigger). Not-reusing it is now a SIZE choice — the primitive's
   0px-target bug was fixed at the base 2026-08-16.

   Popover positioning is `fixed`, anchored per-open by JS measuring the
   trigger rect (crm-action-menu.js) — an absolutely-positioned popover is
   invisible inside `.crm-table-wrap { overflow-x: auto }` or any other
   clipping ancestor, which is exactly why the send-menu went fixed too. */
.crm-action-menu {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}
.crm-action-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    border: 1px solid transparent;
    border-radius: var(--crm-radius-sm);

    line-height: 1;
    font-size: var(--crm-text-base);
    cursor: pointer;
    transition: background var(--crm-ease), color var(--crm-ease), border-color var(--crm-ease);
}

.crm-action-menu__trigger:not(.crm-btn) {
    padding: 0 var(--crm-sp-1);
}

.crm-action-menu__trigger:not(.crm-btn) {
    background: transparent;
    color: var(--crm-text-muted);
}
.crm-action-menu__trigger:not(.crm-btn):hover,
.crm-action-menu__trigger[aria-expanded="true"]:not(.crm-btn) {
    background: var(--crm-surface-1);
    border-color: var(--crm-border);
    color: var(--crm-text);
}
.crm-action-menu__trigger:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 1px;
}

.crm-action-menu__trigger-text {
    font-size: inherit;
    font-weight: inherit;
}
/* A consumer may layer `.crm-btn` chrome onto the trigger when the menu IS the
   primary action rather than an overflow. Fill + ink are `.crm-btn`'s own
   business now (the `:not(.crm-btn)` scoping above) — what THIS rule still
   owns is the SHAPE: an icon button's square 28px floor reads as a broken text
   button on anything wearing `.crm-btn` chrome, filled or ghost.
   The hit target, the focus ring and the popover machinery stay this
   primitive's regardless.
   ⚠️ PADDING is deliberately NOT restated here (2026-08-09) — it is scoped
   `:not(.crm-btn)` at the base rule instead, so `.crm-btn`, `.crm-btn--small`
   and every future size variant resolve against each other normally. Pinning
   the full-size padding here defeated `--small` at 0,2,0 and is what made the
   topbar ＋ Create button fill the header vertically. */
.crm-action-menu__trigger.crm-btn {
    min-width: 0;
    min-height: 0;
    border-radius: var(--crm-radius);
    font-weight: var(--crm-weight-semibold);
    line-height: var(--crm-leading-tight);
}
.crm-action-menu__menu {

    display: none;
    position: fixed;
    z-index: 100001;
    min-width: 200px;

    max-width: min(320px, calc(100vw - 16px));
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    white-space: normal;
    overflow-wrap: anywhere;
    padding: var(--crm-sp-1);
    flex-direction: column;
    gap: 2px;
    background: var(--crm-bg);
    border: 1px solid var(--crm-border-strong, var(--crm-border));
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow-lg);
}
.crm-action-menu__menu--open { display: flex; }
.crm-action-menu__head {
    padding: var(--crm-sp-1) var(--crm-sp-2);
    font-size: var(--crm-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-text-muted);
}
.crm-action-menu__sep {
    height: 1px;
    margin: var(--crm-sp-1) 0;
    background: var(--crm-border);
}
.crm-action-menu__item {
    display: flex;
    align-items: flex-start;
    gap: var(--crm-sp-2);
    width: 100%;
    padding: var(--crm-sp-2);
    border: 0;
    border-radius: var(--crm-radius-sm);
    background: transparent;
    color: var(--crm-text);
    font-size: var(--crm-text-sm);
    line-height: var(--crm-leading-tight);
    text-align: left;
    cursor: pointer;
}
.crm-action-menu__item:hover,
.crm-action-menu__item:focus-visible {
    background: var(--crm-surface-1);
    outline: none;
}
.crm-action-menu__item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--crm-primary);
}
.crm-action-menu__item--on {
    background: color-mix(in srgb, var(--crm-primary) 10%, transparent);
    font-weight: var(--crm-weight-semibold);
}
.crm-action-menu__item--danger { color: var(--crm-danger); }
.crm-action-menu__item--danger:hover,
.crm-action-menu__item--danger:focus-visible {
    background: color-mix(in srgb, var(--crm-danger) 10%, transparent);
}
.crm-action-menu__glyph {
    flex: none;
    width: 1.2em;
    text-align: center;
    font-size: var(--crm-text-sm);
}
.crm-action-menu__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.crm-action-menu__text strong { font-weight: inherit; }
.crm-action-menu__text small {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
}

/* ── Heat cell — reusable load/capacity intensity cell ───────────────────────
   Tokenised heat scale (no new palette — maps 1:1 onto existing status /
   priority token pairs). A generic primitive: any surface that wants to show
   "how full is this bucket" (workload week cells, and future capacity views)
   drops a .crm-heat-cell with a --0..--4 level modifier. Level is computed by
   the caller from ratio = load / capacity:
     --0  empty     ratio == 0          (dashed, muted)
     --1  light     0   < ratio <= 0.5  (done / green)
     --2  busy      0.5 < ratio <= 0.85 (in-progress / blue)
     --3  near-full 0.85< ratio <= 1.0  (client-review / amber)
     --4  overload  ratio > 1.0         (priority-high / red, ⚠)
   Light + dark both inherit the token pairs, so no theme-specific rules. */
.crm-heat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 44px;
    padding: var(--crm-sp-1) var(--crm-sp-2);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface);
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);
    line-height: var(--crm-leading-tight);
    text-align: center;
    cursor: default;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.crm-heat-cell__load { font-weight: var(--crm-weight-semibold); font-size: var(--crm-text-sm); }
.crm-heat-cell__cap { opacity: 0.75; }
.crm-heat-cell__warn { font-size: 0.9em; line-height: 1; }
.crm-heat-cell--clickable { cursor: pointer; }
.crm-heat-cell--clickable:hover { box-shadow: var(--crm-shadow-sm); filter: brightness(1.04); }
.crm-heat-cell--clickable:focus-visible { outline: 2px solid var(--crm-focus, var(--crm-primary)); outline-offset: 1px; }
.crm-heat-cell--0 {
    background: var(--crm-surface);
    color: var(--crm-text-muted);
    border-style: dashed;
}
.crm-heat-cell--1 {
    background: var(--crm-status-done-bg);
    color: var(--crm-status-done);
    border-color: transparent;
}
.crm-heat-cell--2 {
    background: var(--crm-status-in-progress-bg);
    color: var(--crm-status-in-progress);
    border-color: transparent;
}
.crm-heat-cell--3 {
    background: var(--crm-status-client-review-bg);
    color: var(--crm-status-client-review);
    border-color: transparent;
}
.crm-heat-cell--4 {
    background: var(--crm-priority-high-bg);
    color: var(--crm-priority-high);
    border-color: var(--crm-priority-high);
    font-weight: var(--crm-weight-bold);
}

.crm-select--small,
.crm-input--small,
.crm-input--sm {
    width: auto;
    font-size: var(--crm-text-sm);
    padding: var(--crm-sp-1) var(--crm-sp-2);
    height: 28px;
    line-height: 1;
}
.crm-select--small {
    padding-right: 28px;
    background-position: right 6px center;
}

.crm-ta-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    position: relative;
}

.crm-ta-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px dashed var(--crm-text-faint);
    background: none;
    color: var(--crm-text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: border-color .12s, color .12s;
}
.crm-ta-add:hover { border-color: var(--crm-primary); color: var(--crm-primary); }

.crm-ta-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    box-shadow: var(--crm-shadow-md);
    min-width: 160px;
    padding: 4px 0;
}

.crm-ta-picker--scroll {
    max-height: 16rem;
    overflow-y: auto;
}

.crm-ta-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--crm-text);
    transition: background .1s;
}
.crm-ta-opt:hover { background: var(--crm-primary-soft); }
.crm-ta-opt.is-assigned { background: var(--crm-surface-2); }
.crm-ta-opt.is-assigned::after {
    content: '✓';
    margin-left: auto;
    color: var(--crm-primary);
    font-size: 11px;
}

.crm-my-tasks__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crm-sp-2); padding: var(--crm-sp-2) 0 var(--crm-sp-3); border-bottom: 1px solid var(--crm-border); margin-bottom: var(--crm-sp-3); }
.crm-my-tasks__filter-label { font-size: var(--crm-text-sm); color: var(--crm-text-secondary); font-weight: var(--crm-weight-semibold); margin-right: var(--crm-sp-1); }
.crm-my-tasks__filters .crm-badge { cursor: pointer; transition: opacity var(--crm-ease); user-select: none; text-decoration: none; }
.crm-my-tasks__filters .crm-badge:hover { opacity: 0.8; }

.crm-my-tasks__mgmt-chip { margin-left: var(--crm-sp-2); padding-left: var(--crm-sp-3); border-left: 1px solid var(--crm-border); border-radius: 0 var(--crm-radius-full) var(--crm-radius-full) 0; }

.crm-my-tasks__table .crm-pd-col-drag { display: none; }

.crm-my-tasks__group-header td {
    background: var(--crm-surface-2);
    font-weight: var(--crm-weight-semibold);
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-bottom: 1px solid var(--crm-border);
}

.crm-my-tasks__list-header td {
    background: var(--crm-surface-1);
    font-weight: var(--crm-weight-medium);
    font-size: var(--crm-text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--crm-text-muted);
    padding: var(--crm-sp-1) var(--crm-sp-3) var(--crm-sp-1) var(--crm-sp-5);
    border-bottom: 1px solid var(--crm-border);
}
.crm-my-tasks__list-marker { color: var(--crm-text-faint); margin-right: 2px; }

.crm-my-tasks__tl-project + .crm-my-tasks__tl-project { margin-top: var(--crm-sp-4); }
.crm-my-tasks__tl-project-name {
    font-weight: var(--crm-weight-semibold);
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
    padding: var(--crm-sp-2) 0 var(--crm-sp-1);
}

@media (max-width: 640px) {

    .crm-my-tasks .crm-table-wrap,
    .crm-my-tasks__timeline .crm-table-wrap { overflow: visible; }

    .crm-my-tasks__filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .crm-my-tasks__filters > * { flex: 0 0 auto; }

    .crm-my-tasks__table { border: 0; }
    .crm-my-tasks__table thead { display: none; }
    .crm-my-tasks__table,
    .crm-my-tasks__table > tbody { display: block; width: 100%; }

    .crm-my-tasks__group-header,
    .crm-my-tasks__list-header { display: block; }
    .crm-my-tasks__group-header td,
    .crm-my-tasks__list-header td { display: block; }
    .crm-my-tasks__group-header td { border-radius: var(--crm-radius) var(--crm-radius) 0 0; }

}

.crm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--crm-text-sm);
}
.crm-table th {
    text-align: left;
    padding: var(--crm-sp-2) var(--crm-sp-3);
    font-weight: var(--crm-weight-semibold);
    font-size: var(--crm-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-text-muted);
    background: var(--crm-surface-1);
    border-bottom: 1px solid var(--crm-border);
}
.crm-table td {
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-bottom: 1px solid var(--crm-border);
    color: var(--crm-text);
}

.crm-table td a {
    color: var(--crm-primary);
    text-decoration: none;
}
.crm-table td a:hover {
    text-decoration: underline;
}
.crm-table tbody tr:hover {
    background: var(--crm-surface-1);
}

.crm-table--sm th,
.crm-table--sm td {
    padding: var(--crm-sp-1) var(--crm-sp-2);
}

.crm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    .crm-table:not(.crm-table-wrap .crm-table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.crm-card {
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-sm);
}
.crm-card__header {
    padding: var(--crm-sp-3) var(--crm-sp-4);
    border-bottom: 1px solid var(--crm-border);
    font-weight: var(--crm-weight-semibold);
}
.crm-card__body {
    padding: var(--crm-sp-4);
}

.crm-tabs {
    display: flex;
    border-bottom: 2px solid var(--crm-border);
}
.crm-tab {
    flex: 1;
    padding: var(--crm-sp-3) var(--crm-sp-3);
    text-align: center;
    border: none;
    background: none;
    font-family: var(--crm-font);
    font-size: var(--crm-text-base);
    font-weight: var(--crm-weight-semibold);
    color: var(--crm-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color var(--crm-ease), border-color var(--crm-ease), background var(--crm-ease);
}
.crm-tab:hover {
    color: var(--crm-text);
    text-decoration: none;
}
.crm-tab--active {
    color: var(--crm-primary);
    border-bottom-color: var(--crm-primary);
}

/* `--inline`: tabs sized to their labels, left-aligned, scrolling sideways
   rather than squeezing — the treatment the single-view style strip and the
   chat Inbox inspector already use. Promoted here as a MODIFIER of the shared
   block so a third surface does not grow a fourth copy of it (Roman, chat
   #825: "why did you not use our general tabs or promote tabs to be
   generalized?").

   ⚠️ It deliberately touches NO border property. The underline is the base
   block's own mechanic — `.crm-tabs` draws the full-width rule, `.crm-tab`
   sits on it with `margin-bottom:-2px` and a transparent border, and
   `.crm-tab--active` colours that border. Re-stating the `border-bottom`
   SHORTHAND here (0,2,0) silently outranked `.crm-tab--active` (0,1,0) and
   ate the blue underline — the first cut of this modifier did exactly that.
   Anything this modifier needs from the border belongs in the base rules.

   Follow-up: converge `.crm-view__tabs` onto this modifier. */
.crm-tabs--inline {
    gap: var(--crm-sp-4);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: relative;
    padding-bottom: 2px;
    border-bottom: 0;
}
.crm-tabs--inline:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 2px solid var(--crm-border);
}
.crm-tabs--inline::-webkit-scrollbar { display: none; }

.crm-tabs--inline .crm-tab {
    flex: 0 0 auto;
    text-align: left;
    white-space: nowrap;
    padding: var(--crm-sp-2) var(--crm-sp-1);
    font-size: var(--crm-text-sm);
    z-index: 2;
}

.crm-task-detail__meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--crm-sp-3);
    margin-bottom: var(--crm-sp-4);
}
.crm-task-detail__field {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-1);
}
.crm-task-detail__field label {
    display: block;
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    margin-bottom: 0;
}
.crm-task-detail__field span {
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
}
.crm-task-detail__field .crm-select--small,
.crm-task-detail__field .crm-input--small {
    width: 100%;
}
.crm-task-detail__desc {
    font-size: var(--crm-text-sm);
    color: var(--crm-text-secondary);
    line-height: var(--crm-leading-normal);
    margin: 0 0 var(--crm-sp-4);
    padding: 0 0 var(--crm-sp-3);
    border-bottom: 1px solid var(--crm-border);
}

.crm-task-detail__assignees {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--crm-sp-1);
}
.crm-task-detail__assignees .crm-btn--small,
.crm-task-detail__assignees .crm-select--small {
    height: 28px;
}
.crm-link {
    color: var(--crm-primary);
    text-decoration: none;
    cursor: pointer;
}
.crm-link:hover { text-decoration: underline; }

.crm-progress {
    height: 6px;
    background: var(--crm-surface-2);
    border-radius: var(--crm-radius-full);
    overflow: hidden;
}
.crm-progress__bar {
    height: 100%;
    background: var(--crm-primary);
    border-radius: var(--crm-radius-full);
    transition: width 0.3s ease;
}
.crm-progress__bar--over {
    height: 100%;
    background: var(--crm-danger);
    border-radius: var(--crm-radius-full);
}

.crm-att-tiles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.crm-att-tiles__item {
    position: relative;
    flex: 0 0 auto;
    max-width: 100%;
}

.crm-att-tiles__thumb {
    position: relative;
    display: block;
    width: 84px;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 45%, #f472b6 100%);
    text-decoration: none;
    cursor: zoom-in;
}
.crm-att-tiles__thumb::after {
    content: "🖼";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.crm-att-tiles__thumb:has(.crm-att-tiles__img)::after {
    content: none;
}
.crm-att-tiles__thumb:hover {
    border-color: var(--crm-primary);
}
.crm-att-tiles__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.crm-att-tiles__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 5px 8px;
    background: var(--crm-surface-2);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    color: var(--crm-text-secondary);
    font-size: var(--crm-text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.crm-att-tiles__item:has(.crm-att-tiles__remove) .crm-att-tiles__name {
    padding-right: 20px;
}

.crm-att-tiles__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 11px;

    color: var(--crm-text-on-danger);
    background: var(--crm-danger);
    border: 2px solid var(--crm-surface-1);
    border-radius: var(--crm-radius-full);
    cursor: pointer;

    opacity: 0.85;
    transition: opacity var(--crm-ease, 120ms ease), transform var(--crm-ease, 120ms ease);
}
.crm-att-tiles__item:hover .crm-att-tiles__remove,
.crm-att-tiles__remove:hover,
.crm-att-tiles__remove:focus-visible {
    opacity: 1;
    transform: scale(1.08);
}
.crm-att-tiles__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px dashed var(--crm-border-strong);
    border-radius: var(--crm-radius);
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);
    cursor: pointer;
    transition: border-color var(--crm-ease, 120ms ease), color var(--crm-ease, 120ms ease);
}
.crm-att-tiles__add:hover {
    border-color: var(--crm-primary);
    color: var(--crm-primary-text);
}

.crm-uploads {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-2);
    margin-top: var(--crm-sp-2);
}
.crm-uploads__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.crm-uploads__head {
    display: flex;
    align-items: baseline;
    gap: var(--crm-sp-2);
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
}
.crm-uploads__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-uploads__pct {
    margin-left: auto;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.crm-uploads__why {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--crm-danger);
}
.crm-uploads__row--failed .crm-uploads__pct {
    color: var(--crm-danger);
    font-weight: var(--crm-weight-bold);
}
.crm-uploads__meter {
    height: 4px;
}

.crm-timer-banner {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-3);
    padding: var(--crm-sp-3) var(--crm-sp-4);
    background: var(--crm-timer-bg);
    border-radius: var(--crm-radius-lg);
    border: 1px solid var(--crm-border);
    margin-bottom: var(--crm-sp-4);
}
.crm-timer-banner__pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--crm-timer-pulse);
    flex-shrink: 0;
    animation: crm-pulse 1.5s ease-in-out infinite;
}
@keyframes crm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
.crm-timer-banner__info {
    flex: 1;
    min-width: 0;
}
.crm-timer-banner__project {
    display: block;
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-timer-banner__op {
    color: var(--crm-text-faint, var(--crm-text-muted));
    font-variant-numeric: tabular-nums;
}

.crm-tw__resume-chip__op {
    color: var(--crm-text-faint, var(--crm-text-muted));
    font-variant-numeric: tabular-nums;
}
.crm-timer-banner__task {
    display: block;
    font-weight: var(--crm-weight-semibold);
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-timer-banner__clock {
    font-size: var(--crm-text-xl);
    font-weight: var(--crm-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--crm-timer-clock);
    min-width: 5.5rem;
    text-align: center;
    letter-spacing: 0.02em;
}

.crm-timer-banner--compact {
    padding: var(--crm-sp-2) var(--crm-sp-3);
    margin-bottom: 0;
    border-radius: var(--crm-radius);
    gap: var(--crm-sp-2);
}
.crm-timer-banner--compact .crm-timer-banner__clock {
    font-size: var(--crm-text-base);
    min-width: auto;
}
.crm-timer-banner--compact .crm-timer-banner__pulse {
    width: 8px;
    height: 8px;
}

.crm-timer-banner--paused {
    opacity: 0.7;
}
.crm-timer-banner--paused .crm-timer-banner__clock {
    color: var(--crm-text-muted);
}

.crm-timer-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-2);
    font-variant-numeric: tabular-nums;
    font-weight: var(--crm-weight-semibold);
    color: var(--crm-timer-clock);
}
.crm-timer-inline__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crm-timer-pulse);
    animation: crm-pulse 1.5s ease-in-out infinite;
}

.crm-msg {
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-radius: var(--crm-radius);
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
}
.crm-msg--success {
    background: var(--crm-success-soft);
    color: var(--crm-success-text);
}
.crm-msg--error {
    background: var(--crm-danger-soft);
    color: var(--crm-danger);
}
.crm-msg--warning {
    background: var(--crm-warning-soft);
    color: var(--crm-warning-text);
}

.crm-verdict {
    border-left: 3px solid var(--crm-border-strong);
    padding: var(--crm-sp-1) 0 var(--crm-sp-1) var(--crm-sp-5);
    margin: 0 0 var(--crm-sp-5);
}
.crm-verdict--alert { border-left-color: var(--crm-danger); }
.crm-verdict--clear { border-left-color: var(--crm-success); }

.crm-verdict--warn { border-left-color: var(--crm-warning); }

.crm-verdict__eyebrow {
    margin: 0 0 var(--crm-sp-3);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--crm-text-muted);
}
.crm-verdict__line {
    margin: 0;
    font-family: var(--crm-font-display);
    font-size: clamp(1.45rem, 3.4vw, 2.15rem);
    font-weight: var(--crm-weight-normal);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--crm-text);
    text-wrap: balance;
}
.crm-verdict__line em {
    font-style: normal;
    font-weight: var(--crm-weight-bold);
    color: var(--crm-danger);
}
.crm-verdict--clear .crm-verdict__line em { color: var(--crm-success); }
.crm-verdict--warn .crm-verdict__line em { color: var(--crm-warning-text); }
.crm-verdict__foot {
    margin: var(--crm-sp-3) 0 0;
    font-size: var(--crm-text-sm);
    color: var(--crm-text-muted);
}
.crm-verdict__foot b {
    color: var(--crm-text-secondary);
    font-weight: var(--crm-weight-semibold);
}

.crm-verdict--compact { margin-bottom: var(--crm-sp-4); }
.crm-verdict--compact .crm-verdict__line {
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: var(--crm-weight-semibold);
    letter-spacing: -.02em;
    line-height: 1.2;
}
.crm-verdict--compact .crm-verdict__eyebrow {
    font-family: var(--crm-font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    margin-bottom: var(--crm-sp-1);
    color: var(--crm-text-faint);
}

.crm-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--crm-sp-5) + 3.5em);
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--crm-sp-3);
    max-width: min(92vw, 520px);
    padding: var(--crm-sp-2) var(--crm-sp-3) var(--crm-sp-2) var(--crm-sp-4);
    background: var(--crm-text);
    color: var(--crm-bg);
    border-radius: var(--crm-radius-full);
    box-shadow: var(--crm-shadow-lg);
    font-size: var(--crm-text-sm);
    animation: crm-toast-in .18s ease;
}
.crm-toast__text {
    min-width: 0;

    overflow-wrap: anywhere;
}
.crm-toast__action {
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--crm-bg) 40%, transparent);
    background: none;
    color: inherit;
    font: inherit;
    font-weight: var(--crm-weight-semibold);
    padding: 2px var(--crm-sp-3);
    border-radius: var(--crm-radius-full);
    cursor: pointer;
}
.crm-toast__action:hover,
.crm-toast__action:focus-visible {
    background: color-mix(in srgb, var(--crm-bg) 16%, transparent);
    border-color: var(--crm-bg);
}

.crm-toast__count {
    flex: 0 0 auto;
    font-family: var(--crm-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    opacity: .6;
}
.crm-toast--error   { background: var(--crm-danger);  color: var(--crm-text-on-danger); }
.crm-toast--warn    { background: var(--crm-warning); color: var(--crm-text-on-primary); }
.crm-toast--error .crm-toast__action,
.crm-toast--warn  .crm-toast__action { border-color: currentColor; }

@keyframes crm-toast-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .crm-toast { animation: none; }
}

@keyframes crm-arrival-flash {
    0%   { background-color: color-mix(in srgb, var(--crm-primary) 22%, transparent); }
    100% { background-color: transparent; }
}
.crm-arrival-flash,
.crm-arrival-flash > td {
    animation: crm-arrival-flash 1.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {

    .crm-arrival-flash,
    .crm-arrival-flash > td {
        animation: none;
        background-color: color-mix(in srgb, var(--crm-primary) 14%, transparent);
    }
}

.crm-searchbox {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-1);
    height: var(--crm-control-h);
    box-sizing: border-box;
    padding: 0 var(--crm-sp-2);
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    transition: border-color var(--crm-ease), box-shadow var(--crm-ease);
}

.crm-searchbox:focus-within {
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px var(--crm-ring);
}

.crm-searchbox__icon {
    flex: 0 0 auto;
    font-size: var(--crm-text-sm);
    line-height: 1;
    opacity: 0.7;
}

.crm-searchbox__input {
    flex: 1 1 auto;
    min-width: 8rem;
    border: 0;
    background: transparent;
    color: var(--crm-text);
    font: inherit;
    font-size: var(--crm-text-sm);
    padding: 0;
}

.crm-searchbox__input:focus { outline: none; }

.crm-searchbox__input::-webkit-search-cancel-button,
.crm-searchbox__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.crm-searchbox__count {
    flex: 0 0 auto;
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.crm-searchbox__clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--crm-radius-full);
    background: transparent;
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);

    line-height: 1;
    cursor: pointer;
}

.crm-searchbox__clear:hover { background: var(--crm-surface-2); color: var(--crm-text); }

/* ⚠️ Must out-rank the `display: inline-flex` above, or the `hidden` attribute
   is ignored and an empty box shows a clear button with nothing to clear. */
.crm-searchbox__clear[hidden],
.crm-searchbox__count[hidden] { display: none !important; }

.crm-search-hidden { display: none !important; }

.crm-searchbox__empty { margin-top: var(--crm-sp-3); }

@media (max-width: 640px) {
    .crm-searchbox { width: 100%; }
}

.crm-empty {
    text-align: center;
    color: var(--crm-text-faint);
    font-style: italic;
    padding: var(--crm-sp-6) 0;
}
.crm-loading {
    text-align: center;
    color: var(--crm-text-faint);
    padding: var(--crm-sp-6) 0;
}

.crm-theme-toggle {
    background: none;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-full);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background var(--crm-ease), border-color var(--crm-ease);
}
.crm-theme-toggle:hover {
    background: var(--crm-surface-2);
    border-color: var(--crm-border-strong);
}

.crm-menu__item--toggle {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-1);
    margin-left: auto;
}

.crm-widget__header .crm-theme-toggle {
    width: 30px;
    height: 30px;
    font-size: 16px;
    border-color: var(--crm-contrast-border);
}
.crm-widget__header .crm-theme-toggle:hover {
    background: var(--crm-contrast-bg-hover);
    border-color: var(--crm-contrast-border-hover);
}
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-widget__header .crm-theme-toggle {
    border-color: var(--crm-border);
}
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-widget__header .crm-theme-toggle:hover {
    background: var(--crm-surface-3);
    border-color: var(--crm-border-strong);
}

/* ⚠ Keep line-height:1 + block padding — line-height:0 = 0px-tall unclickable target. Guard: IconButtonHitTargetTest. */
.crm-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    font-size: 12px;
    line-height: 1;

    color: var(--crm-text-secondary);
    opacity: 0.45;
    transition: opacity var(--crm-ease), color var(--crm-ease);
    flex-shrink: 0;
}
.crm-icon-btn:hover {
    opacity: 1;
    color: var(--crm-text);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--crm-border-strong) transparent;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--crm-border-strong);
    border-radius: var(--crm-radius-full);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--crm-text-faint);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ⚠ `scrollbar-width` is the ONLY lever that lands: the `*` rule above sets it,
   and once it is set Chrome 121+ and Firefox both IGNORE ::-webkit-scrollbar.
   It is not per-axis, so both bars widen together — a browser limit, not a
   choice. ⚠ The webkit block only reaches engines lacking scrollbar-width (old
   Safari); keep its 14px in agreement or the two engines disagree. */
.crm-scroll-chunky {
    scrollbar-width: auto;
    scrollbar-color: var(--crm-border) transparent;
}
.crm-scroll-chunky::-webkit-scrollbar { width: 14px; height: 14px; }
.crm-scroll-chunky::-webkit-scrollbar-track { background: transparent; }
.crm-scroll-chunky::-webkit-scrollbar-thumb {
    background: var(--crm-border);
    border-radius: var(--crm-radius-full);
    border: 3px solid transparent;
    background-clip: padding-box;
    min-width: 48px;
    min-height: 48px;
}
.crm-scroll-chunky::-webkit-scrollbar-thumb:hover {
    background: var(--crm-text-muted);
    background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
    .crm-timer-banner__pulse,
    .crm-timer-inline__dot {
        animation: none;
    }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
    }
}

.crm-comment {
    display: flex;
    gap: var(--crm-sp-3);
    padding: var(--crm-sp-3) 0;
    border-bottom: 1px solid var(--crm-border);
}
.crm-comment:last-child { border-bottom: none; }

.crm-comment__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--crm-text-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

.crm-comment__body { flex: 1; min-width: 0; }

.crm-comment__header {
    display: flex;
    align-items: baseline;
    gap: var(--crm-sp-2);
    margin-bottom: var(--crm-sp-1);
}

.crm-comment__author {
    font-weight: var(--crm-weight-semibold);
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
}
.crm-comment__time {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
}
.crm-comment__footer-actions {
    margin-top: var(--crm-sp-1);
    display: flex;
    gap: var(--crm-sp-3);
    opacity: 0.55;
    transition: opacity var(--crm-ease, 120ms ease);
}
.crm-comment:hover .crm-comment__footer-actions {
    opacity: 1;
}
.crm-comment__reply {
    background: none;
    border: none;
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);
    cursor: pointer;
    padding: 2px 0;
    text-decoration: none;
}
.crm-comment__reply:hover,
.crm-comment__reply:focus-visible {
    color: var(--crm-text);
    text-decoration: underline;
    text-decoration-color: var(--crm-border-strong);
    text-underline-offset: 2px;
}

.crm-comment__content {
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
    line-height: var(--crm-leading-normal);
    word-break: break-word;
}

.crm-markdown > *:first-child { margin-top: 0; }
.crm-markdown > *:last-child  { margin-bottom: 0; }
.crm-markdown p {
    margin: 0 0 var(--crm-sp-2);
}
.crm-markdown h1,
.crm-markdown h2,
.crm-markdown h3,
.crm-markdown h4,
.crm-markdown h5,
.crm-markdown h6 {
    margin: var(--crm-sp-3) 0 var(--crm-sp-2);
    line-height: 1.3;
}
.crm-markdown ul,
.crm-markdown ol {
    margin: 0 0 var(--crm-sp-2);
    padding-left: var(--crm-sp-5);

    list-style-position: outside;
}
.crm-markdown ul { list-style-type: disc; }
.crm-markdown ol { list-style-type: decimal; }
.crm-markdown li { margin: 0 0 2px; }
.crm-markdown pre {
    margin: 0 0 var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    overflow-x: auto;
}
.crm-markdown code {
    font-family: var(--crm-font-mono, monospace);
    font-size: 0.92em;
}
.crm-markdown :not(pre) > code {
    padding: 1px 4px;
    background: var(--crm-surface-1);
    border-radius: 3px;

    overflow-wrap: anywhere;
    word-break: break-word;
}
.crm-markdown blockquote {
    margin: 0 0 var(--crm-sp-2);
    padding: 0 var(--crm-sp-3);
    border-left: 3px solid var(--crm-border);
    color: var(--crm-text-secondary);
}
.crm-markdown a { color: var(--crm-primary); }

.crm-markdown table,
.crm-chat__message-body table,
.crm-chat-inbox__msg-body table {
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--crm-sp-2);
    border-collapse: collapse;
    font-size: var(--crm-text-sm);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.crm-markdown thead th,
.crm-chat__message-body thead th,
.crm-chat-inbox__msg-body thead th {
    text-align: left;
    padding: var(--crm-sp-2) var(--crm-sp-3);
    font-weight: var(--crm-weight-semibold);
    font-size: var(--crm-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-text-muted);
    background: var(--crm-surface-1);
    border-bottom: 1px solid var(--crm-border);
}
.crm-markdown tbody td,
.crm-chat__message-body tbody td,
.crm-chat-inbox__msg-body tbody td {
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-bottom: 1px solid var(--crm-border);
    color: var(--crm-text);
    vertical-align: top;
}
.crm-markdown tbody tr:nth-child(odd),
.crm-chat__message-body tbody tr:nth-child(odd),
.crm-chat-inbox__msg-body tbody tr:nth-child(odd) {
    background: var(--crm-surface-1);
}
.crm-markdown tbody tr:hover,
.crm-chat__message-body tbody tr:hover,
.crm-chat-inbox__msg-body tbody tr:hover {
    background: var(--crm-surface-2);
}

.crm-markdown td code,
.crm-markdown th code,
.crm-chat__message-body td code,
.crm-chat__message-body th code,
.crm-chat-inbox__msg-body td code,
.crm-chat-inbox__msg-body th code {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.crm-comment__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-sp-2);
    margin-top: var(--crm-sp-2);
}

.crm-comment__attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-1);
    padding: 2px var(--crm-sp-2);
    background: var(--crm-surface-2);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    font-size: var(--crm-text-xs);
    color: var(--crm-primary);
    text-decoration: none;
    transition: background var(--crm-ease);
}
.crm-comment__attachment:hover { background: var(--crm-surface-3); }

.crm-comment__actions,
.crm-card-modal__comment-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-1);
    margin-left: auto;
    flex-shrink: 0;
}

.crm-comment__edit-box,
.crm-card-modal__comment-edit {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-1);
    margin-top: var(--crm-sp-1);
}
.crm-comment__edit-input,
.crm-card-modal__comment-edit-input {
    min-height: 4.5rem;
    font-family: inherit;
    font-size: var(--crm-text-sm);
    resize: vertical;
}
.crm-comment__edit-actions,
.crm-card-modal__comment-edit-actions {
    display: flex;
    gap: var(--crm-sp-1);
}

/* Plain activity row (option A): hairline left border, no bubble.
   The sentence reads at body size in body colour; time sits under it. */
.crm-comments__activity {
    display: flex;
    align-items: flex-start;
    gap: var(--crm-sp-2);
    padding: 0 0 0 var(--crm-sp-3);
    margin: 0;
    border-left: 2px solid var(--crm-border);
    background: none;
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
    line-height: 1.5;
}
.crm-comments__activity-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.crm-comments__activity-time {
    flex-shrink: 0;
    color: var(--crm-text-muted);
}

.crm-comments__title {
    margin: var(--crm-sp-5) 0 var(--crm-sp-3);

    font-size: var(--crm-text-lg);
    font-weight: var(--crm-weight-bold);
}

.crm-comments__head {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-3);
    flex-wrap: wrap;
    margin: var(--crm-sp-5) 0 var(--crm-sp-3);
}
.crm-comments__head .crm-comments__title {
    margin: 0;
    flex: 0 0 auto;
}
.crm-comments__search {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    align-items: center;
}
.crm-comments__search-icon {
    position: absolute;
    left: var(--crm-sp-3);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: var(--crm-text-sm);
    opacity: 0.65;
    line-height: 1;
}
.crm-comments__search-input.crm-input {
    width: 100%;
    padding-left: calc(var(--crm-sp-3) + var(--crm-sp-5));
    padding-right: var(--crm-sp-6);
    border-radius: var(--crm-radius-full);
    background: var(--crm-surface-1);
    transition: background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.crm-comments__search-input.crm-input:focus,
.crm-comments__search.is-active .crm-comments__search-input.crm-input {
    background: var(--crm-surface);
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px var(--crm-primary-soft);
}

.crm-comments__search-input::-webkit-search-cancel-button,
.crm-comments__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.crm-comments__search-clear {
    position: absolute;
    right: var(--crm-sp-2);
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--crm-radius-full);
    background: var(--crm-surface-2);
    color: var(--crm-text-secondary);
    cursor: pointer;
    font-size: var(--crm-text-xs);
    line-height: 1;
    transition: background 120ms ease, color 120ms ease;
}
.crm-comments__search-clear:hover,
.crm-comments__search-clear:focus-visible {
    background: var(--crm-surface-3);
    color: var(--crm-text);
    outline: none;
}
.crm-comments__feed {
    margin-top: var(--crm-sp-4);
    padding-top: var(--crm-sp-2);
    border-top: 1px solid var(--crm-border);
}
.crm-comments__item + .crm-comments__item {
    margin-top: 0;
}
.crm-comments__empty {
    margin: var(--crm-sp-3) 0;
}

.crm-comments__empty--no-results {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-3) var(--crm-sp-4);
    background: var(--crm-surface-1);
    border: 1px dashed var(--crm-border-strong);
    border-radius: var(--crm-radius);
    color: var(--crm-text-secondary);
    font-size: var(--crm-text-sm);
}
.crm-comments__search-clear-inline {
    border: 0;
    background: transparent;
    color: var(--crm-primary);
    padding: 0;
    margin-left: var(--crm-sp-1);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}
.crm-comments__search-clear-inline:hover {
    color: var(--crm-primary-hover);
}
@media (max-width: 600px) {
    .crm-comments__head {
        gap: var(--crm-sp-2);
    }
    .crm-comments__search {
        flex: 1 1 100%;
    }
}

.crm-comment-form {
    display: flex;
    gap: var(--crm-sp-2);
    align-items: flex-start;
    padding: var(--crm-sp-3) 0;
}
.crm-comment-form--top {
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: var(--crm-sp-3);
    margin-bottom: var(--crm-sp-2);
}
.crm-comment-form__textarea {
    flex: 1;
    min-height: 60px;
    resize: vertical;
}
.crm-comment-form--top .crm-comment-form__textarea {
    background: var(--crm-surface);
}
.crm-comment-form__actions {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    margin-top: var(--crm-sp-2);
}
.crm-comment-form__pending {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-sp-1);
    margin-top: var(--crm-sp-2);
}

.crm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--crm-sp-3);
}
.crm-filter-bar .crm-input,
.crm-filter-bar .crm-select,
.crm-filter-bar .crm-btn,
.crm-filter-bar .crm-project-picker__trigger,
.crm-filter-bar .crm-user-picker__trigger,
.crm-filter-bar .crm-picker__group {
    height: var(--crm-control-h);
    box-sizing: border-box;
}

.crm-filter-bar .crm-picker__trigger {
    height: 100%;
    box-sizing: border-box;
}

.crm-filter-bar .crm-switch {
    align-self: center;
}

.crm-stat-strip {
    display: flex;
    gap: var(--crm-sp-6);
    padding: var(--crm-sp-4);
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    margin-bottom: var(--crm-sp-5);
}
.crm-stat-strip__item { text-align: center; }
.crm-stat-strip__label {
    display: block;
    font-size: var(--crm-text-sm);
    color: var(--crm-text-muted);
    margin-bottom: var(--crm-sp-1);
}
.crm-stat-strip__value {
    font-size: 1.4em;
    font-weight: var(--crm-weight-bold);
    color: var(--crm-text);
}

.crm-stat {
    margin-bottom: var(--crm-sp-2);
    font-size: var(--crm-text-base);
    color: var(--crm-text);
}
.crm-stat--sm { font-size: var(--crm-text-sm); margin-bottom: var(--crm-sp-1); }
.crm-stat__label { color: var(--crm-text-muted); }

.crm-month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--crm-sp-3);
    margin-bottom: var(--crm-sp-4);
}
.crm-month-nav__label {
    font-size: var(--crm-text-lg);
    font-weight: var(--crm-weight-semibold);
    min-width: 160px;
    text-align: center;
    color: var(--crm-text);
}

.crm-collapsible {
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    margin-bottom: var(--crm-sp-4);
    overflow: hidden;
}
.crm-collapsible__header {

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--crm-sp-4);
    padding: var(--crm-sp-3) var(--crm-sp-4);
    cursor: pointer;
    user-select: none;
    background: var(--crm-surface-1);
    border: none;
    font: inherit;
    text-align: inherit;
    color: var(--crm-text);
    width: 100%;
    transition: background var(--crm-ease);
}
.crm-collapsible__header:hover { background: var(--crm-surface-2); }
.crm-collapsible__title {
    font-size: var(--crm-text-base);
    font-weight: var(--crm-weight-semibold);
    color: var(--crm-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-collapsible__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--crm-sp-4);
    flex-wrap: wrap;
    font-size: var(--crm-text-sm);
    color: var(--crm-text-muted);
    text-align: center;
}
.crm-collapsible__meta > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
}
.crm-collapsible__toggle {
    font-size: var(--crm-text-base);
    transition: transform var(--crm-ease);
    color: var(--crm-text-secondary);
}
.crm-collapsible--open .crm-collapsible__toggle { transform: rotate(180deg); }
.crm-collapsible__body { display: none; }
.crm-collapsible--open .crm-collapsible__body { display: block; }

.crm-collapsible--danger { border-color: var(--crm-danger); }
.crm-collapsible--danger .crm-collapsible__header { background: var(--crm-danger-soft); }
.crm-collapsible--danger .crm-collapsible__header:hover { background: var(--crm-danger-soft); }
.crm-collapsible--danger .crm-collapsible__title { color: var(--crm-danger); }

.crm-collapsible--warn .crm-collapsible__header { background: var(--crm-surface-1); }
.crm-collapsible--warn .crm-collapsible__title { color: var(--crm-text); }

.crm-collapsible--caution { border-color: var(--crm-warning); }
.crm-collapsible--caution .crm-collapsible__header { background: var(--crm-warning-soft); }
.crm-collapsible--caution .crm-collapsible__header:hover { background: var(--crm-warning-soft); }
.crm-collapsible--caution .crm-collapsible__title { color: var(--crm-warning-text); }
.crm-collapsible--quiet { border-style: dashed; background: transparent; }
.crm-collapsible--quiet .crm-collapsible__header { background: transparent; }
.crm-collapsible--quiet .crm-collapsible__header:hover { background: var(--crm-surface-1); }
.crm-collapsible--quiet .crm-collapsible__title {
    color: var(--crm-text-muted);
    font-weight: var(--crm-weight-medium);
}

@media (max-width: 640px) {
    .crm-collapsible__header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "title toggle" "meta meta";
        gap: var(--crm-sp-1) var(--crm-sp-3);
    }
    .crm-collapsible__title  { grid-area: title; }
    .crm-collapsible__toggle { grid-area: toggle; }
    .crm-collapsible__meta   { grid-area: meta; justify-content: flex-start; gap: var(--crm-sp-3); }
}

.crm-page-intro {
    margin-bottom: var(--crm-sp-5);
    padding: var(--crm-sp-3) var(--crm-sp-4);
    background: var(--crm-surface-1);
    border-left: 3px solid var(--crm-primary);
    border-radius: var(--crm-radius);
}
.crm-page-intro__lede {
    margin: 0;
    font-size: var(--crm-text-base);
    color: var(--crm-text);
}
.crm-page-intro__hint {
    margin: var(--crm-sp-1) 0 0;
    font-size: var(--crm-text-sm);
    color: var(--crm-text-muted);
}

.crm-flex            { display: flex; }

.crm-flex-wrap       { flex-wrap: wrap; }
.crm-flex-1          { flex: 1; min-width: 0; }

.crm-items-center    { align-items: center; }

.crm-justify-between { justify-content: space-between; }

.crm-gap-2 { gap: var(--crm-sp-2); }
.crm-gap-3 { gap: var(--crm-sp-3); }

.crm-mb-3 { margin-bottom: var(--crm-sp-3); }
.crm-mb-4 { margin-bottom: var(--crm-sp-4); }

.crm-mt-1 { margin-top: var(--crm-sp-1); }

.crm-mt-3 { margin-top: var(--crm-sp-3); }
.crm-mt-4 { margin-top: var(--crm-sp-4)!important; }

.crm-p-4 { padding: var(--crm-sp-4); }
.crm-p-5 { padding: var(--crm-sp-5); }

.crm-text-right      { text-align: right; }
.crm-text-muted      { color: var(--crm-text-muted); }
.crm-text-xs         { font-size: var(--crm-text-xs); }
.crm-text-sm         { font-size: var(--crm-text-sm); }
.crm-truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* File-format tag ("png", "pdf"). window.crmFileFormatLabel answers the
   canonical uppercase name; lowercasing is presentation, so it lives here and
   every file surface reads the same. */
.crm-file-format     { text-transform: lowercase; }

.crm-display-serif {
    font-family: var(--crm-font-display);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

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

.crm-val--positive { color: var(--crm-success); }
.crm-val--negative { color: var(--crm-danger); }

.crm-layout__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--crm-ease);
}
.crm-layout__hamburger:hover {
    background: var(--crm-surface-2);
}
.crm-layout__hamburger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--crm-text-secondary);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.crm-layout__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.crm-fade-enter        { transition: opacity 0.2s ease; }
.crm-fade-enter-start  { opacity: 0; }
.crm-fade-enter-end    { opacity: 1; }
.crm-fade-leave         { transition: opacity 0.15s ease; }
.crm-fade-leave-start  { opacity: 1; }
.crm-fade-leave-end    { opacity: 0; }

@media (max-width: 768px) {

    .crm-layout:has(.crm-chat) {
        min-height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .crm-layout__hamburger { display: flex; }

    .crm-layout__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        border-right: 1px solid var(--crm-border);
        box-shadow: var(--crm-shadow-lg);
    }
    .crm-layout__sidebar--open {
        transform: translateX(0);
    }
    .crm-layout__sidebar-inner {
        position: static;
        height: 100%;
    }

    .crm-layout__content {
        padding: var(--crm-sp-3);
    }

    .crm-layout__title {
        font-size: var(--crm-text-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .crm-layout__topbar .crm-notify__bell,
    .crm-layout__hamburger {
        padding: var(--crm-sp-1);
    }

    .crm-kanban { flex-direction: column; }
    .crm-kanban__col { flex: 0 0 auto; width: 100%; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    .crm-layout__sidebar { transition: none; }
    .crm-layout__backdrop { transition: none; }
    .crm-layout__hamburger-bar { transition: none; }
}

@media (max-width: 1400px) {
    .crm-layout__backdrop { display: block; }
}

@media (max-width: 768px) {
    .crm-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        width: min(320px, 88vw);
        z-index: 200;
        display: flex;
        flex-direction: column;
        background: var(--crm-surface);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        will-change: transform;

        padding: 0 var(--crm-sp-3);
        overflow: hidden;
    }
    .crm-drawer--left  { left: 0;  border-right: 1px solid var(--crm-border); transform: translateX(-100%); }
    .crm-drawer--right { right: 0; border-left:  1px solid var(--crm-border); transform: translateX(100%); }
    .crm-drawer--open  {
        transform: translateX(0);

        box-shadow: var(--crm-shadow-lg);
    }

    .crm-drawer__title {
        font-weight: var(--crm-weight-semibold);
        color: var(--crm-text);
        font-size: var(--crm-text-base);
    }

}

.crm-drawer__header { display: none; }
@media (max-width: 768px) {
    .crm-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--crm-sp-2);
        padding: var(--crm-sp-3);
        border-bottom: 1px solid var(--crm-border);
        flex-shrink: 0;
        background: var(--crm-surface);

        margin: 0 calc(var(--crm-sp-3) * -1);
    }

    .crm-drawer__close {
        color: var(--crm-text);
        border: 1px solid var(--crm-border);
        margin-right: var(--crm-sp-2);
    }
    .crm-drawer__close:hover {
        background: var(--crm-surface-2);
        color: var(--crm-text);
    }
}
@media (prefers-reduced-motion: reduce) {
    .crm-drawer { transition: none; }
}

@media (max-width: 1400px) {
    .crm-chat__facts.crm-drawer--right,
    .crm-chat__tree-drawer.crm-drawer--right,
    .crm-chat__artifacts.crm-drawer--right {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        width: min(360px, 88vw);
        max-height: none;
        max-width: none;
        min-width: 0;
        z-index: 200;
        display: flex;
        flex-direction: column;
        background: var(--crm-surface);
        padding: var(--crm-sp-3);
        border-left: 1px solid var(--crm-border);
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        will-change: transform;
    }
    .crm-chat__facts.crm-drawer--open,
    .crm-chat__tree-drawer.crm-drawer--open,
    .crm-chat__artifacts.crm-drawer--open {
        transform: translateX(0);
        box-shadow: var(--crm-shadow-lg);
    }

    .crm-chat__facts .crm-drawer__header,
    .crm-chat__tree-drawer .crm-drawer__header,
    .crm-chat__artifacts .crm-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--crm-sp-2);
        padding: var(--crm-sp-3);
        border-bottom: 1px solid var(--crm-border);
        flex-shrink: 0;
        background: var(--crm-surface);
        margin: calc(var(--crm-sp-3) * -1) calc(var(--crm-sp-3) * -1) 0;
    }
    .crm-chat__facts .crm-drawer__close,
    .crm-chat__tree-drawer .crm-drawer__close,
    .crm-chat__artifacts .crm-drawer__close {
        color: var(--crm-text);
        border: 1px solid var(--crm-border);
    }
    .crm-chat__facts .crm-drawer__close:hover,
    .crm-chat__tree-drawer .crm-drawer__close:hover,
    .crm-chat__artifacts .crm-drawer__close:hover {
        background: var(--crm-surface-2);
        color: var(--crm-text);
    }

    .crm-chat__facts .crm-desktop-only,
    .crm-chat__tree-drawer .crm-desktop-only,
    .crm-chat__artifacts .crm-desktop-only { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .crm-chat__facts.crm-drawer--right,
    .crm-chat__tree-drawer.crm-drawer--right,
    .crm-chat__artifacts.crm-drawer--right { transition: none; }
}

.crm-mobile-only  { display: none; }
@media (max-width: 768px) {
    .crm-mobile-only  { display: inline-flex; }
    .crm-desktop-only { display: none; }
}

.crm-show-from-500 { display: none; }
@media (min-width: 500px) {
    .crm-show-from-500 { display: inline-flex; }
}

.crm-widget__nav {
    position: sticky;
    top: 46px;
    z-index: 100;
    background: var(--crm-bg);
}
.crm-tw__tabs { margin-bottom: var(--crm-sp-4); }

.crm-tw__mode { margin-bottom: var(--crm-sp-3); }
.crm-tw__action, .crm-tw__manual { margin-top: var(--crm-sp-2); }

.crm-tw__project-only-hint {
    font-size: var(--crm-text-sm);
    color: var(--crm-text-muted);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    background: var(--crm-surface-2);
    border: 1px dashed var(--crm-border);
    border-radius: var(--crm-radius);
    margin-top: var(--crm-sp-2);
    margin-bottom: var(--crm-sp-2);
}

.crm-tw__task-name--project-only,
.crm-tw__task-entry--project-only .crm-tw__task-name {
    font-style: italic;
    color: var(--crm-text-muted);
}

.crm-tw__pd-list--project-only .crm-tw__pd-list-name {
    font-style: italic;
    color: var(--crm-text-muted);
}
.crm-tw__pd-track-project {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-3);
    flex-wrap: wrap;
    padding: var(--crm-sp-3);
    background: var(--crm-surface-2);
    border: 1px dashed var(--crm-border);
    border-radius: var(--crm-radius);
    margin-bottom: var(--crm-sp-3);
}
.crm-tw__pd-track-project__hint {
    font-size: var(--crm-text-sm);
    color: var(--crm-text-muted);
}

.crm-tw__msg {
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-radius: var(--crm-radius);
    font-size: var(--crm-text-sm);
    margin-top: var(--crm-sp-2);
}
.crm-tw__msg--success { background: var(--crm-success-soft); color: var(--crm-success-text); }
.crm-tw__msg--error { background: var(--crm-danger-soft); color: var(--crm-danger); }

.crm-tw__daily-strip {
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: var(--crm-sp-3);
    margin-bottom: var(--crm-sp-3);
}
.crm-tw__daily-strip__head {
    display: flex; align-items: baseline; gap: var(--crm-sp-2);
    margin-bottom: var(--crm-sp-2);
}
.crm-tw__daily-strip__icon { font-size: 1rem; line-height: 1; }
.crm-tw__daily-strip__label {
    flex: 1; min-width: 0;
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: var(--crm-weight-semibold);
}
.crm-tw__daily-strip__current {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: var(--crm-weight-bold);
    color: var(--crm-primary);
    font-variant-numeric: tabular-nums;
}
.crm-tw__daily-strip__bar-wrap {
    display: flex; align-items: center; gap: var(--crm-sp-2);
}
.crm-tw__daily-strip__bar {
    flex: 1; min-width: 0;
    height: 8px;
    background: var(--crm-surface-2);
    border-radius: var(--crm-radius-full);
    overflow: hidden;
}
.crm-tw__daily-strip__bar-fill {
    height: 100%;
    background: var(--crm-primary);
    border-radius: var(--crm-radius-full);
    transition: width 0.4s ease;
}
.crm-tw__daily-strip__goal {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.crm-tw__daily-strip--hit .crm-tw__daily-strip__current { color: var(--crm-success); }
.crm-tw__daily-strip--hit .crm-tw__daily-strip__bar-fill { background: var(--crm-success); }

.crm-tw__quick-resume { margin-bottom: var(--crm-sp-3); }
.crm-tw__quick-resume__label {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: var(--crm-weight-semibold);
    margin-bottom: var(--crm-sp-2);
}
.crm-tw__quick-resume__chips {
    display: flex; flex-wrap: wrap;
    gap: var(--crm-sp-2);
}
.crm-tw__resume-chip {
    display: inline-flex; align-items: center;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    color: var(--crm-text);
    font-size: var(--crm-text-sm);
    cursor: pointer;
    transition: background var(--crm-ease), border-color var(--crm-ease);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: left;
}
.crm-tw__resume-chip:hover { background: var(--crm-primary-soft); border-color: var(--crm-primary); }
.crm-tw__resume-chip__dot {
    width: 0.6rem; height: 0.6rem;
    border-radius: var(--crm-radius-full);
    flex-shrink: 0;
}
.crm-tw__resume-chip__body {
    display: flex; flex-direction: column; min-width: 0;
    line-height: 1.2;
}
.crm-tw__resume-chip__proj {
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-tw__resume-chip__task {
    font-weight: var(--crm-weight-semibold);
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-tw__resume-chip__hours {
    margin-left: auto;
    color: var(--crm-primary);
    font-variant-numeric: tabular-nums;
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    flex-shrink: 0;
}

.crm-timer-banner--stacked {
    flex-direction: column; gap: var(--crm-sp-2);
    align-items: stretch;
}
.crm-timer-banner__head {
    display: flex; align-items: center; gap: var(--crm-sp-3);
    width: 100%; min-width: 0;
}
.crm-timer-banner__head .crm-timer-banner__info { flex: 1; min-width: 0; }
.crm-timer-banner__head .crm-timer-banner__project,
.crm-timer-banner__head .crm-timer-banner__task {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.crm-timer-banner__clock-wrap {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.crm-timer-banner__pomodoro-ring {
    position: absolute; inset: -8px;
    width: calc(100% + 16px); height: calc(100% + 16px);
    pointer-events: none;
}
.crm-timer-banner__pomodoro-ring-track { stroke: var(--crm-border); }
.crm-timer-banner__pomodoro-ring-fill {
    stroke: var(--crm-warning);
    transition: stroke-dashoffset 0.6s linear;
}
.crm-timer-banner__stop { flex-shrink: 0; }
.crm-timer-banner__foot {
    display: flex; align-items: center; gap: var(--crm-sp-2);
    width: 100%; min-width: 0;
}
.crm-timer-banner__note-icon {
    color: var(--crm-text-muted);
    font-size: var(--crm-text-base);
    flex-shrink: 0;
}
.crm-timer-banner__note-input {
    flex: 1; min-width: 0;
    padding: var(--crm-sp-1) var(--crm-sp-2);
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    color: var(--crm-text);
    font-size: var(--crm-text-sm);
}
.crm-timer-banner__note-input:focus {
    outline: none;
    border-color: var(--crm-primary);
}
.crm-timer-banner__note-status {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}
.crm-timer-banner__focus-toggle {
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-full);
    padding: var(--crm-sp-1) var(--crm-sp-2);
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
    color: var(--crm-text);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-medium);
    flex-shrink: 0;
    transition: background var(--crm-ease), border-color var(--crm-ease), color var(--crm-ease);
}
.crm-timer-banner__focus-toggle:hover { background: var(--crm-warning-soft); border-color: var(--crm-warning); }
.crm-timer-banner__focus-toggle--on {
    background: var(--crm-warning-soft);
    border-color: var(--crm-warning);
    color: var(--crm-warning-text);
}

.crm-tw__workflow {
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: var(--crm-sp-3);
}
.crm-tw__workflow__head {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: var(--crm-weight-semibold);
    margin-bottom: var(--crm-sp-3);
}
.crm-tw__workflow__body > .crm-field + .crm-field,
.crm-tw__workflow__body > .crm-field + .crm-radio-group,
.crm-tw__workflow__body > .crm-radio-group + .crm-tw__action,
.crm-tw__workflow__body > .crm-radio-group + .crm-tw__manual {
    margin-top: var(--crm-sp-3);
}

.crm-tw__month-strip {
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: var(--crm-sp-3);
    margin-bottom: var(--crm-sp-3);
}
.crm-tw__month-strip__head {
    display: flex; align-items: baseline; gap: var(--crm-sp-2);
    margin-bottom: var(--crm-sp-2);
}
.crm-tw__month-strip__icon { font-size: 1rem; line-height: 1; }
.crm-tw__month-strip__label {
    flex: 1; min-width: 0;
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: var(--crm-weight-semibold);
}
.crm-tw__month-strip__current {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: var(--crm-weight-bold);
    color: var(--crm-primary);
    font-variant-numeric: tabular-nums;
}
.crm-tw__month-strip__pct {
    font-size: var(--crm-text-sm);
    color: var(--crm-text-muted);
    font-variant-numeric: tabular-nums;
    margin-left: var(--crm-sp-2);
}
.crm-tw__month-strip__bar-wrap {
    display: flex; align-items: center; gap: var(--crm-sp-2);
}
.crm-tw__month-strip__bar {
    flex: 1; min-width: 0;
    height: 8px;
    background: var(--crm-surface-2);
    border-radius: var(--crm-radius-full);
    overflow: hidden;
}
.crm-tw__month-strip__bar-fill {
    height: 100%;
    background: var(--crm-primary);
    border-radius: var(--crm-radius-full);
    transition: width 0.4s ease;
}
.crm-tw__month-strip__goal {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.crm-tw__month-strip__overtime {
    margin-top: var(--crm-sp-2);
    display: inline-block;
    padding: 2px var(--crm-sp-2);
    background: var(--crm-warning-soft);
    color: var(--crm-warning-text);
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.crm-tw__month-strip--hit .crm-tw__month-strip__current { color: var(--crm-success); }
.crm-tw__month-strip--hit .crm-tw__month-strip__bar-fill { background: var(--crm-success); }

.crm-tw__cmdk-pill {
    position: fixed;
    right: var(--crm-sp-4); bottom: var(--crm-sp-4);
    z-index: 1000;
    background: var(--crm-primary);
    color: var(--crm-text-on-primary);
    border: none;
    border-radius: var(--crm-radius-full);
    padding: var(--crm-sp-2) var(--crm-sp-4);
    font-weight: var(--crm-weight-semibold);
    font-size: var(--crm-text-sm);
    box-shadow: var(--crm-shadow-md);
    cursor: pointer;
    transition: transform var(--crm-ease), box-shadow var(--crm-ease);
}
.crm-tw__cmdk-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--crm-shadow-lg);
}
.crm-tw__cmdk-overlay {
    position: fixed; inset: 0;
    background: var(--crm-overlay);
    z-index: 1001;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 10vh var(--crm-sp-4) var(--crm-sp-4);
}
.crm-tw__cmdk {
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-lg);
    width: 100%; max-width: 36rem;
    max-height: 70vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.crm-tw__cmdk__search-row {
    display: flex; align-items: center; gap: var(--crm-sp-2);
    padding: var(--crm-sp-3); border-bottom: 1px solid var(--crm-border);
}
.crm-tw__cmdk__icon { color: var(--crm-text-muted); font-size: var(--crm-text-lg); }
.crm-tw__cmdk__input {
    flex: 1; min-width: 0;
    background: transparent;
    border: none; outline: none;
    color: var(--crm-text);
    font-size: var(--crm-text-base);
    padding: var(--crm-sp-1) 0;
}
.crm-tw__cmdk__close {
    background: transparent; border: none;
    color: var(--crm-text-muted); cursor: pointer;
    font-size: var(--crm-text-base);
    padding: var(--crm-sp-1) var(--crm-sp-2);
    border-radius: var(--crm-radius-sm);
}
.crm-tw__cmdk__close:hover { color: var(--crm-text); background: var(--crm-surface-1); }
.crm-tw__cmdk__list {
    flex: 1; overflow-y: auto;
    padding: var(--crm-sp-1);
}
.crm-tw__cmdk__row {
    display: flex; align-items: center; gap: var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-radius: var(--crm-radius-sm);
    cursor: pointer;
    color: var(--crm-text);
    font-size: var(--crm-text-sm);
}
.crm-tw__cmdk__row--active { background: var(--crm-primary-soft); }
.crm-tw__cmdk__row-proj { color: var(--crm-text-muted); }
.crm-tw__cmdk__row-sep { color: var(--crm-text-muted); }
.crm-tw__cmdk__row-task { font-weight: var(--crm-weight-medium); }
.crm-tw__cmdk__empty {
    padding: var(--crm-sp-4);
    text-align: center;
    color: var(--crm-text-muted);
    font-size: var(--crm-text-sm);
}
.crm-tw__cmdk__hint {
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-top: 1px solid var(--crm-border);
    color: var(--crm-text-muted);
    font-size: var(--crm-text-xs);
    text-align: center;
}

@media (max-width: 480px) {
    .crm-tw__daily-strip__head,
    .crm-tw__month-strip__head { flex-wrap: wrap; gap: var(--crm-sp-1); }
    .crm-tw__daily-strip__current,
    .crm-tw__month-strip__current { font-size: 1.25rem; }
    .crm-tw__quick-resume__chips { gap: var(--crm-sp-1); }
    .crm-tw__resume-chip { padding: var(--crm-sp-1) var(--crm-sp-2); }
    .crm-tw__resume-chip__proj,
    .crm-tw__resume-chip__task { max-width: 8rem; }
    .crm-timer-banner__head { flex-wrap: wrap; }
    .crm-timer-banner__foot { flex-wrap: wrap; }
    .crm-timer-banner__focus-toggle { padding: var(--crm-sp-1); }
    .crm-tw__workflow { padding: var(--crm-sp-2); }
    .crm-tw__cmdk-pill { right: var(--crm-sp-2); bottom: var(--crm-sp-2); }
    .crm-tw__cmdk-overlay { padding: 6vh var(--crm-sp-2) var(--crm-sp-2); }
}

.crm-tw__day { margin-bottom: var(--crm-sp-4); }
.crm-tw__day-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--crm-sp-1) 0; border-bottom: 1px solid var(--crm-border);
}
.crm-tw__day-date { font-weight: var(--crm-weight-bold); font-size: var(--crm-text-base); color: var(--crm-text); }
.crm-tw__day-hours { font-weight: var(--crm-weight-bold); color: var(--crm-primary); }

.crm-tw__proj { margin-top: var(--crm-sp-1); padding-left: var(--crm-sp-2); }

.crm-tw__proj-head {
    display: flex; align-items: center; gap: var(--crm-sp-2);
    margin-bottom: 2px;
}
.crm-tw__proj-name { font-weight: var(--crm-weight-semibold); font-size: var(--crm-text-sm); color: var(--crm-text-secondary); min-width: 0; flex: 1; }
.crm-tw__proj-untasked {
    font-size: var(--crm-text-xs); color: var(--crm-text-faint);
    font-style: italic; white-space: nowrap;
}
.crm-tw__proj-hours { font-size: var(--crm-text-sm); font-weight: var(--crm-weight-semibold); color: var(--crm-text-secondary); white-space: nowrap; }

.crm-tw__task-entry {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--crm-sp-1) 0 var(--crm-sp-1) var(--crm-sp-3); font-size: var(--crm-text-sm);
}
.crm-tw__task-name { color: var(--crm-text-secondary); display: flex; align-items: center; gap: var(--crm-sp-1); min-width: 0; flex: 1; }
.crm-tw__task-budget { color: var(--crm-text-faint); font-size: var(--crm-text-xs); white-space: nowrap; margin-left: auto; margin-right: var(--crm-sp-2); }
.crm-icon-btn--track { font-size: 12px; vertical-align: middle; }
.crm-tw__task-hours { color: var(--crm-text); font-weight: var(--crm-weight-semibold); white-space: nowrap; }

.crm-tw__entry-detail {
    display: flex; align-items: center; gap: var(--crm-sp-1);
    padding: 2px 0 2px var(--crm-sp-5); font-size: var(--crm-text-xs); color: var(--crm-text-muted);
}
.crm-tw__entry-type {
    display: inline-block; width: 16px; height: 16px; line-height: 16px;
    text-align: center; border-radius: var(--crm-radius-sm); font-size: 10px; font-weight: var(--crm-weight-bold);
}
.crm-tw__entry-type--timer { background: var(--crm-primary-soft); color: var(--crm-primary-text); }
.crm-tw__entry-type--manual { background: var(--crm-info-soft); color: var(--crm-info-text); }
.crm-tw__entry-hours { font-weight: var(--crm-weight-semibold); color: var(--crm-text-secondary); }
.crm-tw__entry-time { color: var(--crm-text-muted); }
.crm-tw__entry-desc { color: var(--crm-text-faint); font-style: italic; }
.crm-tw__entry-edit {
    background: none; border: none; cursor: pointer;
    font-size: 18px; padding: 0 2px; line-height: 0;
    color: var(--crm-text-faint); opacity: 0.5;
    transition: opacity var(--crm-ease);
}
.crm-tw__entry-edit:hover { opacity: 1; color: var(--crm-primary); }

.crm-tw__entry-detail--running {
    background: var(--crm-primary-soft);
    border-radius: var(--crm-radius-sm);
    padding-top: var(--crm-sp-1);
    padding-bottom: var(--crm-sp-1);
    margin: 2px 0;
}
.crm-tw__entry-hours--running {
    color: var(--crm-primary);
    font-variant-numeric: tabular-nums;
}
.crm-tw__entry-running-badge {
    color: var(--crm-primary);
    font-weight: var(--crm-weight-bold);
    font-size: var(--crm-text-xs);
    animation: crm-tw-pulse 2s ease-in-out infinite;
}
@keyframes crm-tw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.crm-tw__modal-type { margin-bottom: var(--crm-sp-3); }

.crm-tw__empty { text-align: center; color: var(--crm-text-faint); font-style: italic; padding: var(--crm-sp-6) 0; }
.crm-tw__loading { text-align: center; color: var(--crm-text-faint); padding: var(--crm-sp-6) 0; }

.crm-tw__projects-filters { margin-bottom: var(--crm-sp-3); }
.crm-tw__projects-filters .crm-checkbox { margin-bottom: var(--crm-sp-1); margin-right: var(--crm-sp-2); }
.crm-tw__pd-list { margin-bottom: var(--crm-sp-4); }
.crm-tw__pd-list-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--crm-sp-1) 0; border-bottom: 1px solid var(--crm-border);
    font-weight: var(--crm-weight-bold); font-size: var(--crm-text-base);
    color: var(--crm-text);
}
.crm-tw__pd-list-hours { color: var(--crm-primary); }
.crm-tw__pd-list-budget { color: var(--crm-text-faint); font-size: var(--crm-text-sm); white-space: nowrap; margin-right: var(--crm-sp-2); }
.crm-tw__pd-month { margin-top: var(--crm-sp-1); padding-left: var(--crm-sp-2); }
.crm-tw__pd-month-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--crm-sp-1) 0; font-size: var(--crm-text-sm); font-weight: var(--crm-weight-semibold);
    color: var(--crm-text-secondary);
}
.crm-tw__pd-month-hours { color: var(--crm-primary); font-weight: var(--crm-weight-semibold); }
.crm-tw__pd-task {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--crm-sp-1) 0 var(--crm-sp-1) var(--crm-sp-3); font-size: var(--crm-text-sm);
}
.crm-tw__pd-task--done { text-decoration: line-through; opacity: 0.5; }
.crm-tw__pd-task-name { color: var(--crm-text-secondary); display: flex; align-items: center; gap: var(--crm-sp-1); min-width: 0; flex: 1; }
.crm-tw__pd-task-budget { color: var(--crm-text-faint); font-size: var(--crm-text-xs); white-space: nowrap; margin-right: var(--crm-sp-2); }
.crm-tw__pd-task-hours { color: var(--crm-text); font-weight: var(--crm-weight-semibold); white-space: nowrap; }

.crm-work-report { max-width: 1200px; margin: 0 auto; }
.crm-work-report__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--crm-sp-3); margin-bottom: var(--crm-sp-5); }
.crm-wr-user__charts-row { display: flex; align-items: center; gap: var(--crm-sp-6); margin-bottom: var(--crm-sp-4); flex-wrap: wrap; }
.crm-wr-user__pie { flex: 0 0 180px; }
.crm-wr-user__info { flex: 1; min-width: 160px; }
.crm-wr-user__bar { margin-top: var(--crm-sp-2); }
.crm-wr-detail { margin-top: var(--crm-sp-4); }
.crm-wr-detail__title { font-size: var(--crm-text-sm); font-weight: var(--crm-weight-semibold); color: var(--crm-text-muted); margin: 0 0 var(--crm-sp-2); text-transform: uppercase; letter-spacing: 0.04em; }
.crm-wr-detail__project-row td { background: var(--crm-surface-2); }
.crm-wr-summary__money { font-size: var(--crm-text-base); color: var(--crm-text); }
.crm-wr-summary__charts { display: flex; flex-direction: column; gap: var(--crm-sp-5); }
.crm-wr-summary__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--crm-sp-5); }
.crm-wr-summary__chart { display: flex; flex-direction: column; gap: var(--crm-sp-2); min-width: 0; }

.crm-wr-summary__canvas { position: relative; height: 260px; width: 100%; }
.crm-wr-summary__canvas canvas { max-width: 100%; }
@media (max-width: 720px) {
    .crm-wr-summary__split { grid-template-columns: 1fr; }
}

.crm-att-report { max-width: 1200px; margin: 0 auto; }
.crm-att-report__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--crm-sp-3); margin-bottom: var(--crm-sp-3); }
.crm-att-report__legend { display: flex; gap: var(--crm-sp-4); flex-wrap: wrap; margin-bottom: var(--crm-sp-4); font-size: var(--crm-text-sm); }
.crm-ar-legend__item { padding: 2px var(--crm-sp-2); border-radius: var(--crm-radius-sm); font-weight: var(--crm-weight-medium); }
.crm-ar-legend--gap { background: var(--crm-warning-soft); color: var(--crm-warning-text); border: 1px solid var(--crm-warning); }
.crm-ar-legend--missing { background: var(--crm-danger-soft); color: var(--crm-danger); border: 1px solid var(--crm-danger); }
.crm-ar-legend--late { background: var(--crm-warning-soft); color: var(--crm-warning); border: 1px solid var(--crm-warning); }
.crm-ar-legend--no-dep { background: var(--crm-info-soft); color: var(--crm-info-text); border: 1px solid var(--crm-info); }
.crm-ar-user__badge { display: inline-block; padding: 1px var(--crm-sp-1); border-radius: var(--crm-radius-sm); font-size: var(--crm-text-xs); font-weight: var(--crm-weight-bold); }
.crm-ar-user__badge--ok { background: var(--crm-success-soft); color: var(--crm-success-text); }
.crm-ar-user__badge--warn { background: var(--crm-warning-soft); color: var(--crm-warning-text); }
.crm-ar-user__badge--bad { background: var(--crm-danger-soft); color: var(--crm-danger); }
.crm-ar-table { width: 100%; border-collapse: collapse; font-size: var(--crm-text-sm); color: var(--crm-text); }
.crm-ar-table th { background: var(--crm-surface-1); padding: var(--crm-sp-1) var(--crm-sp-2); text-align: left; font-weight: var(--crm-weight-semibold); border-bottom: 2px solid var(--crm-border-strong); color: var(--crm-text-secondary); }
.crm-ar-table td { padding: var(--crm-sp-1) var(--crm-sp-2); border-bottom: 1px solid var(--crm-border); }
.crm-ar-table tr.crm-ar-row--weekend { background: var(--crm-surface-1); color: var(--crm-text-faint); }
.crm-ar-table tr.crm-ar-row--alert-gap td { background: var(--crm-warning-soft); }
.crm-ar-table tr.crm-ar-row--alert-missing td { background: var(--crm-danger-soft); }
.crm-ar-table .crm-ar-alert { font-size: var(--crm-text-sm); margin-left: var(--crm-sp-1); }
.crm-ar-alert--gap { color: var(--crm-warning); }
.crm-ar-alert--missing { color: var(--crm-danger); }
.crm-ar-alert--late { color: var(--crm-warning); }
.crm-ar-alert--no-dep { color: var(--crm-info); }

.crm-att-report__edit { display: flex; flex-direction: column; gap: var(--crm-sp-4); }
.crm-att-report__edit-context { margin-left: var(--crm-sp-2); font-weight: 400; }
.crm-ar-row__actions { white-space: nowrap; text-align: right; }
.crm-ar-row__actions .crm-ar-edit { margin-left: var(--crm-sp-1); opacity: 0.55; }
.crm-ar-row__actions .crm-ar-edit:hover { opacity: 1; }

.crm-schedule { margin-bottom: var(--crm-sp-6); }
.crm-schedule__title { margin-bottom: var(--crm-sp-4); color: var(--crm-text); }
.crm-schedule__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--crm-border); border: 1px solid var(--crm-border); border-radius: var(--crm-radius); overflow: hidden; }
.crm-schedule__header { background: var(--crm-surface-1); padding: var(--crm-sp-2); text-align: center; font-weight: var(--crm-weight-semibold); font-size: var(--crm-text-sm); color: var(--crm-text-secondary); }
.crm-schedule__cell { background: var(--crm-bg); padding: var(--crm-sp-2); min-height: 80px; vertical-align: top; }
.crm-schedule__cell--empty { background: var(--crm-surface-1); }
.crm-schedule__cell--today { background: var(--crm-primary-soft); }
.crm-schedule__date { font-size: var(--crm-text-sm); font-weight: var(--crm-weight-semibold); color: var(--crm-text-secondary); margin-bottom: var(--crm-sp-1); }
.crm-schedule__slot { background: var(--crm-primary-soft); border-left: 3px solid var(--crm-primary); border-radius: var(--crm-radius-sm); padding: 2px var(--crm-sp-1); margin-bottom: 2px; font-size: var(--crm-text-xs); }
.crm-schedule__time { color: var(--crm-text-muted); }
.crm-schedule__task { color: var(--crm-text); font-weight: var(--crm-weight-medium); }
.crm-schedule__hours { float: right; color: var(--crm-primary); font-weight: var(--crm-weight-semibold); }
.crm-schedule__variance { font-size: var(--crm-text-xs); color: var(--crm-text-faint); margin-top: var(--crm-sp-1); }

.crm-kanban-wrap { padding-bottom: var(--crm-sp-4); }
.crm-kanban__scroll { overflow-x: auto; }

.crm-kanban {
    display: flex;
    gap: var(--crm-sp-3);
    align-items: flex-start;
    min-width: max-content;
}

.crm-kanban__col {
    width: 239px;
    flex-shrink: 0;

    background: var(--crm-bg-alt);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
}

.crm-kanban__col-header {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    border-bottom: 1px solid var(--crm-border);
}

.crm-kanban__col-count {
    font-size: 11px;
    font-weight: 600;
    background: var(--crm-surface-3);
    color: var(--crm-text-muted);
    border-radius: var(--crm-radius-full);
    padding: 1px 7px;
    margin-left: auto;
}

.crm-kanban__cards {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-2);
    min-height: 64px;
}

.crm-kanban__add-btn {
    display: block;
    width: calc(100% - (var(--crm-sp-2) * 2));
    margin: 0 var(--crm-sp-2) var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    background: transparent;
    border: 1px dashed var(--crm-border);
    border-radius: var(--crm-radius-sm);
    color: var(--crm-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-align: left;
}
.crm-kanban__add-btn:hover {
    background: var(--crm-surface-2);
    color: var(--crm-text);
    border-color: var(--crm-border-strong, var(--crm-border));
}

.crm-kanban__card {
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    cursor: grab;
    box-shadow: var(--crm-shadow-sm);
    transition: box-shadow .15s, transform .12s;
}

.crm-kanban__card:active { cursor: grabbing; }
.crm-kanban__card:hover  {
    box-shadow: var(--crm-shadow-md);
    transform: translateY(-1px);
}
.crm-kanban-ghost        { opacity: .3; }

.crm-kanban__card-due {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 7px;
    border-radius: var(--crm-radius-full, 999px);
    background: var(--crm-surface-2);
    color: var(--crm-text-muted);
    margin-bottom: var(--crm-sp-1);
    letter-spacing: .02em;
}

.crm-kanban__card-due--overdue {
    background: var(--crm-danger-soft);
    color: var(--crm-due-past, var(--crm-danger));
}

.crm-kanban__card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--crm-text);
    line-height: 1.35;
    margin-bottom: var(--crm-sp-3);
}

.crm-kanban__cards[data-status="done"] .crm-kanban__card-title {
    text-decoration: line-through;
    opacity: .55;
}

.crm-kanban__card-meta {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    flex-wrap: wrap;
    justify-content: space-between;
}

.crm-kanban__card-project {
    font-size: 11px;
    color: var(--crm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.crm-kanban__card-progress {
    flex: 1;
    min-width: 0;
    max-width: 33%;
}
.crm-kanban__card-progress .crm-progress {
    margin-bottom: 2px;
}
.crm-kanban__card-progress .crm-task__hours {
    font-size: 11px;
    color: var(--crm-text-muted);
}

.crm-kanban__card-avatars {
    display: flex;
    gap: 2px;
}
.crm-kanban__card-avatar {
    width: 20px;
    height: 20px;
    border-radius: var(--crm-radius-full);
    color: var(--crm-text-on-primary);
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crm-kanban__empty {
    font-size: 12px;
    color: var(--crm-text-faint);
    text-align: center;
    padding: var(--crm-sp-3) 0;
}

.crm-kanban__card--project {
    border-left: 3px solid var(--crm-primary);
    background: var(--crm-surface-1);
}
.crm-kanban__card--project:hover {
    box-shadow: var(--crm-shadow-sm);
    border-left-color: var(--crm-primary-hover);
}

/* A card whose move the server would refuse. The card still opens — only the
   drag affordance goes, so the cursor must stop promising one. */
.crm-kanban__card--locked,
.crm-kanban__card--locked:active { cursor: pointer; }

.crm-kanban__card-client {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 7px;
    border-radius: var(--crm-radius-full, 999px);
    background: var(--crm-primary-soft);
    color: var(--crm-primary-text);
    margin-bottom: var(--crm-sp-1);
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.crm-search { position: relative; }

.crm-search__wrap {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    margin-bottom: var(--crm-sp-3);
}

.crm-search__input { flex: 1; }

.crm-search__kbd { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.crm-search__kbd kbd {
    font-size: 10px;
    font-family: inherit;
    background: var(--crm-surface-2);
    border: 1px solid var(--crm-border);
    border-radius: 3px;
    padding: 1px 4px;
    color: var(--crm-text-secondary);
}

.crm-search__results {
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow-md);
    margin-bottom: var(--crm-sp-3);

    max-height: min(70vh, 480px);
    overflow-y: auto;
    overflow-x: hidden;
}

@media (min-width: 769px) {
    .crm-search__results { max-height: 80vh; }
}

.crm-command-palette {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9000;

    background: transparent;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: background .24s ease,
                backdrop-filter .24s ease,
                -webkit-backdrop-filter .24s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px var(--crm-sp-4) var(--crm-sp-4);
}
.crm-command-palette.crm-cp--active {
    background: var(--crm-overlay);
    -webkit-backdrop-filter: blur(5px) saturate(1.05);
    backdrop-filter: blur(5px) saturate(1.05);
}

.crm-command-palette__box {
    background: var(--crm-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-xl);
    width: 100%;
    max-width: 560px;

    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    transform-origin: center center;
}

.crm-command-palette__box--morphing {
    transition: none;
    will-change: transform, opacity;
}
.crm-command-palette__box--settling {
    transition: transform .42s cubic-bezier(.34, 1.2, .48, 1),
                opacity .26s ease;
}

.crm-cp--ready .crm-command-palette__results {
    animation: crmCpRise .32s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes crmCpRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {

    .crm-command-palette { padding-top: var(--crm-sp-4); }
    .crm-command-palette.crm-cp--active {
        -webkit-backdrop-filter: blur(9px) saturate(1.12);
        backdrop-filter: blur(9px) saturate(1.12);
    }
}
@media (prefers-reduced-motion: reduce) {
    .crm-command-palette,
    .crm-command-palette__box--settling { transition: none !important; }
    .crm-cp--ready .crm-command-palette__results { animation: none !important; }
}

.crm-command-palette__input-wrap {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    padding: var(--crm-sp-3) var(--crm-sp-4);
    border-bottom: 1px solid var(--crm-border);
    flex-shrink: 0;
}

.crm-command-palette__icon { font-size: 18px; flex-shrink: 0; color: var(--crm-text-muted); }

.crm-command-palette__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--crm-text);
}

.crm-command-palette__input::placeholder { color: var(--crm-text-faint); }

.crm-command-palette__results { flex: 1 1 auto; min-height: 0; max-height: 360px; overflow-y: auto; }

.crm-command-palette__group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--crm-text-muted);
    padding: var(--crm-sp-2) var(--crm-sp-4) var(--crm-sp-1);
}

.crm-command-palette__item {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-3);
    padding: var(--crm-sp-2) var(--crm-sp-4);
    cursor: pointer;
    transition: background .1s;
    text-decoration: none;
    color: var(--crm-text);
}

.crm-command-palette__item:hover { background: var(--crm-primary-soft); }

.crm-command-palette__item-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }

.crm-command-palette__item-body { flex: 1; min-width: 0; }

.crm-command-palette__item-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-command-palette__item-sub { font-size: 11px; color: var(--crm-text-muted); }

.crm-command-palette__item--child .crm-command-palette__item-title {
    font-size: 11px;
    font-weight: 400;
}
.crm-command-palette__item--child .crm-command-palette__item-sub {
    font-size: 10px;
}

.crm-command-palette__empty {
    padding: var(--crm-sp-6) var(--crm-sp-4);
    text-align: center;
    color: var(--crm-text-muted);
    font-size: 13px;
}

.crm-command-palette__hint {
    display: flex;
    gap: var(--crm-sp-4);
    padding: var(--crm-sp-2) var(--crm-sp-4);
    border-top: 1px solid var(--crm-border);
    font-size: 11px;
    color: var(--crm-text-faint);
    flex-shrink: 0;
}

/* .crm-search now hosts only the fixed command palette overlay (sidebar pill
   owns the trigger). Legacy inline/mobile fragments are hard-hidden so no
   topbar flex-row reserves a 320px ghost. */
.crm-search__wrap,
.crm-search__mobile-btn,
.crm-search__results { display: none !important; }

.crm-daily-log { display: flex; flex-direction: column; gap: var(--crm-sp-4); }

.crm-daily-log__filter .crm-field { margin-bottom: 0; }
.crm-daily-log__filter .crm-select,
.crm-daily-log__filter .crm-input { width: auto; }

.crm-daily-log__date {
    font-size: var(--crm-text-base);
    font-weight: var(--crm-weight-semibold);
    color: var(--crm-text);
    text-transform: capitalize;
}

.crm-daily-log__actions {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    flex-wrap: wrap;
    margin-top: var(--crm-sp-2);
}

.crm-daily-log__entry {
    padding: var(--crm-sp-3) 0;
    border-bottom: 1px solid var(--crm-border);
}
.crm-daily-log__entry:last-child { border-bottom: none; }

.crm-daily-log__entry-header {
    display: flex;
    align-items: baseline;
    gap: var(--crm-sp-2);
    margin-bottom: var(--crm-sp-1);
}
.crm-daily-log__entry-date {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-semibold);
    color: var(--crm-primary);
    text-transform: capitalize;
}
.crm-daily-log__entry-author {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-medium);
    color: var(--crm-text-muted);
}

.crm-daily-log__entry-content {
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.crm-daily-log__entry-label {
    display: block;
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-semibold);
    color: var(--crm-text-muted);
    margin-bottom: var(--crm-sp-1);
}

.crm-daily-log__entry-blockers,
.crm-daily-log__entry-plan {
    font-size: var(--crm-text-sm);
    color: var(--crm-text-secondary);
    margin-top: var(--crm-sp-2);
    padding: var(--crm-sp-2) var(--crm-sp-3);
    background: var(--crm-surface-1);
    border-radius: var(--crm-radius-sm);
    border-left: 3px solid var(--crm-border);
    white-space: pre-wrap;
    word-break: break-word;
}
.crm-daily-log__entry-blockers { border-left-color: var(--crm-warning); }
.crm-daily-log__entry-plan { border-left-color: var(--crm-primary); }

.crm-client-detail { display: flex; flex-direction: column; gap: var(--crm-sp-4); }

.crm-client-detail__selector { margin-bottom: var(--crm-sp-5); }
.crm-client-detail__selector h3 { color: var(--crm-text); }
.crm-client-detail__form { display: flex; gap: var(--crm-sp-2); align-items: center; }
.crm-client-detail__select { min-width: 250px; }

.crm-client-detail__header { display: flex; align-items: center; gap: var(--crm-sp-4); margin-bottom: var(--crm-sp-4); }
.crm-client-detail__header h3 { margin: 0; color: var(--crm-text); }
.crm-client-detail__email { color: var(--crm-primary); text-decoration: none; font-size: var(--crm-text-sm); }
.crm-client-detail__email:hover { text-decoration: underline; }
.crm-client-detail__rate { font-size: var(--crm-text-sm); color: var(--crm-text-muted); }

.crm-client-detail__notes {
    font-size: var(--crm-text-sm);
    color: var(--crm-text-secondary);
    margin-bottom: var(--crm-sp-4);
}

.crm-client-detail__billing,
.crm-client-detail__contacts {
    margin-bottom: var(--crm-sp-5);
}
.crm-client-detail__billing h3,
.crm-client-detail__contacts-head h3 {
    margin: 0 0 var(--crm-sp-3);
    color: var(--crm-text);
}

.crm-client-detail__billing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crm-sp-3) var(--crm-sp-4);
    margin-bottom: var(--crm-sp-3);
}
.crm-client-detail__billing-save { margin-top: var(--crm-sp-2); }

.crm-client-detail__contacts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-sp-3);
    margin-bottom: var(--crm-sp-3);
}
.crm-client-detail__contacts-head h3 { margin: 0; }

.crm-client-detail__contact-star {
    color: var(--crm-warning);
    margin-left: var(--crm-sp-1);
}

.crm-client-detail__contact-actions {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .crm-client-detail__billing-grid {
        grid-template-columns: 1fr;
    }
}

.crm-over-budget { color: var(--crm-danger); font-weight: var(--crm-weight-semibold); }

.crm-dashboard__deadlines { margin-bottom: var(--crm-sp-4); }
.crm-dashboard__deadline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--crm-sp-1) 0;
    border-bottom: 1px solid var(--crm-border);
    font-size: var(--crm-text-sm);
}
.crm-dashboard__deadline-item:last-child { border-bottom: none; }
.crm-dashboard__deadline-task { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 768px) {
    .crm-cowork-tab__form .crm-radio-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--crm-sp-2);
    }
    .crm-cowork-tab__form .crm-select,
    .crm-cowork-tab__form .crm-input { min-width: 0; width: 100%; }
    .crm-cowork-tab .crm-table { min-width: 640px; }
}

.crm-users__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--crm-sp-3);
    margin-bottom: var(--crm-sp-3);
    padding-top: var(--crm-sp-4);
}
.crm-users__filters > .crm-field { min-width: 200px; flex: 1 1 200px; margin-bottom: 0; }

.crm-users__filters-check { flex: 1 1 200px; }
.crm-users__filters-check .crm-checkbox {
    min-height: calc(var(--crm-text-base) * var(--crm-leading-normal) + var(--crm-sp-2) * 2 + 2px);
}

.crm-users__table { table-layout: fixed; }
.crm-users__col-avatar  { width: 52px; }
.crm-users__col-name    { width: auto; }
.crm-users__col-roles   { width: 15%; }
.crm-users__col-teams   { width: 18%; }
.crm-users__col-position { width: 16%; }
.crm-users__col-actions { width: 82px; white-space: nowrap; }

td.crm-users__col-roles,
td.crm-users__col-teams,
td.crm-users__col-position { overflow-wrap: anywhere; }
.crm-users__col-name { min-width: 0; }

.crm-users__identity {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-1);
    flex-wrap: wrap;
}
.crm-users__contact {
    display: flex;
    align-items: baseline;
    gap: 4px;
    max-width: 100%;
    margin-top: 2px;
    white-space: nowrap;
}

.crm-users__contact code { flex: none; }
.crm-users__contact span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-roles-catalog__col-rate    { width: 120px; }
.crm-roles-catalog__col-status  { width: 120px; }
.crm-roles-catalog__col-actions { width: 56px; }

@media (max-width: 1100px) {
    .crm-users__col-teams { display: none; }
}
@media (max-width: 820px) {
    .crm-users__col-roles { display: none; }
}

.crm-my-profile {
    padding-top: var(--crm-sp-4);
    max-width: 640px;
    margin-inline: auto;
}
.crm-my-profile__card {
    padding: var(--crm-sp-4);
}
.crm-my-profile__header {
    display: flex;
    gap: var(--crm-sp-3);
    align-items: center;
    margin-bottom: var(--crm-sp-4);
}
.crm-my-profile__avatar {
    flex-shrink: 0;
    display: inline-block;
}

.crm-my-profile__photo { flex-shrink: 0; }
.crm-my-profile__photo-drop {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    border-radius: var(--crm-radius-full);
    transition: opacity .12s;
}
.crm-my-profile__photo-drop:hover { opacity: .85; }
.crm-my-profile__photo-drop:focus-within {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}
.crm-my-profile__photo-drop--busy {
    opacity: .5;
    cursor: progress;
}
.crm-my-profile__photo-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}
.crm-my-profile__photo-actions {
    margin: var(--crm-sp-2) 0 0;
    display: flex;
    gap: var(--crm-sp-2);
    flex-wrap: wrap;
    align-items: center;
}
.crm-my-profile__photo-hint { margin: var(--crm-sp-1) 0 0; }
.crm-my-profile__identity {
    min-width: 0;
    flex: 1;
}
.crm-my-profile__name {
    margin: 0 0 var(--crm-sp-1);
    font-size: var(--crm-text-lg);
    font-weight: var(--crm-weight-semibold);
}
.crm-my-profile__meta {
    margin: 0;
    display: flex;
    gap: var(--crm-sp-2);
    flex-wrap: wrap;
    align-items: center;
}
.crm-my-profile__actions { margin: var(--crm-sp-3) 0 0; }
.crm-my-profile__divider {
    margin: var(--crm-sp-4) 0;
    border: none;
    border-top: 1px solid var(--crm-border);
}
.crm-my-profile__section-title {
    margin: 0 0 var(--crm-sp-1);
    font-size: var(--crm-text-base);
    font-weight: var(--crm-weight-semibold);
}
.crm-my-profile__section-hint { margin: 0 0 var(--crm-sp-3); }

@media (max-width: 768px) {
    .crm-users__filters > .crm-field { flex-basis: 100%; }

    .crm-users .crm-table { min-width: 440px; }

    .crm-layout__content:has(> .crm-users) { padding-left: var(--crm-sp-2); padding-right: var(--crm-sp-2); }

    .crm-my-profile__header { flex-wrap: wrap; }
}

.crm-split {
    display: flex;
    gap: var(--crm-sp-4);
    min-height: 70vh;
    color: var(--crm-text);

    align-items: flex-start;

    --crm-split-top-offset: 0px;
}
body.admin-bar .crm-split { --crm-split-top-offset: 32px; }
@media (max-width: 782px) {
    body.admin-bar .crm-split { --crm-split-top-offset: 46px; }
}

body:has(.crm-layout__topbar) .crm-split {
    --crm-split-top-offset: calc(var(--crm-topbar-h, 55px) + 24px);
}
@media (max-width: 782px) {
    body:has(.crm-layout__topbar) .crm-split {
        --crm-split-top-offset: calc(var(--crm-topbar-h, 28px) + 24px);
    }
}
.crm-split__sidebar {
    border-right: 1px solid var(--crm-border);
    padding-right: var(--crm-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-3);

    position: sticky;
    top: var(--crm-split-top-offset, 0px);
    max-height: calc(100vh - var(--crm-split-top-offset, 0px));
    max-width: 340px;
    width: 22%;
    min-width: 250px;
}
.crm-split__main {
    flex: 1;
    padding-left: var(--crm-sp-4);
    display: flex;
    flex-direction: column;
    min-width: 0;

    min-height: calc(100vh - var(--crm-split-top-offset, 0px));
    min-height: calc(100dvh - var(--crm-split-top-offset, 0px));
}
.crm-split__aside {
    border-left: 1px solid var(--crm-border);
    padding-left: var(--crm-sp-4);

    position: sticky;
    top: var(--crm-split-top-offset, 0px);
    max-height: calc(100vh - var(--crm-split-top-offset, 0px));
    max-height: calc(100dvh - var(--crm-split-top-offset, 0px));
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 340px;
    width: 27%;
    min-width: 250px;
}

@media (max-width: 768px) {
    .crm-split {
        gap: 0;
        min-height: 0;
        align-items: stretch;
    }
    .crm-split__main {
        padding-left: 0;
        min-height: 0;
        width: 100%;
    }

    .crm-split__sidebar,
    .crm-split__aside {
        position: fixed;
        max-height: none;
        max-width: none;
        min-width: 0;
        width: min(320px, 88vw);
        padding: 0 var(--crm-sp-3);
        border-right: 0;
        border-left:  0;
        top: 0;
        bottom: 0;
    }
}

.crm-presentation { display: flex; flex-direction: column; gap: var(--crm-sp-5); max-width: 1100px; margin: 0 auto; }

.crm-presentation__picker { display: flex; gap: var(--crm-sp-3); align-items: center; padding-bottom: var(--crm-sp-4); border-bottom: 1px solid var(--crm-border); flex-wrap: wrap; }
.crm-presentation__picker-label { font-size: 0.85rem; color: var(--crm-text-muted); }
.crm-presentation__picker .crm-select { flex: 1 1 240px; max-width: 360px; }
.crm-presentation__preview-pill { background: var(--crm-info-soft); color: var(--crm-info); }

.crm-presentation__empty { text-align: center; padding: var(--crm-sp-6); }

.crm-presentation__ribbon {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--crm-sp-4);
    padding: var(--crm-sp-5);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-warning-soft);
    color: var(--crm-warning);
    box-shadow: var(--crm-shadow-md);
}
.crm-presentation__ribbon--done { background: var(--crm-success-soft); color: var(--crm-success); }
.crm-presentation__ribbon--review { background: var(--crm-warning-soft); color: var(--crm-warning); }
.crm-presentation__ribbon--neutral { background: var(--crm-bg-alt); color: var(--crm-text-muted); }
.crm-presentation__ribbon-icon { font-size: 2.4rem; line-height: 1; }
.crm-presentation__ribbon-body { flex: 1; min-width: 0; }
.crm-presentation__ribbon-status { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.crm-presentation__ribbon-hint { font-size: 0.95rem; opacity: 0.85; margin: var(--crm-sp-1) 0 0 0; }

.crm-presentation__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--crm-sp-5); }
@media (max-width: 760px) { .crm-presentation__grid { grid-template-columns: 1fr; } }

.crm-presentation__hero { display: flex; flex-direction: column; gap: var(--crm-sp-3); }
.crm-presentation__title { font-size: 2rem; line-height: 1.15; margin: 0; letter-spacing: -0.02em; color: var(--crm-text); }
.crm-presentation__meta { display: flex; flex-wrap: wrap; gap: var(--crm-sp-3); align-items: center; color: var(--crm-text-muted); font-size: 0.95rem; }
.crm-presentation__meta-item { display: inline-flex; align-items: center; gap: var(--crm-sp-2); }
.crm-presentation__description { margin-top: var(--crm-sp-3); white-space: pre-line; font-size: 1.05rem; line-height: 1.65; color: var(--crm-text); }
.crm-presentation__no-desc { font-style: italic; }

.crm-presentation__files-card { padding: 0; overflow: hidden; }
.crm-presentation__files-header { display: flex; align-items: center; justify-content: space-between; padding: var(--crm-sp-3) var(--crm-sp-4); background: var(--crm-bg-alt); }
.crm-presentation__files-header h3 { margin: 0; font-size: 1rem; }
.crm-presentation__files-list { list-style: none; padding: 0; margin: 0; }
.crm-presentation__file { display: flex; align-items: center; gap: var(--crm-sp-3); padding: var(--crm-sp-3) var(--crm-sp-4); border-top: 1px solid var(--crm-border); text-decoration: none; color: inherit; transition: background-color 100ms; }
.crm-presentation__file:hover { background: var(--crm-bg-alt); }
.crm-presentation__file-icon { font-size: 1.4rem; }
.crm-presentation__file-body { flex: 1; min-width: 0; }
.crm-presentation__file-name { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-presentation__file-meta { font-size: 0.78rem; color: var(--crm-text-muted); }
.crm-presentation__file-action { color: var(--crm-primary); font-size: 1.1rem; }
.crm-presentation__no-files { padding: var(--crm-sp-4); font-size: 0.9rem; }

.crm-presentation__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--crm-sp-4); padding: var(--crm-sp-4) var(--crm-sp-5); background: var(--crm-primary-soft); border-left: 4px solid var(--crm-primary); border-radius: var(--crm-radius); }
.crm-presentation__cta-body { color: var(--crm-text); font-size: 0.95rem; }
.crm-presentation__cta-body strong { display: block; font-size: 1.05rem; margin-bottom: var(--crm-sp-1); color: var(--crm-primary-text, var(--crm-primary)); }
@media (max-width: 560px) {
    .crm-presentation__ribbon { flex-direction: column; align-items: flex-start; }
    .crm-presentation__cta    { flex-direction: column; align-items: flex-start; }
    .crm-presentation__cta .crm-btn { width: 100%; justify-content: center; }
}

.crm-auth-modal { z-index: 100010; }
.crm-auth-modal .crm-modal-shell__inner { max-width: 480px; }
.crm-auth-modal__header { padding: var(--crm-sp-4) var(--crm-sp-5); border-bottom: 1px solid var(--crm-border); }
.crm-auth-modal__body   { padding: var(--crm-sp-4) var(--crm-sp-5); display: flex; flex-direction: column; gap: var(--crm-sp-3); }
.crm-auth-modal__hint   { margin: 0; color: var(--crm-text-muted); font-size: 0.9rem; }
.crm-auth-modal__footer { padding: var(--crm-sp-3) var(--crm-sp-5); border-top: 1px solid var(--crm-border); display: flex; gap: var(--crm-sp-2); justify-content: flex-end; align-items: center; }
/* ⚠ 16px floor: iOS Safari zooms the viewport on focus below it, and this popup is what a
   locked-out person meets mid-task on a phone. Same rule as `.crm-signin .crm-input`. */
.crm-auth-modal .crm-input { width: 100%; box-sizing: border-box; font-size: max(16px, var(--crm-text-base)); }
.crm-auth-modal .crm-btn--primary { width: 100%; justify-content: center; }
/* ⚠ The form is gap-driven; .crm-field's own margin-bottom would double the rhythm. */
.crm-auth-modal__form .crm-field { margin-bottom: 0; }

.crm-mention {
    display: inline;
    padding: 0 3px;
    border-radius: 4px;
    background: var(--crm-primary-soft);
    color: var(--crm-primary-text);
    font-weight: 600;
    white-space: nowrap;
}
.crm-mention--me {
    background: var(--crm-warning-soft, #fef3c7);
    color: var(--crm-warning-text, #92400e);
    outline: 1px solid var(--crm-warning, #f59e0b);
    outline-offset: 0;
}
.crm-mention-popover {
    position: fixed;
    z-index: 100000;
    max-height: 240px;
    overflow-y: auto;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border-strong);
    border-radius: var(--crm-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    padding: 4px;
}
.crm-mention-popover__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--crm-text);
}
.crm-mention-popover__item:hover,
.crm-mention-popover__item.is-active {
    background: var(--crm-surface-2);
}
.crm-mention-popover__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mention-popover__badge { flex: 0 0 auto; font-size: 0.85em; }
.crm-mention-popover__empty {
    padding: 8px 10px;
    color: var(--crm-text-muted);
    font-size: 0.85rem;
}

/* ============================================================
   ZOOMABLE SURFACE — the pinch belongs to the board, not the page
   Roman 2026-08-01. The shared JS half is the recogniser
   `src/Frontend/JS/crm-pinch-zoom.js`; this is the half only the
   browser can be told.

   A surface that declares `data-crm-pinch-zoom` owns a size ladder
   of its own, and a pinch over it is a question about THAT ladder
   — how wide the days are — not about the page. Left to the
   platform the gesture zoomed the whole document instead: the
   sidebar grew, the chrome grew, and the one thing being pointed
   at did not change at all.

   The attribute is deliberately NOT the views factory's
   `data-crm-view-scale-root`: the legacy harmonogram claims the
   same gesture while keeping its ladder in Alpine state and user
   meta rather than in a CSS property and a URL parameter. The CSS
   contract belongs to the gesture, not to one implementation of
   what the gesture means.

   `pan-x pan-y`, deliberately NOT `none`: panning must keep
   working, and a planning board that refuses to scroll under a
   finger is worse than one that cannot be pinched. It also gives
   the JS a property it relies on — two fingers travelling TOGETHER
   still scroll, because only the distance between them is read.

   ⚠️ Not inherited, and not a blanket: descendants that set their
   own `touch-action` (the draggable timeline bar's `none`, and its
   `auto` on hover-less pointers) keep winning on themselves.

   ⚠️ The trade this makes: native pinch-to-magnify is unavailable
   over these boards. The replacement is the ladder itself, which
   reaches 200 % and is reachable by chip, by keyboard and by URL —
   which is why the ➖／＋ strip may not be hidden on a surface that
   sets this attribute.
   ============================================================ */
[data-crm-pinch-zoom] {
    touch-action: pan-x pan-y;
}