/* 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-resize-handle — the ONE drag-to-resize affordance ────────────────
   The visual half of crm-sidebar-resize.js: an 8px invisible grab strip that
   lights a 2px primary spine on hover or while the drag is live. Every
   resizable column wears this class and adds nothing but its own edge
   (`left`/`right`) and its own desktop gate; nobody re-draws the spine.
   Hosts today: the app sidebar (below) and the comments rail
   (components/crm-task-card-modal.css). */
.crm-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    background: transparent;
}
.crm-resize-handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.crm-resize-handle:hover::before,
.crm-resize-handle--active::before {
    opacity: 1;
}

.crm-layout__sidebar-resizer { display: none; }
@media (min-width: 769px) {
    .crm-layout__sidebar-resizer {
        display: block;
        right: -4px;
        z-index: 5;
    }
    .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; }

/* Same job as .crm-menu-resizing, for every other host of .crm-resize-handle:
   while a drag is live the col-resize cursor must survive crossing any
   element that sets its own. */
body.crm-col-resizing,
body.crm-col-resizing * { cursor: col-resize !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);
}
/* ⚠ Sign out is a POSTED form, not a link — a GET writer is unreachable on the render shell, so
   the control that ends a session has to be a <button> inside a <form>. This modifier makes that
   button wear the menu-item look exactly; it adds no colour of its own, so both themes, all nine
   skins and the --danger modifier above keep working untouched. */
.crm-layout__user-menu-item--button {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    /* ⚠ AFTER the shorthand, and it is load-bearing. `font: inherit` RESETS font-size, and this
       button's parent is the <form>, not an item — so it inherited the menu's 16px while every
       sibling <a> renders at --crm-text-sm (13.6px). Measured in a browser at 16px/24px next to
       13.6px/20.4px: one menu row visibly taller and larger than the rest. No test can see this. */
    font-size: var(--crm-text-sm);
    text-align: left;
    cursor: pointer;
}
.crm-signout-form {
    margin: 0;
}
.crm-signout-form--inline {
    display: inline;
}
.crm-signout-form__link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--crm-primary);
    cursor: pointer;
    text-decoration: underline;
}
.crm-signout-form__link:hover {
    color: var(--crm-primary-hover);
}
.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-btn--link {
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--crm-primary);
    text-decoration: underline;
}
.crm-btn--link:hover:not(:disabled) {
    background: transparent;
    color: var(--crm-primary-hover, var(--crm-primary));
}

/* ⚠ Pair with aria-pressed — the class is paint, the attribute is the announcement. `--active` is an ALIAS, not a second state. */
.crm-btn--on,
.crm-btn--active {
    background: var(--crm-primary-soft);
    border-color: var(--crm-primary);
    color: var(--crm-primary-text, var(--crm-primary));
    font-weight: var(--crm-weight-semibold);
}
.crm-btn--on:hover:not(:disabled),
.crm-btn--active:hover:not(:disabled) {
    background: var(--crm-primary-soft);
    border-color: var(--crm-primary);
    color: var(--crm-primary-text, var(--crm-primary));
}

.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;
}

/* ⚠ Semantic badge tones. crm-core ships .crm-badge plus status/priority slugs; these four are the GENERIC set and were invented by crm-superdev-env.css, defined nowhere, so all four painted as the same transparent pill — including --bad, which marks a credential that can no longer be opened. */
.crm-badge--ok {
    color: var(--crm-success);
    background: color-mix(in srgb, var(--crm-success) 15%, transparent);
}
.crm-badge--warn {
    color: var(--crm-warning);
    background: color-mix(in srgb, var(--crm-warning) 15%, transparent);
}
.crm-badge--bad {
    color: var(--crm-danger);
    background: color-mix(in srgb, var(--crm-danger) 18%, transparent);
}
.crm-badge--neutral {
    color: var(--crm-text-muted);
    background: color-mix(in srgb, var(--crm-text-muted) 15%, transparent);
}
.crm-badge--info {
    color: var(--crm-info);
    background: color-mix(in srgb, var(--crm-info) 15%, transparent);
}
/* ⚠ A SIZE modifier, not a tone — composes with any of the tones above. Tighter padding only: --crm-text-xs is already the smallest defined step and a new token needs Roman, not an invented fallback. */
.crm-badge--small {
    padding: 0 var(--crm-sp-1);
}

