/* =============================================================================
   DEX Portal - Tasks

   The table, the board, and the task record. Everything here leans on the
   design tokens and on the furniture the other modules already established -
   `.data-table`, `.record-section`, `.invoice-widget` - so a task looks like
   part of the product rather than a second product.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   SHARED PIECES

   Priority, status, tags, people and progress appear in the table, on a card
   and in the record. One definition each, so they cannot drift apart.
   -------------------------------------------------------------------------- */

.task-muted {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.task-reference {
    color: var(--text-muted);
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.task-priority {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 500;
    cursor: pointer;
}

/* The dot carries the meaning; the word repeats it for anyone who cannot
   tell these four colours apart. */
.task-priority::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--priority-colour, #7fa7e0);
    flex: none;
}

.task-priority--dot {
    gap: 0;
    padding: 0;
    cursor: default;
}

.task-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: none;
    border-radius: var(--radius-button);
    font: inherit;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.task-status--neutral { background: rgba(100, 116, 139, 0.14); color: #475569; }
.task-status--info    { background: rgba(14, 165, 233, 0.14);  color: #0369a1; }
.task-status--warning { background: rgba(245, 158, 11, 0.16);  color: #b45309; }
.task-status--success { background: rgba(16, 185, 129, 0.16);  color: #047857; }

.task-stage-chip {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 9px;
    border: none;
    border-radius: var(--radius-button);
    background: #8b93a7;
    color: #fff;
    font: inherit;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    cursor: pointer;
}

.task-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.task-tag {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-small, 6px);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-weight: 500;
}

.task-people {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.task-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 180px;
}

.task-person__name {
    font-size: var(--font-size-small);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A person's face: one disc that holds either their photo or their letters, so
   a row is the same height whichever the account happens to carry. */
.task-person__face,
.task-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: none;
    overflow: hidden;
}

/* Beside a name in a list cell, where the row sets the rhythm. */
.task-person__face {
    width: 22px;
    height: 22px;
    font-size: 10px;
}

/* In the task panel, which has the room for a face you can actually read. */
.task-avatar {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

.task-person__more {
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.task-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}

.task-progress__track {
    position: relative;
    width: 68px;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-subtle);
    overflow: hidden;
}

.task-progress__track--wide { width: 100%; }

.task-progress__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent, #6366f1);
    transition: width 180ms ease;
}

.task-progress__value {
    font-size: var(--font-size-tiny);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-weight: 600;
}


/* -----------------------------------------------------------------------------
   TABLE
   -------------------------------------------------------------------------- */

.task-table td { vertical-align: middle; }

.task-cell--overdue {
    color: var(--status-danger, #dc2626);
    font-weight: 600;
}

.task-board-picker {
    max-width: 260px;
    margin-left: auto;
}


/* -----------------------------------------------------------------------------
   KANBAN

   The board scrolls sideways rather than squeezing columns thinner and
   thinner: five phases at 120px each is a board nobody can read.
   -------------------------------------------------------------------------- */

.kanban-board {
    display: flex;
    gap: var(--gutter-tight, 12px);
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 12px;
}

.kanban-column {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.kanban-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-medium, 10px);
    border-left: 3px solid var(--stage-colour, #8b93a7);
    background: var(--surface-subtle);
}

.kanban-column__title {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-primary);
}

.kanban-column__count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-panel);
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-weight: 700;
    text-align: center;
}

.kanban-column__cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    padding: 4px;
    border-radius: var(--radius-medium, 10px);
    transition: background 140ms ease;
}

.kanban-column__cards--over {
    background: rgba(99, 102, 241, 0.07);
    outline: 1px dashed rgba(99, 102, 241, 0.4);
}

.kanban-card {
    /* A drag that misses its target should not leave the page text selected. */
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium, 10px);
    background: var(--surface-panel);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    transition: box-shadow 140ms ease, transform 140ms ease;
}

.kanban-card:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

.kanban-card--dragging { opacity: 0.45; }

.kanban-card--overdue { border-color: rgba(220, 38, 38, 0.45); }

.kanban-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.kanban-card__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.kanban-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kanban-card__due {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
}

