/* An issue's activity trail in tabs (assets/js/activity.js): issue drawer and worksheet cards. */

/* ── Activity — an issue's trail in tabs (assets/js/activity.js) ──────────
   Shared by the issue drawer and the worksheet cards. The colour tokens are
   set on .ws-act itself, since the drawer is not inside the worksheet's .ws. */
.ws-act {
    --ws-ink: var(--ink);
    --ws-ink-2: var(--ink-3);
    --ws-mute: var(--muted-ink);
    --ws-line: var(--line);
    --ws-surface: #FFFFFF;
    --ws-acc: var(--primary);
    --ws-acc-soft: var(--primary-soft);
    --ws-ok: var(--success);
    --ws-ok-soft: var(--success-soft);
    --ws-warn: var(--warning-ink);
    --ws-warn-soft: var(--warning-soft);
    --ws-plum: var(--plum);
    --ws-plum-soft: var(--plum-soft);
    --ws-r-chip: 6px;
}

.ws-act__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 9px;
}

.ws-act__title {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ws-mute);
}

.ws-act__meta {
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--ws-mute);
}

.ws-act__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ws-act__tab:focus-visible,
.ws-act__more:focus-visible,
.ws-act__menu button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
    border-color: var(--ws-acc);
}

.ws-act__more {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    color: var(--ws-mute);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
}

.ws-act__more:hover,
.ws-act__more[aria-expanded="true"] {
    background: var(--surface-3);
    color: var(--ws-ink);
}

.ws-act__menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 5;
    min-width: 170px;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.ws-act__menu[hidden] {
    display: none;
}

.ws-act__menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: none;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ws-ink-2);
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
}

.ws-act__menu button:hover {
    background: var(--surface-3);
    color: var(--ws-ink);
}

.ws-act__menu button[aria-checked="true"] {
    color: var(--ws-acc);
    font-weight: 600;
}

.ws-act__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ws-act__item {
    display: flex;
    gap: 11px;
    padding: 12px 2px;
    border-bottom: 1px solid #F2F3F6;
}

.ws-act__item:last-child {
    border-bottom: none;
}

.ws-act__av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .3px;
}

.ws-act__main {
    min-width: 0;
    flex: 1;
}

.ws-act__who {
    font-size: var(--fs-sm);
    color: var(--ws-ink-2);
    line-height: 1.45;
}

.ws-act__who b {
    color: var(--ws-ink);
    font-weight: 600;
}

.ws-act__when {
    display: inline-block;
    font-size: var(--fs-xs);
    color: var(--ws-mute);
    margin-top: 1px;
}

.ws-act__change {
    margin-top: 7px;
    font-size: var(--fs-sm);
    color: var(--ws-ink);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ws-act__arrow,
.ws-act__none {
    color: var(--ws-mute);
}

.ws-act__loz {
    font-size: var(--fs-2xs);
    font-weight: 700;
    border-radius: var(--ws-r-chip);
    padding: 2px 8px;
    letter-spacing: .2px;
    background: var(--surface-3);
    color: var(--muted-ink);
}

.ws-act__loz--prog {
    background: var(--ws-acc-soft);
    color: var(--ws-acc);
}

.ws-act__loz--rev {
    background: var(--ws-plum-soft);
    color: var(--ws-plum);
}

.ws-act__loz--done {
    background: var(--ws-ok-soft);
    color: var(--ws-ok);
}

.ws-act__loz--hold {
    background: var(--ws-warn-soft);
    color: var(--ws-warn);
}

.ws-act__body {
    margin-top: 6px;
    font-size: var(--fs-sm);
    color: var(--ws-ink-2);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ws-act__files {
    color: var(--ws-acc);
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-left: 6px;
    white-space: nowrap;
}

.ws-act__jump {
    border: none;
    background: none;
    padding: 0;
    margin-left: 8px;
    font: inherit;
    font-size: var(--fs-xs);
    color: var(--ws-acc);
    font-weight: 600;
    cursor: pointer;
}

.ws-act__jump:hover {
    text-decoration: underline;
}

.ws-act__empty,
.ws-act__loading {
    padding: 14px 4px;
    color: var(--ws-mute);
    font-size: var(--fs-sm);
    margin: 0;
}

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

/* the files attached to a work-log entry (activity.js patActItem): cards that open in the viewer */
.ws-act__filelist {
    margin-top: 8px;
}

.ws-act__files-h {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--ws-mute, var(--muted-ink));
}

.ws-act__files-h em {
    font-style: normal;
    margin-left: 2px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface-3);
}

.ws-act__filelist .ws-files {
    margin-top: 6px;
}