/* crm-secret-field — keep/clear/set wrapper; contract in docs/ui-reuse-ladder.md */
.crm-secret-field__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--crm-sp-2);
    margin-top: var(--crm-sp-1);
}
/* ⚠ .crm-btn is inline-flex and ties with the UA [hidden] rule on specificity, so a hidden action button still paints without this. */
.crm-secret-field__actions .crm-btn[hidden] {
    display: none;
}

.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);
}

/* A warning under a field: something the save allows but the reader should decide on (login_url on another host). */
.crm-field__warning {
    margin: var(--crm-sp-1) 0 0;
    padding: var(--crm-sp-1) var(--crm-sp-2);
    font-size: var(--crm-text-sm);
    color: var(--crm-warning-text);
    background: var(--crm-warning-soft);
    border-radius: var(--crm-radius-sm);
}
.crm-field__warning .crm-btn {
    margin-left: var(--crm-sp-1);
    vertical-align: baseline;
}

/* ⚠ Field-factory row primitives (FieldForm + SettingsFormKit) — every host of a decl-driven form needs these, not only the settings shell; the shell keeps only its own chrome (__intro, the 26rem input cap). */
.crm-settings-form__group {
    font-size: var(--crm-text-sm);
    font-weight: var(--crm-weight-semibold);
    color: var(--crm-text-secondary);
    margin: var(--crm-sp-4) 0 var(--crm-sp-2);
    padding-top: var(--crm-sp-3);
    border-top: 1px solid var(--crm-border);
}
.crm-settings-form__group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.crm-settings-form__hint {
    font-size: var(--crm-text-sm);
    color: var(--crm-text-muted);
    max-width: 68ch;
    margin: var(--crm-sp-1) 0 0;
}
.crm-settings-form__hint--danger {
    color: var(--crm-danger);
    font-weight: 600;
}
.crm-settings-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-4);
    margin-bottom: var(--crm-sp-4);
}
.crm-settings-form__fields > .crm-field {
    margin-bottom: 0;
}
.crm-settings-form__row--invalid .crm-select {
    border-color: var(--crm-danger);
    box-shadow: 0 0 0 1px var(--crm-danger);
}
.crm-settings-form__required {
    color: var(--crm-danger);
    font-weight: var(--crm-weight-semibold);
}
.crm-settings-form__fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-2);
}

/* crm-form-grid — form column layout; contract in docs/ui-reuse-ladder.md */
/* ⚠ A `group` decl is wrapped in a <fieldset> by FieldForm, so grouped rows are GRANDCHILDREN — the fieldset must stay both a full-width item and a grid, or grouped forms silently lose columns, span, margin reset and the input override. */
/* ⚠ Input override is `> .crm-field .crm-input` (0,3,0) to beat `.crm-settings-form__row .crm-input` (0,2,0) regardless of stylesheet order. */
.crm-form-grid,
.crm-form-grid > fieldset {
    display: grid;
    grid-template-columns: repeat(var(--crm-form-cols, 2), minmax(0, 1fr));
    gap: var(--crm-sp-3) var(--crm-sp-4);
}

.crm-form-grid > :not(.crm-field) {
    grid-column: 1 / -1;
}

.crm-form-grid > .crm-field,
.crm-form-grid > fieldset > .crm-field {
    margin-bottom: 0;
}

.crm-form-grid > .crm-field--full,
.crm-form-grid > fieldset > .crm-field--full {
    grid-column: 1 / -1;
}

.crm-form-grid > .crm-field .crm-input,
.crm-form-grid > .crm-field .crm-select,
.crm-form-grid > .crm-field .crm-textarea,
.crm-form-grid > fieldset > .crm-field .crm-input,
.crm-form-grid > fieldset > .crm-field .crm-select,
.crm-form-grid > fieldset > .crm-field .crm-textarea {
    max-width: none;
    width: 100%;
}

@media (max-width: 640px) {
    .crm-form-grid,
    .crm-form-grid > fieldset {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 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: " · "; }
}

/* ⚠ ONE map, three ATTRIBUTES carrying the same value: `data-crm-level` (popup
   shells), `data-crm-open-type` (source pills), `data-crm-accent` (JS hover echo).
   The planned-event row used to disagree with itself ('planned_event' on the
   shell, bare 'event' on the pill/echo) — normalized to 'planned_event'
   everywhere at the emitter (conv #1015 item 2); guarded by
   PlannedEventTypeSlugConsolidationTest. Use sites read --crm-entity-accent and
   never an --crm-entity-* token directly. */