.kanban-card__due--overdue {
    color: var(--status-danger, #dc2626);
    font-weight: 600;
}


/* -----------------------------------------------------------------------------
   NEW TASK FORM
   -------------------------------------------------------------------------- */

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

.task-form__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.task-form__readonly {
    padding: 9px 12px;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-small, 6px);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

.task-picker {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 168px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 6px);
}

/* A face beside the name in a people picker. The list already knows what
   everyone looks like; a column of names alone makes you read every one. */
.task-picker__face {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    background: var(--accent-tint);
    color: var(--accent);
}

.task-picker__option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: var(--radius-small, 6px);
    font-size: var(--font-size-small);
    cursor: pointer;
}

.task-picker__option:hover { background: var(--surface-subtle); }

/* A description that earns its extra height - a task brief is usually more
   than a line. */
.task-form__description {
    min-height: 132px;
    resize: vertical;
}

/* The checklist an operator lays out before the work starts. Shared by the
   New Task panel and the task automation rule. */
.checklist-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checklist-editor__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist-editor__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 6px);
    background: var(--surface-subtle);
    font-size: var(--font-size-small);
}

.checklist-editor__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.checklist-editor__remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.checklist-editor__remove:hover {
    background: var(--surface-strong, #eceef3);
    color: var(--text-primary);
}

.checklist-editor__add {
    display: flex;
    gap: 8px;
}

.checklist-editor__add .form-field__control { flex: 1; }

/* =============================================================================
   AUTOMATION MODE - the sticky Run/Conditions block on the New Task panel
   ============================================================================= */

.automation-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: -4px 0 6px;
    padding: 14px;
    background: var(--accent-tint, #eef0ff);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium, 10px);
}

.automation-sticky__block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-run__option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.rule-run__num {
    width: 64px;
    padding: 5px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 6px);
    background: var(--surface, #fff);
    font: inherit;
}

.rule-run__unit,
.rule-run__anchor {
    padding: 5px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 6px);
    background: var(--surface, #fff);
    font: inherit;
}

.rule-conditions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rule-condition {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rule-condition__field,
.rule-condition__op,
.rule-condition__value {
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 6px);
    background: var(--surface, #fff);
    font: inherit;
}

.rule-condition__field { flex: 1.2; }
.rule-condition__op { flex: 1.1; }
.rule-condition__value { flex: 1; }

.rule-condition__remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.rule-condition__remove:hover {
    background: var(--surface-strong, #eceef3);
    color: var(--text-primary);
}

.task-form__files {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.task-form__file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-small, 6px);
    background: var(--surface-subtle);
    font-size: var(--font-size-small);
}

.task-form__file-remove {
    border: none;
    background: none;
    color: var(--status-danger, #dc2626);
    font: inherit;
    font-size: var(--font-size-tiny);
    cursor: pointer;
}


/* -----------------------------------------------------------------------------
   TASK RECORD
   -------------------------------------------------------------------------- */

.task-overdue-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-medium, 10px);
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
    font-size: var(--font-size-small);
    font-weight: 500;
}

.task-columns {
    display: grid;
    /* Information sits on the left as the narrower reference column; the work
       (description, checklist, comments) takes the wider right. */
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr);
    gap: var(--gutter, 16px);
    align-items: start;
}

@media (max-width: 1100px) {
    .task-columns { grid-template-columns: minmax(0, 1fr); }
}

.task-columns__main,
.task-columns__side {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-tight, 12px);
    min-width: 0;
}



.task-description__text {
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--text-primary);
    cursor: text;
}

.task-description__empty {
    border: none;
    background: none;
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-size-small);
    cursor: pointer;
}

.task-description__hint {
    margin: 6px 0 0;
    font-size: var(--font-size-tiny);
}


/* ------------------------------------------------------------------ CHECKLIST */

/* A slim track that fills as items tick - the checklist's headline, read before
   any single row. */
.task-checklist__progress {
    position: relative;
    height: 6px;
    margin: 0 0 12px;
    border-radius: 999px;
    background: var(--surface-subtle, #eef1f4);
    overflow: hidden;
}

.task-checklist__progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent, #6366f1);
    transition: width 220ms ease;
}

.task-checklist {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.task-checklist__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 5px;
    transition: background 120ms ease;
}

.task-checklist__item:hover { background: var(--surface-subtle); }

.task-checklist__label {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-small);
    cursor: pointer;
}

