/* Issue Boards (/admin/issues). Dev tooling that rides PlayerLayout, so it is
   styled with the semantic tokens rather than Tailwind — dark is the default
   theme and light comes for free from tokens.css. Layout: an island-rendered
   page header (one per client route) over either a board-card grid, a
   horizontal column strip, the My Issues list, or one issue's page — with the
   issue modal centered on top when a board has one open. */

.issues-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.issues-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.issues-muted {
    color: var(--sg-ink-muted);
    font-size: 0.8rem;
}

.issues-mono {
    font-family: var(--sg-font-mono);
    font-size: 0.75rem;
    color: var(--sg-ink-faint);
}

.issues-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sg-ink-muted);
    margin: 0;
}

.issues-nav__spacer {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Page header ---------------------------------------------------------- */
/* Rendered by the island, not the Razor shell: the top of a board page is that
   board, and the top of an issue page is that issue. The back link reuses
   .admin-back so it reads exactly like the shell's BackLink everywhere else. */

.issues-head {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

/* The back link is a column flex item, so it would otherwise stretch the full
   width and put a click target over empty space beside it. */
.issues-head > .admin-back {
    align-self: flex-start;
}

.issues-head--framed {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--sg-edge-faint);
}

.issues-head__row,
.issues-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.issues-head__title {
    margin: 0;
    font-family: var(--sg-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--sg-ink-strong);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* An issue title is a sentence, not a page name — smaller, with the id set in
   mono ahead of it so the number reads as an identifier. */
.issues-head__title--issue {
    font-size: 1.2rem;
    font-family: inherit;
    font-weight: 700;
}

.issues-head__id {
    margin-right: 0.4rem;
    font-family: var(--sg-font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sg-ink-faint);
}

/* --- Nav + filters -------------------------------------------------------- */

.issues-nav,
.issues-list-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.issues-nav {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--sg-edge-faint);
}

.issues-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.2rem;
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-edge-faint);
    border-radius: var(--sg-radius-md);
}

.issues-tab {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--sg-radius-sm);
    background: transparent;
    color: var(--sg-ink-muted);
    cursor: pointer;
    transition: background-color var(--sg-transition), color var(--sg-transition);
}

.issues-tab:hover {
    color: var(--sg-ink-strong);
    background: var(--sg-surface-hover);
}

.issues-tab--active {
    background: var(--sg-accent-soft);
    border-color: var(--sg-accent);
    color: var(--sg-accent-strong);
}

/* Repo tabs on the board list, below the "Boards" head row. */
.issues-board-tabs {
    align-self: flex-start;
}

.issues-tab__count {
    margin-left: 0.4rem;
    font-weight: 400;
    opacity: 0.7;
}

.issues-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.issues-filter {
    width: auto;
    min-width: 9rem;
}

.issues-filter--text {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.issues-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--sg-ink-muted);
    cursor: pointer;
}

.issues-toggle input {
    accent-color: var(--sg-accent);
}

/* Notification toggle: "on" has to read at a glance next to the other ghost
   buttons, and the disabled state (unsupported browser, no server keys, or a
   blocked permission) has to look inert rather than merely dim. */
.issues-push-toggle--on {
    border-color: var(--sg-accent);
    background: var(--sg-accent-soft);
    color: var(--sg-accent-strong);
}

.issues-push-toggle[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- Chips ---------------------------------------------------------------- */

.issues-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.issues-label,
.issues-ref,
.issues-assignee,
.issues-priority,
.issues-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: var(--sg-radius-pill);
    border: 1px solid var(--sg-edge-faint);
    white-space: nowrap;
}

.issues-label {
    background: var(--sg-accent-soft);
    color: var(--sg-accent-strong);
    border-color: transparent;
}

/* Urgency chip. Only 1-3 render at all — no priority means no chip — and the
   three read as a ramp: danger, warning, then a muted blue that is present
   without competing with the label chips beside it. */