/* ⚠ The reset stays ABOVE the map: equal specificity, later wins. Without it a
   pill of unknown type (email, empty) inherits the accent of the popup it sits in. */
.crm-tcm-feed__source,
.crm-modal-shell__trail-step { --crm-entity-accent: var(--crm-primary); }

[data-crm-level="project"],
[data-crm-open-type="project"],
[data-crm-accent="project"] { --crm-entity-accent: var(--crm-entity-project); }

[data-crm-level="card"],
[data-crm-open-type="card"],
[data-crm-accent="card"] { --crm-entity-accent: var(--crm-entity-card); }

[data-crm-level="planned_event"],
[data-crm-open-type="planned_event"],
[data-crm-accent="planned_event"] { --crm-entity-accent: var(--crm-entity-event); }

[data-crm-level="task"],
[data-crm-open-type="task"],
[data-crm-accent="task"] { --crm-entity-accent: var(--crm-entity-task); }

/* ⚠ Doubled class on purpose (same reason as .crm-due-tone): component files are
   enqueued after crm-core and would otherwise win the tie on row backgrounds. */
.crm-source-highlight.crm-source-highlight,
.crm-source-highlight.crm-source-highlight > td {
    background-color: color-mix(in srgb, var(--crm-entity-accent) 14%, transparent);
}
/* ⚠ On a `tr` the edge goes on the first cell — box-shadow on a row is dropped
   under border-collapse: collapse. */
.crm-source-highlight.crm-source-highlight:not(tr),
tr.crm-source-highlight.crm-source-highlight > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--crm-entity-accent);
}

.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);
}

/* Impersonation bar — the exit from a "log in as" session. Layout only:
   the plate is .crm-msg--error, the button is the shared sign-out control. */
.crm-impersonation-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-sp-3);
    margin: 0 0 var(--crm-sp-4);
    border-left: 4px solid var(--crm-danger);
}
.crm-impersonation-bar__text {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-1);
    min-width: 0;
}
.crm-impersonation-bar__title {
    font-weight: var(--crm-weight-semibold);
}
.crm-impersonation-bar__reason {
    font-size: var(--crm-text-xs);
    font-weight: var(--crm-weight-normal);
    opacity: 0.85;
}
.crm-impersonation-bar .crm-signout-form {
    flex: 0 0 auto;
}
@media (max-width: 640px) {
    .crm-impersonation-bar {
        align-items: stretch;
        flex-direction: column;
    }
    .crm-impersonation-bar .crm-btn {
        width: 100%;
        justify-content: center;
    }
}

.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;
}

/* ⚠ (0,3,0): out-ranks blanket `.crm-block :focus-visible` rings — the box's focus-within IS the ring. */
.crm-searchbox .crm-searchbox__input:focus,
.crm-searchbox .crm-searchbox__input:focus-visible { 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; }

/* --block: the full-width inset field of the projects sidebar + capsule picker
   (icon inside, 8 px vertical padding → the same height as .crm-input). */
.crm-searchbox--block {
    display: flex;
    width: 100%;
    height: auto;
    padding: 8px 12px 8px 10px;
    gap: var(--crm-sp-2);
    background: var(--crm-surface-inset);
    transition: border-color var(--crm-ease), box-shadow var(--crm-ease), background var(--crm-ease);
}
.crm-searchbox--block:focus-within { background: var(--crm-surface); }
.crm-searchbox--block .crm-searchbox__icon { font-size: 0.8rem; opacity: 0.55; }
.crm-searchbox--block .crm-searchbox__input { min-width: 0; line-height: var(--crm-leading-normal); }
.crm-searchbox--block .crm-searchbox__input::placeholder { color: var(--crm-text-faint); }

/* --chip: borderless soft pill for dense grids (harmonogram corner, calendar sidebar). */
.crm-searchbox--chip {
    display: flex;
    height: auto;
    padding: 4px 8px;
    gap: 6px;
    background: var(--crm-surface-2);
    border-color: transparent;
    border-radius: var(--crm-radius-full);
    transition: background var(--crm-ease), box-shadow var(--crm-ease);
}
.crm-searchbox--chip:focus-within {
    background: var(--crm-surface-3);
    border-color: transparent;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--crm-primary) 30%, transparent);
}
.crm-searchbox--chip .crm-searchbox__icon { font-size: 11px; opacity: 0.6; }
.crm-searchbox--chip .crm-searchbox__input { min-width: 0; }
.crm-searchbox--chip .crm-searchbox__input::placeholder { color: var(--crm-text-faint); }