/* The real checkbox drives state but is invisible; the box beside it is what
   people see and click. */
.task-checklist__label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.task-checklist__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 19px;
    height: 19px;
    border: 1.6px solid var(--border-strong, #cbd2d9);
    border-radius: 5px;
    background: var(--surface-panel, #fff);
    color: #fff;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.task-checklist__box .icon { opacity: 0; transition: opacity 100ms ease; }

.task-checklist__item--done .task-checklist__box {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
}

.task-checklist__item--done .task-checklist__box .icon { opacity: 1; }

.task-checklist__label input[type="checkbox"]:focus-visible + .task-checklist__box {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28);
}

.task-checklist__text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
    color: var(--text-primary);
}

.task-checklist__item--done .task-checklist__text {
    color: var(--text-muted);
    text-decoration: line-through;
}

.task-checklist__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.task-checklist__item:hover .task-checklist__remove { opacity: 1; }

.task-checklist__remove:hover {
    background: rgba(220, 38, 38, 0.12);
    color: var(--status-danger, #dc2626);
}


/* ------------------------------------------------------------------- COMMENTS */





.task-composer__attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 6px);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.task-composer__attach:hover { background: var(--surface-subtle); }

.task-composer__filename {
    flex: 1 1 auto;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.task-composer__mention {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: var(--radius-small, 6px);
    background: none;
    font: inherit;
    font-size: var(--font-size-small);
    text-align: left;
    cursor: pointer;
}

.task-composer__mention:hover { background: var(--surface-subtle); }













.task-mention {
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent, #6366f1);
    font-weight: 600;
}

.task-comment__files,
.task-info__files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.task-file {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 6px);
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-tiny);
    cursor: pointer;
}

.task-file:hover { background: var(--surface-subtle); }


/* -------------------------------------------------------------------- HISTORY */

.task-history {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* No rule between entries: the card already draws the boundary, and a line
   under every row turned a short history into a ladder. The icons down the
   left are what the eye follows. */
.task-history__entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: none;
}

.task-history__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-subtle);
    color: var(--text-muted);
    flex: none;
}

.task-history__text { display: flex; flex-direction: column; gap: 1px; }

.task-history__summary {
    font-size: var(--font-size-small);
    color: var(--text-primary);
}

.task-history__meta {
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------- INFORMATION */

.task-info__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.task-info__row:last-child { border-bottom: none; }

.task-info__label {
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.task-info__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-small);
    color: var(--text-primary);
}

.task-info__button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
    text-align: left;
    cursor: pointer;
}