.issues-priority {
    border-color: transparent;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.issues-priority--p1 {
    background: var(--sg-danger-soft);
    color: var(--sg-danger);
}

.issues-priority--p2 {
    background: var(--sg-warning-soft);
    color: var(--sg-warning);
}

.issues-priority--p3 {
    background: var(--sg-info-soft);
    color: var(--sg-info);
}

.issues-ref {
    background: var(--sg-neutral-soft);
    color: var(--sg-ink-muted);
    font-family: var(--sg-font-mono);
    font-weight: 500;
    text-decoration: none;
}

a.issues-ref:hover,
a.issues-ref:focus-visible {
    color: var(--sg-accent-strong);
    border-color: var(--sg-accent);
    background: var(--sg-accent-soft);
}

.issues-ref__kind {
    color: var(--sg-ink-faint);
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
}

.issues-ref__key {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issues-ref--missing {
    border-style: dashed;
    color: var(--sg-ink-faint);
}

.issues-ref__missing {
    color: var(--sg-warning);
    font-size: 0.62rem;
}

.issues-ref-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.issues-ref__remove {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--sg-ink-faint);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.issues-ref__remove:hover,
.issues-ref__remove:focus-visible {
    color: var(--sg-danger);
}

.issues-ref-list[hidden] {
    display: none;
}

.issues-ref-picker {
    min-width: 0;
}

.issues-ref-picker__controls {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    gap: 0.4rem;
}

.issues-ref-picker__kind {
    min-width: 0;
}

.issues-ref-results {
    display: flex;
    flex-direction: column;
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--sg-edge);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface-raised);
    box-shadow: var(--sg-shadow-1);
}

.issues-ref-results[hidden] {
    display: none;
}

.issues-ref-result {
    border: 0;
    border-bottom: 1px solid var(--sg-edge-faint);
    padding: 0.45rem 0.6rem;
    background: transparent;
    color: var(--sg-ink);
    text-align: left;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.issues-ref-result:last-child {
    border-bottom: 0;
}

.issues-ref-result:hover,
.issues-ref-result:focus-visible {
    background: var(--sg-surface-hover);
    color: var(--sg-ink-strong);
}

.issues-assignee {
    background: var(--sg-gold-soft);
    color: var(--sg-gold);
    border-color: transparent;
}

.issues-count-chip {
    background: var(--sg-surface-sunken);
    color: var(--sg-ink-muted);
    font-weight: 500;
}

.issues-count-chip__value {
    font-weight: 700;
    color: var(--sg-ink-strong);
}

/* --- Board list ----------------------------------------------------------- */

.issues-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}

.issues-board-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    background: var(--sg-surface);
    border: 1px solid var(--sg-edge);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-1);
    cursor: pointer;
    transition: border-color var(--sg-transition), background-color var(--sg-transition);
}

.issues-board-card:hover {
    border-color: var(--sg-accent);
    background: var(--sg-surface-hover);
}

.issues-board-card--archived {
    opacity: 0.65;
}

.issues-board-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sg-ink-strong);
    margin: 0;
}

/* A pinned board sorts first and says so with this corner mark — nothing else
   about the card changes. Muted rather than accent-coloured: on a grid where
   several boards are pinned, an accent dot in every corner reads as noise. The
   icon sits over the card's padding, so the title reserves room for it. */
.issues-board-card__pin {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: inline-flex;
    color: var(--sg-ink-muted);
    pointer-events: none;
}

.issues-board-card__pin svg {
    display: block;
    width: 0.85rem;
    height: 0.85rem;
}

.issues-board-card--pinned .issues-board-card__name {
    padding-right: 1.3rem;
}

.issues-board-card__desc,
.issues-head__desc {
    margin: 0;
    font-size: 0.82rem;
    color: var(--sg-ink-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.issues-board-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Everything below the card's divider stacks: the project/archived tags, then
   refs, then the right-aligned Pin/Archive/Delete row. */
.issues-board-card__foot {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--sg-edge-faint);
}

.issues-board-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* --- Column strip --------------------------------------------------------- */

.issues-columns {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.6rem;
}

.issues-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 19rem;
    max-width: 19rem;
    background: var(--sg-surface);
    border: 1px solid var(--sg-edge);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-1);
}

.issues-column__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--sg-edge-faint);
    cursor: grab;
}

.issues-column__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sg-ink-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issues-column__count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sg-ink-faint);
    font-family: var(--sg-font-mono);
}

.issues-column__rename {
    flex: 1 1 auto;
    min-width: 0;
}

.issues-column__cards {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.5rem;
    min-height: 3.5rem;
    max-height: 62vh;
    overflow-y: auto;
    border-radius: var(--sg-radius-md);
}

.issues-column__empty {
    margin: 0;
    padding: 0.6rem 0.2rem;
    text-align: center;
    font-size: 0.76rem;
    color: var(--sg-ink-faint);
}

.issues-column__foot {
    padding: 0.45rem 0.5rem 0.55rem;
    border-top: 1px solid var(--sg-edge-faint);
}

