/* =============================================
   Help Center (help_center.html): Support
   Tickets, Contact Us and What's New, the
   release notes. The release note pop-up
   (_release_note_modal.html) shares the notes'
   meta line and body. Then the ticket pages
   (tickets/).
   ============================================= */

/* Wide screens: What's New, with Contact Us beside it */
.help-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1100px) {
    .help-layout {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        gap: 22px;
    }

    .help-section--news {
        grid-column: 1;
        grid-row: 1;
    }

    .help-section--contact {
        grid-column: 2;
        grid-row: 1;
    }
}

.help-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-contact li + li {
    margin-top: 10px;
}

.help-contact__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
}

.help-contact__link .fa {
    width: 18px;
    color: var(--in-text-faint);
    text-align: center;
}

/* ----- Release notes: one after another in What's New ----- */
.release-note {
    padding: 16px 16px 18px;
}

.release-note + .release-note {
    border-top: 1px solid var(--in-border-soft);
}

.release-note-meta {
    margin-bottom: 4px;
    color: var(--in-text-faint);
    font-size: 0.8rem;
}

/* !important: styles.css sets every h3's size, !important, on phones */
.release-note-title {
    margin: 0 0 8px;
    color: var(--in-text);
    font-family: inherit;
    font-size: 1.05rem !important;
    font-weight: 600;
    line-height: 1.35;
}

.release-note-body {
    color: var(--in-text-2);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* The body is HTML, from the blog posts' editor in the Django admin. Text
   pasted into it keeps its document's colors and fonts, so the theme's win
   (black text would vanish in dark mode). */
.release-note-body * {
    background-color: transparent !important;
    font-family: inherit !important;
}

.release-note-body :not(a) {
    color: inherit !important;
}

.release-note-body ul,
.release-note-body ol {
    padding-left: 1.5em;
}

.release-note-body > :last-child {
    margin-bottom: 0;
}

/* ----- Support tickets. A status colored by whose turn it is, as the
   application statuses are: Open waits on Flett Exchange, Replied on the
   installer. ----- */
.ticket-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--in-flett-wash);
    color: var(--in-flett-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ticket-status--replied {
    background-color: var(--in-amber-wash);
    color: var(--in-amber-text);
}

.ticket-status--resolved {
    background-color: var(--in-complete-wash);
    color: var(--in-complete-text);
}

/* The messages, oldest first: the installer's with an amber edge, Flett
   Exchange's with the accent, as the facility page's history marks them */
.ticket-thread {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticket-message {
    padding: 14px 16px 16px;
    background-color: var(--in-sheet);
    box-shadow: inset 3px 0 0 var(--in-amber);
}

.ticket-message + .ticket-message {
    border-top: 1px solid var(--in-border-soft);
}

.ticket-message--flett {
    background-color: var(--in-surface);
    box-shadow: inset 3px 0 0 var(--in-accent);
}

.ticket-message__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0 0 6px;
    font-size: 0.8rem;
    line-height: 1.5;
}

.ticket-message__author {
    color: var(--in-text);
    font-weight: 700;
}

.ticket-message__tag {
    color: var(--in-accent);
    font-weight: 600;
}

.ticket-message__time {
    margin-left: auto;
    color: var(--in-text-faint);
    font-size: 0.75rem;
}

.ticket-message__text {
    color: var(--in-text-2);
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A message's images, as thumbnails that open the image */
.ticket-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.ticket-image {
    display: block;
    width: 160px;
    height: 110px;
    overflow: hidden;
    border: 1px solid var(--in-border);
    border-radius: 6px;
    background-color: var(--in-wash);
}

.ticket-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticket-image:focus {
    outline: none;
}

.ticket-image:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

/* The image picker on the new ticket and reply forms */
.ticket-images {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 1px dashed var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-sheet);
    color: var(--in-text);
    font-size: 0.85rem;
}

.ticket-images:focus {
    border-color: var(--in-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--in-focus);
}