/* Help & support: the requester's page, the desk, and the public help center.
   Logical properties throughout (inline-start/end), so Arabic and Urdu lay out
   mirrored without a second set of rules. */

/* ── Search ─────────────────────────────────────────────────────────── */
.support-search { display: flex; gap: .5rem; }
.support-search input { flex: 1; min-width: 0; }
.support-search-lg input { font-size: 1.05rem; padding-block: .8rem; }

/* ── Help & support page: the work beside the answers ───────────────── */
.support-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
@media (max-width: 1024px) { .support-layout { grid-template-columns: minmax(0, 1fr); } }
.support-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.support-aside { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1025px) { .support-aside { position: sticky; top: 5.5rem; } }
.support-panel { padding: 1.1rem 1.2rem 1.2rem; }
@media (min-width: 640px) { .support-panel { padding: 1.4rem 1.6rem 1.5rem; } }
.support-section-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: .75rem; }
.support-count { font-size: .72rem; font-weight: 700; color: #475569; background: #f1f5f9; border-radius: 999px; padding: .05rem .5rem; }
.support-search-field { position: relative; }
.support-search-field input { width: 100%; padding-inline-start: 2.4rem; border-radius: .75rem; }
.support-search-icon { position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; display: flex; }
.support-aside-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin: 1.1rem 0 .55rem; }
.support-aside .support-article-list a { font-size: .9rem; }
.support-promise, .org-report-callout { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem; border-radius: 1rem; background: #eff6ff; border: 1px solid #dbeafe; font-size: .82rem; color: #1e3a8a; }
.support-promise p { display: flex; align-items: flex-start; gap: .55rem; }
.support-promise span { display: flex; flex-shrink: 0; margin-top: .1rem; color: #2563eb; }

/* ── Cards: your requests ───────────────────────────────────────────── */
.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .85rem;
}
.support-card {
    display: flex; flex-direction: column; gap: .3rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
    padding: .9rem 1rem; min-height: 7.5rem;
    transition: border-color .15s, box-shadow .15s;
}
a.support-card:hover { border-color: #93c5fd; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.support-card.is-open { grid-column: 1 / -1; padding: 1.1rem 1.2rem; gap: .9rem; }
.support-card-head { display: flex; align-items: flex-start; gap: .75rem; }
.support-card-head > div { flex: 1; }
.support-ref { font-size: .75rem; font-weight: 600; color: #64748b; letter-spacing: .01em; }
.support-dot {
    display: inline-block; width: .5rem; height: .5rem; border-radius: 999px;
    background: #2563eb; vertical-align: middle; margin-inline-start: .2rem;
}
.support-close {
    font-size: 1.6rem; line-height: 1; color: #94a3b8; padding: 0 .25rem;
}
.support-close:hover { color: #475569; }

/* ── The thread ─────────────────────────────────────────────────────── */
.support-thread { display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.support-message {
    border-radius: .9rem; padding: .75rem .9rem; background: #f8fafc;
    border: 1px solid #e2e8f0; max-width: 46rem;
}
.support-message.is-staff { background: #eff6fc; border-color: #bfdbfe; margin-inline-start: auto; }
.support-message.is-note { background: #fffbeb; border-color: #fcd34d; border-style: dashed; }
.support-message-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .75rem; color: #475569; margin-bottom: .3rem;
}
.support-message-meta time { color: #94a3b8; margin-inline-start: auto; }
.support-message-body { font-size: .9rem; color: #0f172a; line-height: 1.55; overflow-wrap: anywhere; }
.support-message-body a { color: #1d4ed8; text-decoration: underline; }
.support-event { text-align: center; font-size: .72rem; color: #64748b; }
.support-event time { color: #94a3b8; margin-inline-start: .25rem; }
.support-shot { display: inline-block; margin-top: .5rem; }
.support-shot img { max-width: min(100%, 22rem); max-height: 16rem; border-radius: .6rem; border: 1px solid #e2e8f0; }

/* ── Reply box, screenshots, rating ─────────────────────────────────── */
.support-reply { border-top: 1px solid #e2e8f0; padding-top: .9rem; }
.support-reply textarea { width: 100%; }
.support-reply-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: .55rem; }
.support-reply-actions .support-attach { margin-inline-end: auto; }
.support-attach { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.support-attach-button {
    font-size: .8rem; font-weight: 600; color: #1d4ed8; border: 1px dashed #93c5fd;
    border-radius: .6rem; padding: .35rem .7rem; background: #f8fbff;
}
.support-attach:focus-within .support-attach-button { outline: 2px solid #2563eb; outline-offset: 2px; }
.support-rating { background: #f8fafc; border-radius: .9rem; padding: .75rem .9rem; }
.support-rate {
    font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .35rem .9rem; border: 1px solid;
}
.support-rate.is-good { color: #166534; border-color: #86efac; background: #f0fdf4; }
.support-rate.is-bad { color: #9f1239; border-color: #fda4af; background: #fff1f2; }

/* ── New request form ───────────────────────────────────────────────── */
.support-field { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: #334155; }
.support-hint { font-size: .78rem; color: #64748b; margin-top: -.35rem; }
.support-suggest { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: .8rem; padding: .6rem .8rem; }
.support-suggest ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.support-suggest a { font-size: .85rem; font-weight: 600; color: #1d4ed8; text-decoration: underline; }
.support-suggest span { display: block; font-size: .75rem; color: #475569; }

/* ── Article lists, the help center ─────────────────────────────────── */
.support-article-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.support-article-list a { font-weight: 600; color: #1d4ed8; }
.support-article-list a:hover { text-decoration: underline; }
.support-article-list span { display: block; font-size: .82rem; color: #64748b; }
.support-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem 1.2rem;
}

/* ── The desk ───────────────────────────────────────────────────────── */
.support-queue { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.support-row {
    display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto 8rem; align-items: center; gap: .75rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: .8rem; padding: .6rem .85rem;
}
.support-row:hover { border-color: #93c5fd; }
.support-row.is-overdue { border-inline-start: 3px solid #e11d48; }
.support-row-main { display: flex; flex-direction: column; min-width: 0; }
.support-row-tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.support-row-meta { text-align: end; }
@media (max-width: 640px) {
    .support-row { grid-template-columns: minmax(0, 1fr) auto; }
    .support-row .support-ref, .support-row-meta { display: none; }
}
.support-desk-ticket { background: #fff; border: 1.5px solid #93c5fd; border-radius: 1rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.support-desk-columns { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.1rem; align-items: start; }
@media (max-width: 1024px) { .support-desk-columns { grid-template-columns: minmax(0, 1fr); } }
.support-side { display: flex; flex-direction: column; gap: .75rem; }

/* Where the request stands: badge, what happens next, the button that moves it on. */
.support-state {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .85rem;
    border-radius: .85rem; padding: .6rem .85rem; border: 1px solid #e2e8f0; background: #f8fafc;
}
.support-state.is-open { background: #eff6ff; border-color: #bfdbfe; }
.support-state.is-waiting { background: #fffbeb; border-color: #fde68a; }
.support-state.is-resolved { background: #f0fdf4; border-color: #bbf7d0; }
.support-state-text { flex: 1; min-width: 12rem; font-size: .85rem; color: #334155; }
.support-resolve { color: #166534; border-color: #86efac; }
.support-resolve:hover { background: #f0fdf4; }

/* The composer: Reply or Internal note. Which buttons and hint show follows the
   checked mode, so a note can never go out through "Send reply". */
.support-composer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.support-mode { display: inline-flex; padding: .2rem; border-radius: .7rem; background: #f1f5f9; }
.support-mode label { position: relative; cursor: pointer; font-size: .8rem; font-weight: 600; color: #475569; padding: .3rem .8rem; border-radius: .55rem; }
.support-mode input { position: absolute; opacity: 0; pointer-events: none; }
.support-mode label:has(input:checked) { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.support-mode label:has(input:focus-visible) { outline: 2px solid #2563eb; outline-offset: 1px; }
.support-composer-hint { font-size: .75rem; color: #64748b; margin-top: .3rem; }
.support-composer [data-for="note"] { display: none; }
.support-composer:has(input[name="mode"][value="note"]:checked) [data-for="note"] { display: revert; }
.support-composer:has(input[name="mode"][value="note"]:checked) [data-for="reply"] { display: none; }
.support-composer:has(input[name="mode"][value="note"]:checked) textarea { background: #fffbeb; border-color: #fcd34d; }

/* Long account history folds away until it is wanted. */
.support-fold > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; margin-bottom: 0; }
.support-fold > summary::-webkit-details-marker { display: none; }
.support-fold > summary::after { content: '+'; font-size: .9rem; color: #94a3b8; }
.support-fold[open] > summary::after { content: '−'; }

/* The requester's "it's sorted" prompt. */
.support-solved { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: .9rem; padding: .65rem .9rem; font-size: .88rem; color: #166534; }
.support-side-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .85rem; padding: .75rem .85rem; font-size: .85rem; }
.support-side-title { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-bottom: .35rem; }
.support-prop label { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; font-weight: 600; color: #475569; margin-bottom: .5rem; }
.support-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .6rem; font-size: .8rem; }
.support-facts dt { color: #64748b; }
.support-facts dd { color: #0f172a; margin: 0; }
.support-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: .7rem; }
.support-actions form { display: flex; flex-wrap: wrap; gap: .4rem; }
.support-mini-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; font-size: .8rem; }
.support-pre { margin-top: .75rem; background: #0f172a; color: #e2e8f0; font-size: .72rem; line-height: 1.5; border-radius: .6rem; padding: .8rem; overflow: auto; max-height: 24rem; white-space: pre-wrap; }

/* ── The desk's "New ticket" panel and empty state ──────────────────── */
.support-log { padding: 1.1rem 1.2rem 1.2rem; }
@media (min-width: 640px) { .support-log { padding: 1.4rem 1.6rem 1.5rem; } }
.support-log .form-error-summary { margin-bottom: 1rem; }
.support-log-form { display: flex; flex-direction: column; gap: 1rem; }
.support-log-form textarea { width: 100%; }
/* "Me": nobody to name. Hidden, not removed, so a switch back keeps what was typed. */
.support-log-form:has(input[name="for"][value="me"]:checked) .support-log-person { display: none; }
.support-log-foot {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
    border-top: 1px solid #e2e8f0; padding-top: 1rem;
}
.support-log-priority { width: 11rem; }
.support-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.5rem 1.6rem; }

/* ── Reporting an organization's page ───────────────────────────────── */
/* `!important` because each part also wears a display class of its own
   (`.support-field` is flex, `.grid` is grid), which would win over `[hidden]`. */
[data-report-only][hidden] { display: none !important; }
.support-promise.is-steps span {
    width: 1.35rem; height: 1.35rem; border-radius: 999px; align-items: center; justify-content: center;
    background: #dbeafe; color: #1d4ed8; font-size: .72rem; font-weight: 800; margin-top: 0;
}
.choice-card.is-serious:has(input:checked) { border-color: #e11d48; background: #fff1f2; box-shadow: 0 0 0 1px #e11d48 inset; }
.choice-card.is-serious input[type="radio"] { accent-color: #e11d48; }
.org-report-callout { display: block; font-size: .85rem; line-height: 1.5; border-radius: .8rem; padding: .7rem .9rem; }
.org-report-callout strong { display: block; margin-bottom: .15rem; }
.org-report-callout.is-danger { color: #881337; background: #fff1f2; border-color: #fecdd3; }
/* The desk's panel beside a report. */
.support-report.is-concern { border-color: #fecdd3; background: #fff8f8; }
.support-report-steps ol { margin: 0; padding-inline-start: 1.1rem; list-style: decimal; display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; line-height: 1.45; color: #334155; }
.support-report-steps .support-aside-label { margin-top: .9rem; }