.issues-column__foot--composing {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.issues-add-issue {
    width: 100%;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    padding: 0.35rem 0.45rem;
    border: 1px dashed var(--sg-edge);
    border-radius: var(--sg-radius-md);
    background: transparent;
    color: var(--sg-ink-muted);
    cursor: pointer;
    transition: border-color var(--sg-transition), color var(--sg-transition);
}

.issues-add-issue:hover {
    border-color: var(--sg-accent);
    color: var(--sg-accent-strong);
}

/* --- Cards ---------------------------------------------------------------- */

.issues-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    background: var(--sg-surface-raised);
    border: 1px solid var(--sg-edge-faint);
    border-radius: var(--sg-radius-md);
    cursor: pointer;
    transition: border-color var(--sg-transition), background-color var(--sg-transition);
}

.issues-card:hover {
    border-color: var(--sg-accent);
}

.issues-card__title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sg-ink-strong);
    overflow-wrap: anywhere;
}

/* The id is a real link to the issue's own page (middle-click opens a tab), but
   it sits inside a clickable card, so it stays typographically an id until it
   is hovered. */
a.issues-card__id {
    text-decoration: none;
}

a.issues-card__id:hover,
a.issues-card__id:focus-visible {
    color: var(--sg-accent-strong);
    text-decoration: underline;
}

.issues-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--sg-ink-muted);
}

/* --- My Issues ------------------------------------------------------------ */

.issues-mine-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.issues-mine-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: var(--sg-surface);
    border: 1px solid var(--sg-edge);
    border-radius: var(--sg-radius-md);
    cursor: pointer;
    transition: border-color var(--sg-transition), background-color var(--sg-transition);
}

.issues-mine-row:hover {
    border-color: var(--sg-accent);
    background: var(--sg-surface-hover);
}

.issues-mine-row__main {
    flex: 1 1 22rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* --- Drag indicators ------------------------------------------------------ */
/* Layout-neutral: a box-shadow on the edge the drop lands at, so nothing
   reflows mid-drag. */

.issues-dragging {
    opacity: 0.4;
}

.issues-drop-above {
    box-shadow: 0 -2px 0 0 var(--sg-accent);
}

.issues-drop-below {
    box-shadow: 0 2px 0 0 var(--sg-accent);
}

.issues-drop-left {
    box-shadow: -2px 0 0 0 var(--sg-accent);
}

.issues-drop-right {
    box-shadow: 2px 0 0 0 var(--sg-accent);
}

.issues-drop-empty {
    outline: 1px dashed var(--sg-accent);
    outline-offset: -3px;
}

/* --- Forms ---------------------------------------------------------------- */

.issues-inline-form {
    margin-bottom: 0;
}

.issues-inline-form .saga-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.issues-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.7rem;
    align-items: start;
}

.issues-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.issues-form-error {
    color: var(--sg-danger);
}

.issues-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--sg-radius-sm);
    background: transparent;
    color: var(--sg-ink-faint);
    cursor: pointer;
    transition: background-color var(--sg-transition), color var(--sg-transition);
}

.issues-icon-btn:hover {
    background: var(--sg-surface-hover);
    color: var(--sg-ink-strong);
}

.issues-icon-btn--danger:hover {
    color: var(--sg-danger);
}

/* --- Issue modal ---------------------------------------------------------- */

/* The shared toast host ships at z-50; lift this island's stack above the
   modal so a save or move error raised from it stays visible. */
#issues-toasts {
    z-index: 70;
}

.issues-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    overflow-y: auto;
    background: rgb(2 6 23 / 0.62);
}

.issues-modal {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: min(62rem, 100%);
    max-height: 85vh;
    overflow-y: auto;
    padding: 0 1.25rem 1.25rem;
    background: var(--sg-surface);
    border: 1px solid var(--sg-edge);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-2);
}

.issues-modal:focus {
    outline: none;
}

/* Sticky so the id, the Open ↗ link, and the close button stay reachable while
   a long thread scrolls under them. The negative margin lets it span the
   dialog's padding. */
.issues-modal__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 -1.25rem;
    padding: 0.85rem 1.25rem;
    background: var(--sg-surface);
    border-bottom: 1px solid var(--sg-edge-faint);
}

.issues-modal__headrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.issues-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sg-ink-strong);
    overflow-wrap: anywhere;
}

/* --- Issue detail (modal + issue page) ------------------------------------ */

.issues-detail,
.issues-detail__section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

/* Reading column on the left, metadata rail on the right (GitHub's shape). The
   rail collapses under the body on narrow viewports. */
.issues-detail__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 1.1rem;
    align-items: start;
    min-width: 0;
}

.issues-detail__main {
    min-width: 0;
}

.issues-side {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    padding-left: 1.1rem;
    border-left: 1px solid var(--sg-edge-faint);
}

.issues-side__section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.issues-side__title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-ink-muted);
}