.task-info__button:hover { color: var(--accent, #6366f1); }

.task-info__button--overdue {
    color: var(--status-danger, #dc2626);
    font-weight: 600;
}

.task-info__button--people { flex-wrap: wrap; gap: 8px; }

.task-info__editor { width: 100%; }

.task-info__progress {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
}

.task-info__progress-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.task-link {
    border: none;
    background: none;
    padding: 0;
    color: var(--accent, #6366f1);
    font: inherit;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    cursor: pointer;
}

.task-people-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 6px);
}

.task-people-editor__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


/* -----------------------------------------------------------------------------
   SETTINGS PAGE

   One column with a reading width. The record grid would leave half the screen
   empty, which reads as a missing panel rather than as breathing room.
   -------------------------------------------------------------------------- */

.task-settings {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-tight, 12px);
    max-width: 720px;
}

/* The empty-state line above the add box needs its own room; the paragraph
   default leaves it sitting on the input. */
.task-section .record-section__body > p.task-muted {
    margin: 0 0 10px;
}


/* =============================================================================
   THE TASK RECORD, SECOND PASS

   Three things were wrong with the first one. The work - description, checklist,
   comments - sat in cards, which made a single record look like a pile of
   separate documents. The change history sat under the comments, so the thing
   people write in was always below the thing nobody reads. And the comments
   themselves were unstyled text on white, which reads as a log file rather than
   as people talking.
   ============================================================================= */

.task-tabs {
    margin: -4px 0 16px;
}

.task-history-tab {
    max-width: 760px;
}


/* -----------------------------------------------------------------------------
   OUTLINED BLOCKS

   A hairline and a small radius. No fill, no shadow: these are parts of one
   record, and the line exists only to keep them from running together.
   -------------------------------------------------------------------------- */

.task-block {
    padding: 14px 16px 16px;
    /* --border-strong, not --subtle: with no fill behind it the line IS the
       container, and the subtle grey all but disappears on a light screen. */
    border: 1px solid var(--border-strong, #d5dadf);
    border-radius: 5px;
    background: none;
    box-shadow: none;
}

/* Description and Comments drop the outline entirely - they read as open
   stretches of the record, not boxed-off panels. Only the title's baseline
   keeps them apart. */
.task-block--flush {
    padding: 4px 2px 6px;
    border: none;
    border-radius: 0;
}

.task-block__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: var(--font-size-medium);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.task-block__title .icon { color: var(--text-muted); flex: none; }

.task-block__counter {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.task-empty {
    margin: 0;
    padding: 14px 0 4px;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* The information and Links panels stay filled - they are reference, and the
   fill is what separates "about this task" from "this task's work". */
.task-card {
    padding: 14px 16px 16px;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--surface-panel);
    box-shadow: none;
}


/* -----------------------------------------------------------------------------
   COMMENTS

   A conversation: your face beside the box you type into, everyone else's
   beside what they said, and each remark in a soft bubble so the thread has a
   shape you can scan without reading.
   -------------------------------------------------------------------------- */

.task-composer {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.task-composer__field {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--border-strong, #d5dadf);
    border-radius: 5px;
    background: var(--surface-panel);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.task-composer__field:focus-within {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.task-composer__input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px 4px;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
    line-height: 1.5;
    resize: vertical;
    outline: none;
}

.task-composer__toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 8px 10px;
}

.task-composer__attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-button);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.task-composer__attach:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.task-composer__filename {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Disabled until there is something to post, so the button never invites a
   click that does nothing. */
.task-composer__post {
    padding: 6px 16px;
    font-size: var(--font-size-small);
}

.task-composer__post:disabled {
    opacity: 0.45;
    cursor: default;
}

.task-composer__mentions {
    position: absolute;
    z-index: 4;
    top: 100%;
    left: 0;
    margin-top: -6px;
    min-width: 240px;
    padding: 6px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    box-shadow: var(--shadow-dropdown, 0 12px 30px rgba(15, 23, 42, 0.14));
}

.task-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-comment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    border: none;
}

.task-comment__avatar { flex: none; padding-top: 2px; }

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

/* Read like the project's activity feed, which is the same act in the same
   product: a face, a name, what was said in black, and when it was said
   underneath in grey. The bubble is gone - a tinted lozenge made every remark
   look like a chat message from a stranger, and on a record it is a note. */
.task-comment__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.task-comment__author {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-primary);
}

.task-comment__stamp {
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-variant-numeric: tabular-nums;
}

.task-comment__bubble {
    display: block;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--text-primary);
    font-size: var(--font-size-small);
    line-height: 1.55;
    word-break: break-word;
}

/* The stamp sits under what was said, not beside the name. */
.task-comment__foot {
    margin-top: 3px;
}

.task-mention {
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(99, 102, 241, 0.14);
    color: var(--accent, #6366f1);
    font-weight: 600;
}


/* -----------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */

.task-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-button);
    background: var(--surface-subtle);
    color: var(--text-primary);
    font-size: var(--font-size-small);
    font-weight: 500;
}

.task-link-chip .icon { color: var(--text-muted); flex: none; }

.task-links__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
}

/* The add box sits below the list, quiet until it is used. A leading + hints
   at what it is for without a label. */
