/* Issues: the whole-roster view of what everyone needs to fix. */

/* Type and spacing are sized so the page reads at 100% zoom; the whole scale
   is roughly 1.15x of the site's usual density. */

:root {
    --sev-high: #ff5b52;
    --sev-medium: #e0b13d;
    --sev-low: #7fa8c9;
}

.iss-page {
    padding: 32px 18px 54px;
    display: flex;
    justify-content: center;
}

.iss-shell {
    width: 100%;
    max-width: 1260px;
}

/* Intro */
.iss-intro { margin-bottom: 25px; }
.iss-kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 13px;
    color: #7fa8c9;
    margin-bottom: 7px;
}
.iss-title {
    margin: 0;
    font-size: 37px;
    font-weight: 700;
    color: var(--color-main);
}
.iss-meta {
    margin-top: 9px;
    color: #9bb0b8;
    font-size: 16px;
}
.iss-meta-value { color: var(--color-main); font-weight: 700; }
/* Provenance sits at the foot of the page: worth having, not worth leading with. */
.iss-provenance {
    margin-top: 12px;
    color: #7c8b92;
    font-size: 13px;
}

/* Severity dot: the one shape that carries severity everywhere on this page. */
.iss-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.iss-dot-High { background: var(--sev-high); }
.iss-dot-Medium { background: var(--sev-medium); }
.iss-dot-Low { background: var(--sev-low); }

/* Controls */
.iss-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.iss-severities { display: flex; gap: 11px; }
.iss-sev {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #2b2b2b;
    border: 1px solid #3d3d3d;
    border-radius: 13px;
    padding: 11px 18px;
    color: #8a9ba3;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.12s, border-color 0.12s;
}
.iss-sev.is-active { opacity: 1; }
.iss-sev:hover { border-color: #5a5a5a; }
.iss-sev.is-active.iss-sev-High { border-color: rgba(255, 91, 82, 0.5); }
.iss-sev.is-active.iss-sev-Medium { border-color: rgba(224, 177, 61, 0.5); }
.iss-sev.is-active.iss-sev-Low { border-color: rgba(127, 168, 201, 0.5); }
.iss-sev-count {
    font-size: 23px;
    font-weight: 700;
    color: var(--color-main);
    font-variant-numeric: tabular-nums;
}
.iss-sev-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
}

.iss-tools {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-left: auto;
}
.iss-search, .iss-sort {
    background: #2b2b2b;
    border: 1px solid #3d3d3d;
    border-radius: 8px;
    color: var(--color-main);
    font-family: inherit;
    font-size: 15px;
    padding: 9px 12px;
}
.iss-search { width: 195px; }
.iss-search:focus, .iss-sort:focus {
    outline: none;
    border-color: var(--color-active);
}
.iss-sort-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a9ba3;
}

/* Type filter chips */
.iss-types {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 16px;
}
.iss-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2b2b2b;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    padding: 6px 14px;
    color: #9bb0b8;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.iss-type:hover { border-color: #5a5a5a; color: var(--color-main); }
.iss-type.is-active {
    background: #35424e;
    border-color: var(--sev-low);
    color: var(--color-main);
}
.iss-type-count {
    font-variant-numeric: tabular-nums;
    color: #7c8b92;
    font-size: 12px;
}
.iss-type.is-active .iss-type-count { color: var(--color-main); }

.iss-count-line {
    font-size: 14px;
    color: #7c8b92;
    margin-bottom: 14px;
}

/* Cards */
.iss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
    align-items: start;
}
.iss-card {
    background: #2b2b2b;
    border: 1px solid #3a3a3a;
    border-left-width: 3px;
    border-radius: 13px;
    padding: 14px 16px 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.iss-card[data-worst="3"] { border-left-color: var(--sev-high); }
.iss-card[data-worst="2"] { border-left-color: var(--sev-medium); }
.iss-card[data-worst="1"] { border-left-color: var(--sev-low); }

.iss-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid #383838;
}
.iss-class-icon {
    width: 25px;
    height: 25px;
    border-radius: 4px;
}
.iss-name {
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
}
.iss-name:hover { text-decoration: underline; }
.iss-armory {
    display: inline-flex;
    opacity: 0.55;
}
.iss-armory:hover { opacity: 1; }
.iss-armory img {
    width: 17px;
    height: 17px;
}
.iss-rank {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7c8b92;
    border: 1px solid #3d3d3d;
    border-radius: 4px;
    padding: 3px 6px;
}
.iss-pills {
    margin-left: auto;
    display: flex;
    gap: 6px;
}
.iss-pill {
    min-width: 23px;
    text-align: center;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1c1c1c;
}
.iss-pill-High { background: var(--sev-high); }
.iss-pill-Medium { background: var(--sev-medium); }
.iss-pill-Low { background: var(--sev-low); }

.iss-list {
    list-style: none;
    margin: 0;
    padding: 9px 0 0;
}
.iss-item {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 4px 0;
    font-size: 15px;
    cursor: help;
}
.iss-item .iss-dot { align-self: center; }
.iss-label { color: var(--color-main); }
.iss-slot {
    color: #8a9ba3;
    font-size: 14px;
    margin-left: auto;
    text-align: right;
}

/* States */
.iss-empty, .iss-all-clear {
    background: #2b2b2b;
    border: 1px solid #3a3a3a;
    border-radius: 13px;
    padding: 30px;
    text-align: center;
    color: #9bb0b8;
    font-size: 17px;
}
.iss-all-clear-mark::after {
    content: "✔";
    color: #4caf50;
    font-size: 23px;
    padding-right: 9px;
}

/* Asides: the members that are not on the board. */
.iss-aside {
    margin-top: 20px;
    background: #2b2b2b;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    color: #9bb0b8;
}
.iss-aside summary { cursor: pointer; }
.iss-praise { color: #4caf50; }
.iss-aside-warn { border-color: rgba(224, 177, 61, 0.4); }
.iss-aside-names {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    padding-top: 12px;
    color: #8a9ba3;
    line-height: 1.6;
}
.iss-clean-name { font-weight: 600; }

.iss-legend {
    margin-top: 25px;
    font-size: 14px;
    color: #7c8b92;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}
.iss-legend .iss-dot { margin-right: 5px; }
.iss-legend-sep { color: #555; }

@media (max-width: 640px) {
    .iss-tools { margin-left: 0; width: 100%; }
    .iss-search { flex: 1; width: auto; }
    .iss-grid { grid-template-columns: 1fr; }
}