/* --small: the .crm-input--small height, for popover menus. */
.crm-searchbox--small { height: 28px; width: 100%; }
.crm-searchbox--small .crm-searchbox__input { min-width: 0; }

.crm-searchbox__kbd {
    flex: 0 0 auto;
    font-family: var(--crm-font-mono);
    font-size: 0.66rem;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 5px;
    background: var(--crm-surface-2);
    border: 1px solid var(--crm-border);
    color: var(--crm-text-muted);
}

.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__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-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;
    flex-wrap: wrap;
    gap: var(--crm-sp-4) 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 > * { flex: 1 1 auto; min-width: 0; }
.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: var(--crm-sp-2) 0;
}
.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-month-nav__btn {
    width: 28px;
    height: 28px;
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface-1);
    border: 1px solid var(--crm-border);
    color: var(--crm-text-muted);
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.crm-month-nav__btn:hover {
    background: var(--crm-primary-soft);
    border-color: color-mix(in srgb, var(--crm-primary) 40%, var(--crm-border));
    color: var(--crm-primary-text);
}
.crm-month-nav__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.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); min-width: 0; }
.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; }

@media (max-width: 640px) {
    .crm-client-detail__billing-grid {
        grid-template-columns: 1fr;
    }
    .crm-client-detail__header {
        flex-wrap: wrap;
        row-gap: var(--crm-sp-2);
    }
    .crm-client-detail__form {
        flex-wrap: wrap;
        row-gap: var(--crm-sp-2);
    }
}

.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; }
.crm-users__col-select  { width: 36px; }

/* The whole row is the detail affordance (the ⋯ menu is no longer the only
   door). Only rows the viewer may actually open get the pointer — a cursor
   that promises something the click will not do is worse than no cursor. */
.crm-users__row--clickable { cursor: pointer; }
.crm-users__row--clickable:hover { background: var(--crm-primary-soft); }
.crm-users__row--clickable:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: -2px;
}
.crm-users__row--selected { background: var(--crm-primary-soft); }

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;
}

/* ── Access v3 · object roles (P1.6b) ───────────────────────────────────────
 * Rationale + the design rule live in the ladder row (docs/ui-reuse-ladder.md)
 * and CRM\Frontend\AccessRolesPanel's docblock. Load-bearing here: the four
 * `--w1..--w4` weights are ONE hue at rising strength, in ladder order, so a
 * new rung is a new weight and never a new colour. */