@media (max-width: 60rem) {
    .issues-detail__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .issues-side {
        padding-left: 0;
        padding-top: 0.85rem;
        border-left: none;
        border-top: 1px solid var(--sg-edge-faint);
    }
}

.issues-side__value {
    margin: 0;
    font-size: 0.78rem;
    color: var(--sg-ink-muted);
    overflow-wrap: anywhere;
}

.issues-side__lines {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.issues-detail__body {
    min-height: 3.5rem;
    padding: 0.7rem 0.85rem;
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-edge-faint);
    border-radius: var(--sg-radius-md);
}

/* The standalone issue page: a reading column plus its rail, not the board's
   full width. */
.issues-page {
    width: 100%;
    max-width: 70rem;
}

.issues-page__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- Issue edit form ------------------------------------------------------ */

.issues-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-edge-faint);
    border-radius: var(--sg-radius-md);
}

.issues-form__title {
    font-size: 0.95rem;
    font-weight: 600;
}

.issues-form__body {
    font-family: var(--sg-font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    resize: vertical;
}

.issues-comments {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.issues-comment {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem 0.7rem;
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-edge-faint);
    border-radius: var(--sg-radius-md);
}

.issues-comment__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.issues-comment__author {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sg-ink-strong);
}

.issues-comment__body {
    font-size: 0.82rem;
    color: var(--sg-ink);
}

/* An activity event sits in the same column as the comments but reads as a
   margin note: one line, no card, muted — the thread is what carries weight. */
.issues-event {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0 0.2rem;
    font-size: 0.76rem;
    color: var(--sg-ink-muted);
}

.issues-event__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.issues-event__when {
    color: var(--sg-ink-faint);
    white-space: nowrap;
}

/* --- Rendered markdown ---------------------------------------------------- */
/* Bodies and comments render through js/issues/markdown.mjs. The scale is
   deliberately compact: it has to read the same in a 47rem modal as on the
   issue page. */

.issues-md {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--sg-ink);
    overflow-wrap: anywhere;
}

.issues-md > :first-child {
    margin-top: 0;
}

.issues-md > :last-child {
    margin-bottom: 0;
}

.issues-md__p {
    margin: 0 0 0.6rem;
}

.issues-md__h1,
.issues-md__h2,
.issues-md__h3 {
    margin: 0.9rem 0 0.4rem;
    color: var(--sg-ink-strong);
    font-weight: 600;
    line-height: 1.3;
}

.issues-md__h1 {
    font-size: 0.98rem;
}

.issues-md__h2 {
    font-size: 0.9rem;
}

.issues-md__h3 {
    font-size: 0.84rem;
    color: var(--sg-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.issues-md__list {
    margin: 0 0 0.6rem;
    padding-left: 1.2rem;
}

.issues-md__item {
    margin: 0.15rem 0;
}

/* Task rows hang their checkbox where the bullet would be, so a mixed list
   still reads as one column of text. */
.issues-md__task {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.15rem 0 0.15rem -1.2rem;
    list-style: none;
}

.issues-md__check {
    flex: none;
    margin: 0.2rem 0 0;
    accent-color: var(--sg-accent);
}

.issues-md__check:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.issues-md__code {
    padding: 0.05rem 0.3rem;
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-edge-faint);
    border-radius: var(--sg-radius-sm);
    font-family: var(--sg-font-mono);
    font-size: 0.76rem;
}

.issues-md__pre {
    margin: 0 0 0.6rem;
    padding: 0.55rem 0.7rem;
    overflow-x: auto;
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-edge-faint);
    border-radius: var(--sg-radius-md);
}

.issues-md__pre code {
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--sg-font-mono);
    font-size: 0.76rem;
    line-height: 1.45;
    white-space: pre;
}

.issues-md__quote {
    margin: 0 0 0.6rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--sg-edge);
    color: var(--sg-ink-muted);
}

.issues-md__hr {
    margin: 0.7rem 0;
    border: 0;
    border-top: 1px solid var(--sg-edge-faint);
}

.issues-md__link {
    color: var(--sg-accent-strong);
}

.issues-comment-composer {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

@media (max-width: 640px) {
    .issues-modal-backdrop {
        padding: 0;
    }

    .issues-modal {
        width: 100%;
        max-height: 100%;
        min-height: 100%;
        border: 0;
        border-radius: 0;
    }

    .issues-column {
        flex-basis: 16rem;
        max-width: 16rem;
    }

    .issues-ref-picker__controls {
        grid-template-columns: 1fr auto;
    }

    .issues-ref-picker__kind {
        grid-column: 1 / -1;
    }
}