.task-checklist__add {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 8px 11px;
    border: 1px solid var(--border-subtle, #e3e7eb);
    border-radius: 5px;
    background: var(--surface-panel, #fff);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.task-checklist__add:focus-within {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.task-checklist__add-icon { flex: none; color: var(--text-muted); }

.task-checklist__add-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
    outline: none;
}

.task-checklist__add-input::placeholder { color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   DESCRIPTION - rich text editing

   Reads as plain text until clicked; then a formatting bar appears above a
   contentEditable box that behaves like a small word processor.
   -------------------------------------------------------------------------- */

.task-description__edit {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-strong, #d5dadf);
    border-radius: 5px;
    background: var(--surface-panel, #fff);
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.task-description__edit:focus-within {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.rich-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-subtle, #e3e7eb);
    background: var(--surface-subtle, #f6f8fa);
}

.rich-toolbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--text-secondary, #475467);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.rich-toolbar__button:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent, #6366f1);
}

.rich-toolbar__button:active { background: rgba(99, 102, 241, 0.2); }

/* The description reads as text, not as a field, until it is clicked. */
.task-description__editor {
    min-height: 96px;
    padding: 11px 13px;
    border: none;
    background: none;
    font-size: var(--font-size-small);
    line-height: 1.6;
    color: var(--text-primary);
    outline: none;
}

/* Shared read/edit typography for formatted description content. */
.rich-text { line-height: 1.6; }
.rich-text p { margin: 0 0 8px; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text ul,
.rich-text ol { margin: 4px 0 8px; padding-left: 22px; }
.rich-text li { margin: 2px 0; }
.rich-text a { color: var(--accent, #6366f1); text-decoration: underline; }
.rich-text b,
.rich-text strong { font-weight: 600; }

/* =============================================================================
   THE RECORD OPENED BESIDE SOMETHING ELSE

   From a project's Tasks tab the record arrives as a companion panel, roughly
   a third of the width it has on its own. Two columns cannot survive that: the
   right one hits its minimum, the grid overflows, and the information card ends
   up drawn across the work. So beside, it stacks - the same content in one
   column, in the order somebody reads it.
   ============================================================================= */

.task-panel--beside .task-columns {
    grid-template-columns: minmax(0, 1fr);
}

/* Stacked, the sections keep their reading order: Task information first, then
   Description, Checklist and Comments - the same order the wide two-column view
   reads left-to-right. (The side column is already first in the DOM.) */
.task-panel--beside .task-columns__side {
    order: 0;
}

.task-panel--beside .task-block,
.task-panel--beside .task-card {
    padding: 12px 13px 14px;
}

.task-panel--beside .task-block__title,
.task-panel--beside .task-card .record-section__title {
    font-size: var(--font-size-small);
}

/* At this width the label above and value below is the only arrangement that
   does not truncate somebody's name. */
.task-panel--beside .task-info__row {
    padding: 8px 0;
}

.task-panel--beside .task-overdue-banner {
    align-items: flex-start;
    line-height: 1.4;
}

.task-panel--beside .task-overdue-banner .icon { margin-top: 1px; }

/* The composer keeps its shape but loses the avatar gutter, which is 36px of a
   panel that has none to spare. */
.task-panel--beside .task-comment__avatar .task-avatar {
    width: 22px;
    height: 22px;
    font-size: 9px;
}



/* -----------------------------------------------------------------------------
   THE REPORT TAB

   A stack of cards: the report's custom fields, the rich-text report itself
   with its publish button, and the manager / date / signature sign-off.
   -------------------------------------------------------------------------- */
.task-report {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Each custom field and each sign-off row is label-over-control. */
.task-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Plain: square corners on the box you type into. It sits inside a card
   that is already rounded, and a rounded box inside a rounded box reads as
   two containers where there is only one. */
.task-report__editor {
    min-height: 160px;
    margin-top: 8px;
    border-radius: 0;
    overflow-y: auto;
}

.task-report__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* The publish button sits at the right; the stamp and the saved flag fill the
   space before it. */
.task-report__foot .button { margin-left: auto; }

.task-report__stamp { margin: 0; }

.task-report__saved {
    font-size: var(--font-size-small);
    color: var(--status-success, #16a45c);
}

.task-report__signed {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
}

/* The type-to-filter box above the assignee list. */
.task-picker__search {
    margin-bottom: 8px;
}

/* The email-rule body in the compose panel - the same rich editor, given room
   to write a message. */
.compose-rule__editor {
    min-height: 160px;
    margin-top: 8px;
    overflow-y: auto;
}

/* A widget block in the rule preview (invoice table, project card, …). There
   is no one record to fill it from at authoring time, so it shows as a labelled
   placeholder; the engine renders the real block when the rule fires. */
.compose-rule__widget {
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px dashed var(--border-color, #d0d5dd);
    border-radius: var(--radius-button);
    background: var(--surface-muted, #f7f8fa);
    color: var(--text-secondary, #667085);
    font-size: 13px;
    font-style: italic;
    text-align: center;
}