.crm-access-roles {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-1);
    min-width: 0;
}
.crm-access-roles__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-1);
    min-width: 0;
}
.crm-access-roles__row {
    display: flex;
    align-items: center;
    gap: var(--crm-sp-2);
    flex-wrap: wrap;
    min-width: 0;
}
.crm-access-roles__row.is-saving {
    opacity: .55;
}
/* The person and their role are ONE unit — this is the tether. */
.crm-access-roles__who {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-2);
    min-width: 0;
    flex: 1 1 auto;
}
.crm-access-roles__name {
    font-size: var(--crm-text-sm);
    color: var(--crm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-access-roles__team-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: var(--crm-radius-full);
    background: var(--tc, var(--crm-text-muted));
}
/* Source is a sentence fragment, not a badge: lowercase, muted, no chrome. */
/* ⚠️ The hero column is ~215px, so this ALWAYS wraps — full-width and indented
 * past the avatar deliberately, or it floats between two rows and reads as a
 * caption for the wrong person. */
.crm-access-roles__source {
    flex: 1 0 100%;
    padding-inline-start: calc(var(--crm-sp-6) + var(--crm-sp-1));
    margin-top: calc(var(--crm-sp-1) * -1);
    font-size: var(--crm-text-xs);
    line-height: var(--crm-leading-tight);
    color: var(--crm-text-muted);
}
/* …but in the DRAWER there is room, so it stays inline on the baseline. */
.crm-access-roles__list--drawer .crm-access-roles__source {
    flex: 0 1 auto;
    padding-inline-start: 0;
    margin-top: 0;
}
.crm-access-roles__sight {
    font-size: var(--crm-text-xs);
    margin-inline-start: auto;
}
.crm-access-roles__sight--yes { color: var(--crm-success-text); }
.crm-access-roles__sight--no  { color: var(--crm-danger); }
/* "cannot evaluate" is NOT a refusal, so it must not wear the refusal colour. */
.crm-access-roles__sight--unknown {
    color: var(--crm-text-muted);
    font-style: italic;
}
.crm-access-roles__error[hidden] { display: none; }
.crm-project-hero__access .crm-access-roles__error {
    margin: var(--crm-sp-1) 0 0;
    font-size: var(--crm-text-xs);
}
.crm-access-roles__error {
    flex: 1 0 100%;
    margin: 0;
}
.crm-access-roles__head {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.crm-access-roles__head .crm-modal-shell__title {
    max-width: none;
    white-space: normal;
}
.crm-access-roles__privacy-line {
    margin: var(--crm-sp-1) 0 0;
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
}

/* ── The sentence ────────────────────────────────────────────────────────
 * Provenance is prose: "because they own this project. Change the owner to
 * change it." One line under the person, the reason first and the door that
 * changes it second, in the same muted voice — never two chips. */
.crm-access-roles__hint-inline {
    color: var(--crm-text-muted);
}
/* A group title is a sentence about the rows below it, not a label. */
.crm-access-roles__group {
    margin: var(--crm-sp-3) 0 var(--crm-sp-1);
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
}
.crm-access-roles__group:first-child {
    margin-top: 0;
}
/* The locked chip's popover: the reason sits above the rungs as a sentence
 * in the menu's own padding, and the rungs render DISABLED — present so the
 * ladder is still readable, quiet so nobody tries them. */
.crm-access-roles__menu .crm-access-roles__why,
.crm-access-roles__menu .crm-access-roles__hint {
    margin: 0;
    padding: var(--crm-sp-2) var(--crm-sp-4);
    font-size: var(--crm-text-xs);
    line-height: var(--crm-leading-tight);
    color: var(--crm-text-muted);
}
.crm-access-roles__menu .crm-access-roles__why {
    color: var(--crm-text);
    border-bottom: 1px solid var(--crm-border);
}
.crm-access-roles__menu .crm-access-roles__hint {
    border-top: 1px solid var(--crm-border);
}
.crm-toolpop__panel--menu.crm-access-roles__menu .crm-toolpop__body > button:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.crm-toolpop__panel--menu.crm-access-roles__menu .crm-toolpop__body > button:disabled:hover {
    background: none;
}
.crm-toolpop__panel--menu.crm-access-roles__menu .crm-toolpop__body > .crm-access-roles__act {
    color: var(--crm-danger);
}
/* The team token on a PRIVATE project: rung zero, dashed — the cut state. */
.crm-team-combo__role--cut {
    border-style: dashed;
    color: var(--crm-text-muted);
    background: transparent;
}

/* ── The ladder: one hue, four weights ───────────────────────────────────── */
.crm-access-roles__chip {
    border: 1px solid transparent;
}
/* ⚠️ EVERY BARE RUNG CARRIES `:not(.crm-access-roles__pop)`, AND IT IS LOAD-BEARING.
 * `AccessRolesPanel::roleMenuHtml()` passes `modifiers_expr => 'token.roleWeight'`,
 * so the weight class lands on the ToolPop ROOT as well as on a plain chip —
 * the root reads `crm-toolpop crm-access-roles__pop … crm-access-roles__chip--w3`.
 * Without the guard these rules paint a second, larger background BEHIND the
 * trigger (reported on the team page, 2026-09-13). The `.__pop`-scoped rules
 * further down dress the trigger and are the only ones that should.
 *
 * ⚠️ Rung ZERO — "no role yet". Not part of the ladder (a person with no grant
 * holds no rank), so it is deliberately the quietest thing in the row: dashed,
 * muted, reading as an absence rather than as a fifth level. */
.crm-access-roles__chip--w0:not(.crm-access-roles__pop) {
    color: var(--crm-text-muted);
    background: transparent;
    border-style: dashed;
    border-color: var(--crm-border);
}
.crm-access-roles__pop.crm-access-roles__chip--w0 .crm-toolpop__trigger {
    color: var(--crm-text-muted);
    border: 1px dashed var(--crm-border);
    background: transparent;
}
.crm-access-roles__chip--w1:not(.crm-access-roles__pop) {
    color: var(--crm-text-muted);
    background: transparent;
    border-color: var(--crm-border);
}
.crm-access-roles__chip--w2:not(.crm-access-roles__pop) {
    color: var(--crm-primary);
    background: color-mix(in srgb, var(--crm-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--crm-primary) 30%, transparent);
}
.crm-access-roles__chip--w3:not(.crm-access-roles__pop) {
    color: var(--crm-primary);
    background: color-mix(in srgb, var(--crm-primary) 18%, transparent);
}
.crm-access-roles__chip--w4:not(.crm-access-roles__pop) {
    color: var(--crm-text-on-primary);
    background: var(--crm-primary);
    font-weight: var(--crm-weight-semibold);
}
/* ⚠️ DARK inverts the top rung, and this is not a preference. `--crm-primary`
 * is a deep blue in light (white on it = 8.6:1) and a LIGHT blue in dark, where
 * white on it measures ~2.5:1 — under AA, and measured unreadable in the
 * browser before this rule existed. `.crm-widget__header` solves the identical
 * problem the identical way (solid primary in light, a surface in dark), so
 * this follows the house precedent rather than inventing a token. The rung
 * stays the loudest via a strong tint + a full-strength border + semibold. */
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-access-roles__chip--w4:not(.crm-access-roles__pop),
:is([data-crm-theme="dark"], [data-crm-zone="dark"]) .crm-access-roles__pop.crm-access-roles__chip--w4 .crm-toolpop__trigger {
    color: var(--crm-primary);
    background: color-mix(in srgb, var(--crm-primary) 26%, transparent);
    border-color: var(--crm-primary);
}

/* The editable chip is a menu-mode ToolPop, so it must read as a chip rather
 * than as a toolbar button: the primitive's own trigger height is sized for a
 * filter bar and would tower over the avatar it belongs to. */
.crm-access-roles__pop .crm-toolpop__trigger {
    min-height: 0;
    height: auto;
    padding: 2px var(--crm-sp-2);
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-text-xs);
    gap: var(--crm-sp-1);
}
/* The trigger's own LABEL is "Role" — a name for screen readers and the mobile
 * sheet header. On screen the VALUE is the chip, so the label would be a
 * second word nobody needs beside a name they are already reading. */
.crm-access-roles__pop .crm-toolpop__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.crm-access-roles__pop .crm-toolpop__value {
    max-width: none;
    /* ⚠️ `.crm-toolpop__value` sets its OWN `color: var(--crm-text-muted)`,
     * which beat the trigger's colour on specificity: measured in the browser,
     * "Správce" rendered muted grey on the solid Admin chip — unreadable — and
     * every other rung lost its hue too. The chip's colour has to be inherited
     * here, not only set on the trigger. */
    color: inherit;
    font-weight: inherit;
}
/* ⚠️ And the primitive injects a "·" separator before the value, which reads
 * correctly as "Sort · Due date" on a toolbar. This chip HIDES the label (the
 * name is already beside it), so the separator was left as a leading orphan:
 * "· Editor". */
.crm-access-roles__pop .crm-toolpop__value::before {
    content: none;
    margin-inline-end: 0;
}
.crm-access-roles__pop.crm-access-roles__chip--w1 .crm-toolpop__trigger {
    color: var(--crm-text-muted);
    border: 1px solid var(--crm-border);
    background: transparent;
}
.crm-access-roles__pop.crm-access-roles__chip--w2 .crm-toolpop__trigger {
    color: var(--crm-primary);
    border: 1px solid color-mix(in srgb, var(--crm-primary) 30%, transparent);
    background: color-mix(in srgb, var(--crm-primary) 8%, transparent);
}
.crm-access-roles__pop.crm-access-roles__chip--w3 .crm-toolpop__trigger {
    color: var(--crm-primary);
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--crm-primary) 18%, transparent);
}
.crm-access-roles__pop.crm-access-roles__chip--w4 .crm-toolpop__trigger {
    color: var(--crm-text-on-primary);
    border: 1px solid transparent;
    background: var(--crm-primary);
    font-weight: var(--crm-weight-semibold);
}

