/* Single issue page. Loaded by view/application/issues/view.phtml, together
   with issue-status.css, which is where the --status-colour tokens live. */

/* The short, fixed-size facts sit in one panel that reflows into as many
   columns as the width allows. Everything longer (steps, description,
   attachments, responses) stays a full-width row below it. */
.issue-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.5);
}

/* Each fact takes the width its own content needs and they pack to the left.
   Equal-width columns wasted most of a wide window and pushed the last field
   onto a second row for no reason. */
.issue-facts .fact {
    flex: 0 1 auto;
    min-width: 0;
}

.issue-facts dt {
    margin: 0 0 3px;
    color: #8a8a8a;
    font-size: 0.9em;
}

.issue-facts dd {
    margin: 0;
    color: #fff;
    overflow-wrap: break-word;
}

/* Same colour the status carries in the issue list. */
.issue-facts .fact-status {
    color: var(--status-colour, #fff);
    font-weight: bold;
}

.issue-facts .fact-aside {
    color: #8a8a8a;
}

/* ---- comments ---- */

/* One bordered block per comment, so where a comment starts and ends is
   obvious. Author and time share the first line, and everything the commenter
   ticked or reported about their phone collapses into one row of tags rather
   than a paragraph each, which is what made the page so tall. */
.comment-bubble {
    margin: 0 0 12px;
    padding: 10px 14px 12px;
    background: rgba(0, 0, 0, 0.5);
    border-left: 3px solid #333;
    border-radius: 3px;
}

.comment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0 0 6px;
}

.comment-author {
    font-weight: bold;
}

.comment-time {
    color: #8a8a8a;
    font-size: 0.9em;
}

.comment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.comment-tags li {
    padding: 1px 8px 2px;
    color: #b9b9b9;
    font-size: 0.85em;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

.comment-bubble p.comment {
    margin: 0;
    color: #fff;
}

.comment-file {
    margin: 8px 0 0;
}

.comment-file-size {
    color: #8a8a8a;
}

/* ---- file drop area ---- */

/* Only styled as a drop area once the script has taken over; without it the
   plain file input is left alone and still works. */
.filedrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* A shade taller than the comment box above it, so it reads as somewhere
       to aim without taking over the form. */
    min-height: 70px;
    margin: 4px 0 0;
    padding: 16px;
    text-align: center;
    border: 2px dashed #4a4a4a;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
}

.filedrop-live {
    cursor: pointer;
}

.filedrop-live input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.filedrop-live:hover,
.filedrop-live:focus,
.filedrop-over {
    border-color: #57a900;
    background: rgba(87, 169, 0, 0.08);
}

.filedrop-has-file {
    border-style: solid;
    border-color: #57a900;
}

.filedrop-too-big {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.08);
}

.filedrop-hint {
    margin: 0;
    color: #c8c8c8;
}

.filedrop-sub {
    margin: 4px 0 0;
    color: #8a8a8a;
    font-size: 0.9em;
}

.filedrop-has-file .filedrop-sub {
    display: none;
}

.filedrop-chosen {
    margin: 0;
    color: #fff;
}

.filedrop-too-big .filedrop-chosen {
    color: #ff6b6b;
}

.filedrop-note {
    margin: 6px 0 0;
    color: #8a8a8a;
    font-size: 0.9em;
}

/* Attachments and related issues are both short and usually empty, so they
   sit side by side when there is room and stack when there is not, instead
   of taking two near-empty rows of their own. */
.issue-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 32px;
    margin: 0 0 8px;
}

.issue-columns section > :last-child {
    margin-bottom: 0;
}

.issue-columns ul {
    margin: 0;
    padding-left: 20px;
}