/* The issue drawer (pages/partials/issue-drawer.php, assets/js/issue-drawer.js). */

.scrim {
    position: fixed;
    inset: 0;
    background: rgba(9, 30, 66, .5);
    display: flex;
    justify-content: flex-end;
    z-index: 50;
}

.drawer {
    background: #fff;
    width: min(600px, 100%);
    height: 100%;
    overflow-y: auto;
    padding: 22px 26px 50px;
}

.dw-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.drawer h2 {
    margin: 4px 0 12px;
    font-size: var(--fs-xl);
    font-weight: 600;
}

.dw-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.props {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 12px;
    align-items: center;
}

.props .k {
    color: var(--muted-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.props select,
.props input {
    max-width: 230px;
    width: 100%;
}

.sect {
    border-top: 1px solid var(--line);
    margin-top: 16px;
    padding-top: 13px;
}

.sect h4 {
    margin: 0 0 5px;
    font-size: var(--fs-md);
    font-weight: 700;
}

.sect p {
    margin: 3px 0 8px;
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

.log {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

.log li {
    margin-bottom: 4px;
}

.callout {
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin: 6px 0;
    font-size: var(--fs-sm);
}

.co-amber {
    background: var(--warning-soft);
    border: 1px solid var(--warning-line);
}

.co-plum {
    background: var(--plum-soft);
    border: 1px solid #C0B6F2;
}

.callout p {
    margin: 0 0 8px;
}

.qbtns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: no-preference) {
    .drawer {
        animation: slidein .16s ease-out;
    }
}

@keyframes slidein {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

/* The drawer has to sit above the fixed sidebar (z-index 1001), and the
   modals it launches have to sit above the drawer. */
.scrim {
    z-index: 1005;
}

/* issue drawer: the epic's details, above Hold */
.dw-epic-fields h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dw-epic-fields {
    background: #F7F9FF;
    border-radius: 8px;
    padding: 10px 12px;
}

/* The small "Push…" button beside the due date. */
.btn.dw-push-btn {
    padding: 2px 8px;
    font-size: var(--fs-xs);
    margin-left: 6px;
}

.props.dw-overdue-props {
    grid-template-columns: 120px 1fr;
}

/* Overdue reason not picked yet. */
.props .mini-sel.mini-sel-empty {
    border-color: #FF8F73;
    background: var(--danger-soft);
}

/* The epic name beside the "Epic details" heading (custom-fields.js). */
.dw-epic-fields h4 .dw-epic-name {
    font-weight: 400;
}

/* The comment count beside the drawer's "Comments" heading. */
.sect-h .sect-n {
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-2xs);
    font-weight: 700;
}

.sect-h .sect-n[hidden] {
    display: none;
}

/* An issue under a goal handed from the viewer to a new owner (issue-drawer.js renderDrawer). */
.dw-ro {
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--warning-line);
    border-radius: var(--r-md);
    background: var(--warning-soft);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--ink-2);
}

.dw-ro b {
    color: var(--warning-ink);
}

/* Who reviews the issue, under its status, for a manager who does not (lib/access.php). */
.dw-revnote {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-2xs);
}

/* An issue in an epic shared with the viewer to look at only (issue-drawer.js renderDrawer). */
.dw-ro--view {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-color: var(--info-soft);
    background: var(--info-soft);
}

.dw-ro--view > .bi {
    margin-top: 1px;
    color: var(--info-ink);
}

.dw-ro--view b {
    color: var(--info-ink);
}