/* A menu row states the role and what it lets you do — the verb ladder from
 * Core\Access::ACTIONS, so the choice is legible without leaving the popover. */
/* ⚠️ Specificity: the primitive's own rule is
 * `.crm-toolpop__panel--menu .crm-toolpop__body > button` (three classes). A
 * rule hung off the toolpop ROOT modifier is two classes and LOSES — measured,
 * these rows rendered centred. Hence the panel's own class, doubled up on the
 * panel element so this reads as four. */
/* GRID, not a flex column. The primitive draws the "chosen" ✓ as a `::before`
 * on the button, so a flex COLUMN stacks the mark ABOVE the label instead of
 * beside it (measured). A two-column grid keeps the mark in its own gutter and
 * lets the role name and its verb line stack in the second column, which is
 * what a two-line menu row actually needs. */
.crm-toolpop__panel--menu.crm-access-roles__menu .crm-toolpop__body > button {
    display: grid;
    grid-template-columns: 1em 1fr;
    column-gap: var(--crm-sp-2);
    row-gap: 0;
    align-items: start;
    text-align: start;
}
.crm-toolpop__panel--menu.crm-access-roles__menu .crm-toolpop__body > button::before {
    grid-column: 1;
    grid-row: 1;
}
.crm-toolpop__panel--menu.crm-access-roles__menu .crm-toolpop__body > button > span {
    grid-column: 2;
}
.crm-toolpop__panel--menu.crm-access-roles__menu {
    /* Under 80 characters: the verb line is meant to be read. */
    max-width: 34ch;
}
.crm-access-roles__opt-name {
    font-size: var(--crm-text-sm);
}
.crm-access-roles__opt-what {
    font-size: var(--crm-text-xs);
    color: var(--crm-text-muted);
}
.crm-toolpop__panel--menu.crm-access-roles__menu .crm-toolpop__body > button[aria-current="true"] .crm-access-roles__opt-what {
    color: inherit;
    opacity: .8;
}

.crm-access-roles__who-btn {
    align-self: flex-start;
}

/* ── The fold: a role ZONE inside the access-combo chip (round 2) ──────────
 * ⚠️ The density rule that keeps this a chip stack and not a table: the pill
 * has two zones and when it runs out of room the NAME gives way — the role
 * never does, and neither ever wraps to a second line. In an access control
 * what someone may DO outranks the spelling of their name, and the avatar
 * already identifies them. `min-width: 0` on the name + `flex: 0 0 auto` on
 * the role is the whole mechanism; remove either and the stack becomes rows. */
.crm-team-combo__role,
.crm-team-combo__role-pop .crm-toolpop__trigger {
    flex: 0 0 auto;
    margin-inline-start: var(--crm-sp-1);
    padding: 0 var(--crm-sp-1);
    border-radius: var(--crm-radius-sm);
    font-size: var(--crm-text-xs);
    line-height: 1.6;
    white-space: nowrap;
}
/* ⚠️ A FLOOR under the give-way rule: a name ellipsised to "Fli…" identifies
 * nobody, so truncation stops at something still readable and the pill wraps
 * to the next row instead. The rule is "the name gives way", not "the name
 * disappears". */
.crm-team-combo__token-name {
    min-width: 4.5ch;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The editable zone is a menu-mode ToolPop whose trigger must read as part of
 * the pill, not as a toolbar button sitting next to one. */
.crm-team-combo__role-pop {
    display: inline-flex;
}
.crm-team-combo__role-pop .crm-toolpop__trigger {
    min-height: 0;
    height: auto;
    gap: 0;
    border: 0;
}
.crm-team-combo__role-pop .crm-toolpop__value {
    max-width: none;
}

/* ── Private ──────────────────────────────────────────────────────────────
 * ⚠️ The consequence line stays visible while the switch is DISABLED: "why can
 * I not do this" and "what would it do" are both live questions then. */
.crm-access-roles__privacy {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-1);
    padding-block: var(--crm-sp-1);
}
.crm-access-roles__privacy-head {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-sp-2);
    cursor: pointer;
}
.crm-access-roles__privacy-head:has(.crm-switch:disabled) {
    cursor: default;
}
.crm-access-roles__consequence {
    margin: 0;
    font-size: var(--crm-text-xs);
    line-height: var(--crm-leading-normal);
    color: var(--crm-text-muted);
    /* Under 80 characters — the line is meant to be read, not scanned. */
    max-width: 46ch;
}

/* ── The denied state ─────────────────────────────────────────────────────
 * ⚠️ No button and no mailto: request-access is phase 2. The prose per status
 * lives in crm-projects-page.js `deniedHtml()`, which is the accurate account
 * of the 403/404 split — this comment used to claim they were identical, and
 * they are not. */
.crm-projects__denied {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    padding: var(--crm-sp-6);
}