/* Batch 14: Help Centre and school-facing support. */

.r2-help-head,
.r2-support-head {
    margin-bottom: var(--r2-space-6);
}

.r2-help-context,
.r2-help-support-strip,
.r2-support-help-strip,
.r2-support-ticket-state,
.r2-support-resolution {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--r2-space-5);
    padding: var(--r2-space-5) var(--r2-space-6);
    border: 1px solid var(--r2-border);
    border-left: 4px solid var(--r2-primary);
    background: var(--r2-surface);
}

.r2-help-context h2,
.r2-help-support-strip h2,
.r2-support-resolution h2 {
    margin: 0 0 var(--r2-space-1);
    font-size: var(--r2-font-size-lg);
}

.r2-help-context p,
.r2-help-support-strip p,
.r2-support-ticket-state p,
.r2-support-help-strip span {
    margin: 0;
    color: var(--r2-text-secondary);
}

.r2-help-context__label,
.r2-support-resolution > p {
    margin: 0 0 var(--r2-space-1) !important;
    color: var(--r2-primary) !important;
    font-size: var(--r2-font-size-xs);
    font-weight: var(--r2-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.r2-help-search {
    margin: var(--r2-space-6) 0;
    max-width: 54rem;
}

.r2-help-search > label {
    display: block;
    margin-bottom: var(--r2-space-2);
    font-size: var(--r2-font-size-sm);
    font-weight: var(--r2-weight-medium);
}

.r2-help-search__row {
    display: flex;
    align-items: center;
    gap: var(--r2-space-2);
}

.r2-help-search__row input {
    flex: 1 1 24rem;
}

.r2-help-catalogue {
    display: grid;
    gap: var(--r2-space-8);
}

.r2-help-category {
    min-width: 0;
}

.r2-help-category > h2 {
    margin: 0 0 var(--r2-space-3);
    font-size: var(--r2-font-size-lg);
}

.r2-help-article-list {
    border-top: 1px solid var(--r2-border);
}

.r2-help-article-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem 2rem;
    align-items: center;
    gap: var(--r2-space-4);
    padding: var(--r2-space-4) 0;
    border-bottom: 1px solid var(--r2-divider);
    color: var(--r2-text);
    text-decoration: none;
}

.r2-help-article-row:hover {
    color: var(--r2-primary);
}

.r2-help-article-row strong,
.r2-help-article-row small {
    display: block;
}

.r2-help-article-row small {
    margin-top: var(--r2-space-1);
    color: var(--r2-text-secondary);
    line-height: var(--r2-line-normal);
}

.r2-help-article-row__meta {
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-xs);
}

.r2-help-article-row__arrow {
    font-size: var(--r2-font-size-xl);
    text-align: right;
}

.r2-help-support-strip {
    margin-top: var(--r2-space-10);
    border-left-color: var(--r2-brand-accent);
}

.r2-help-breadcrumb {
    display: flex;
    gap: var(--r2-space-2);
    margin-bottom: var(--r2-space-5);
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-sm);
}

.r2-help-breadcrumb a {
    color: var(--r2-primary);
}

.r2-help-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    gap: var(--r2-space-10);
    align-items: start;
}

.r2-help-article-body {
    min-width: 0;
    max-width: 52rem;
}

.r2-help-article-body section + section {
    margin-top: var(--r2-space-10);
}

.r2-help-article-body h2,
.r2-help-article-side h2 {
    margin: 0 0 var(--r2-space-4);
    font-size: var(--r2-font-size-lg);
}

.r2-help-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--r2-border);
}

.r2-help-steps li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--r2-space-3);
    padding: var(--r2-space-4) 0;
    border-bottom: 1px solid var(--r2-divider);
}

.r2-help-steps li > span {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 1px solid var(--r2-primary-border);
    border-radius: var(--r2-radius-pill);
    background: var(--r2-primary-soft);
    color: var(--r2-primary);
    font-size: var(--r2-font-size-xs);
    font-weight: var(--r2-weight-bold);
}

.r2-help-steps p {
    margin: 0;
    line-height: var(--r2-line-relaxed);
}

.r2-help-notes {
    padding: var(--r2-space-5);
    border-left: 4px solid var(--r2-warning-border);
    background: var(--r2-warning-soft);
}

.r2-help-notes ul {
    margin: 0;
    padding-left: 1.2rem;
}

.r2-help-notes li + li {
    margin-top: var(--r2-space-2);
}

.r2-help-article-side {
    position: sticky;
    top: var(--r2-space-5);
    padding-left: var(--r2-space-5);
    border-left: 1px solid var(--r2-border);
}

.r2-help-article-side nav {
    display: grid;
}

.r2-help-article-side nav a {
    padding: var(--r2-space-3) 0;
    border-bottom: 1px solid var(--r2-divider);
    color: var(--r2-text);
    text-decoration: none;
}

.r2-help-article-side nav strong,
.r2-help-article-side nav small {
    display: block;
}

.r2-help-article-side nav small {
    margin-top: var(--r2-space-1);
    color: var(--r2-text-muted);
    line-height: var(--r2-line-normal);
}

.r2-help-login-box {
    margin-top: var(--r2-space-6);
    padding: var(--r2-space-4);
    border: 1px solid var(--r2-border);
    background: var(--r2-surface-subtle);
}

.r2-help-login-box p {
    color: var(--r2-text-secondary);
}

.r2-support-scope-tabs,
.r2-support-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r2-space-1);
}

.r2-support-scope-tabs {
    margin-bottom: var(--r2-space-5);
    border-bottom: 1px solid var(--r2-border);
}

.r2-support-scope-tabs a,
.r2-support-status-tabs a {
    padding: var(--r2-space-2) var(--r2-space-3);
    color: var(--r2-text-secondary);
    font-size: var(--r2-font-size-sm);
    font-weight: var(--r2-weight-medium);
    text-decoration: none;
}

.r2-support-scope-tabs a {
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}

.r2-support-scope-tabs a.is-active {
    border-bottom-color: var(--r2-primary);
    color: var(--r2-primary);
}

.r2-support-status-tabs a {
    border: 1px solid transparent;
    border-radius: var(--r2-radius-md);
}

.r2-support-status-tabs a.is-active {
    border-color: var(--r2-primary-border);
    background: var(--r2-primary-soft);
    color: var(--r2-primary);
}

.r2-support-status-tabs span {
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-xs);
}

.r2-support-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--r2-space-4);
    margin-bottom: var(--r2-space-4);
}

.r2-support-filters {
    min-width: min(100%, 11rem);
}

.r2-support-filters summary,
.r2-support-reopen summary {
    color: var(--r2-primary);
    cursor: pointer;
    font-size: var(--r2-font-size-sm);
    font-weight: var(--r2-weight-medium);
}

.r2-support-filters[open] {
    width: min(100%, 56rem);
    padding: var(--r2-space-4);
    border: 1px solid var(--r2-border);
    background: var(--r2-surface);
}

.r2-support-filters form {
    display: grid;
    grid-template-columns: repeat(3, minmax(9rem, 1fr)) auto;
    gap: var(--r2-space-3);
    align-items: end;
    margin-top: var(--r2-space-3);
}

.r2-support-filters label,
.r2-support-reply label,
.r2-support-reopen label {
    display: grid;
    gap: var(--r2-space-1);
    color: var(--r2-text-secondary);
    font-size: var(--r2-font-size-sm);
}

.r2-support-list {
    border-top: 1px solid var(--r2-border);
}

.r2-support-list__head,
.r2-support-row {
    display: grid;
    grid-template-columns: minmax(22rem, 1fr) 8rem 8rem 6rem;
    gap: var(--r2-space-4);
    align-items: center;
}

.r2-support-list__head {
    padding: var(--r2-space-2) var(--r2-space-3);
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-xs);
    font-weight: var(--r2-weight-medium);
}

.r2-support-row {
    min-width: 0;
    padding: var(--r2-space-4) var(--r2-space-3);
    border-bottom: 1px solid var(--r2-divider);
    background: var(--r2-surface);
}

.r2-support-row:hover {
    background: var(--r2-surface-subtle);
}

.r2-support-row__main {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--r2-space-3);
    min-width: 0;
}

.r2-support-row__id {
    color: var(--r2-primary);
    font-family: var(--r2-font-mono);
    font-size: var(--r2-font-size-sm);
    font-weight: var(--r2-weight-bold);
}

.r2-support-row h2 {
    margin: 0;
    overflow: hidden;
    font-size: var(--r2-font-size-base);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r2-support-row p {
    display: -webkit-box;
    margin: var(--r2-space-1) 0 0;
    overflow: hidden;
    color: var(--r2-text-secondary);
    font-size: var(--r2-font-size-sm);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.r2-support-row small {
    display: block;
    margin-top: var(--r2-space-1);
    color: var(--r2-text-muted);
}

.r2-support-row__updated time,
.r2-support-row__updated small {
    display: block;
}

.r2-support-status {
    display: inline-flex;
    align-items: center;
    gap: var(--r2-space-1);
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--r2-border);
    border-radius: var(--r2-radius-pill);
    background: var(--r2-surface-muted);
    color: var(--r2-text-secondary);
    font-size: var(--r2-font-size-xs);
    font-weight: var(--r2-weight-medium);
    white-space: nowrap;
}

.r2-support-status::before {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.r2-support-status--received,
.r2-support-status--seen {
    border-color: var(--r2-info-border);
    background: var(--r2-info-soft);
    color: var(--r2-info);
}

.r2-support-status--in_progress {
    border-color: var(--r2-warning-border);
    background: var(--r2-warning-soft);
    color: var(--r2-warning);
}

.r2-support-status--done {
    border-color: var(--r2-success-border);
    background: var(--r2-success-soft);
    color: var(--r2-success);
}

.r2-support-empty > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r2-space-2);
}

.r2-support-help-strip {
    margin-top: var(--r2-space-8);
    border-left-color: var(--r2-info);
}

.r2-support-help-strip div {
    display: grid;
    gap: var(--r2-space-1);
}

.r2-support-help-strip a {
    color: var(--r2-primary);
    font-weight: var(--r2-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.r2-support-ticket-state {
    margin-bottom: var(--r2-space-5);
    padding-block: var(--r2-space-4);
    border-left-color: var(--r2-border-strong);
}

.r2-support-ticket-state > div {
    display: flex;
    align-items: center;
    gap: var(--r2-space-3);
}

.r2-support-ticket-state time {
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-xs);
}

.r2-support-resolution {
    display: block;
    margin-bottom: var(--r2-space-6);
    border-left-color: var(--r2-success);
    background: var(--r2-success-soft);
}

.r2-support-resolution > div {
    margin: var(--r2-space-3) 0;
    white-space: pre-wrap;
}

.r2-support-resolution small {
    color: var(--r2-text-muted);
}

.r2-support-conversation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--r2-space-6);
    align-items: start;
}

.r2-support-conversation {
    min-width: 0;
}

.r2-support-conversation__head,
.r2-support-reply__head,
.r2-support-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--r2-space-3);
    margin-bottom: var(--r2-space-4);
}

.r2-support-conversation__head h2,
.r2-support-reply__head h2,
.r2-support-ticket-side h2 {
    margin: 0;
    font-size: var(--r2-font-size-lg);
}

.r2-support-conversation__head p,
.r2-support-reply__head p {
    margin: var(--r2-space-1) 0 0;
    color: var(--r2-text-secondary);
    font-size: var(--r2-font-size-sm);
}

.r2-support-conversation__head > span,
.r2-support-side-head > span {
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-sm);
}

.r2-support-message {
    max-width: 85%;
    margin-bottom: var(--r2-space-3);
    padding: var(--r2-space-4);
    border: 1px solid var(--r2-border);
    background: var(--r2-surface);
}

.r2-support-message--user {
    margin-left: auto;
    border-color: var(--r2-primary-border);
    background: var(--r2-primary-soft);
}

.r2-support-message--support,
.r2-support-message.is-resolution {
    border-left: 4px solid var(--r2-primary);
}

.r2-support-message--status,
.r2-support-message--system {
    max-width: 100%;
    padding-block: var(--r2-space-2);
    border-style: dashed;
    background: var(--r2-surface-subtle);
    color: var(--r2-text-secondary);
}

.r2-support-message header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--r2-space-2);
    margin-bottom: var(--r2-space-2);
    font-size: var(--r2-font-size-sm);
}

.r2-support-message header time {
    margin-left: auto;
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-xs);
}

.r2-support-message header span {
    padding: 0.1rem 0.35rem;
    border-radius: var(--r2-radius-sm);
    background: var(--r2-success-soft);
    color: var(--r2-success);
    font-size: var(--r2-font-size-xs);
}

.r2-support-message p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: var(--r2-line-relaxed);
}

.r2-support-reply {
    margin-top: var(--r2-space-8);
    padding-top: var(--r2-space-5);
    border-top: 1px solid var(--r2-border);
}

.r2-support-reply textarea,
.r2-support-reopen textarea {
    width: 100%;
    resize: vertical;
}

.r2-support-reply label > small {
    justify-self: end;
    color: var(--r2-text-muted);
}

.r2-support-files input {
    width: 100%;
}

.r2-support-reply__actions {
    display: flex;
    gap: var(--r2-space-2);
    margin-top: var(--r2-space-4);
}

.r2-support-form-error {
    margin-top: var(--r2-space-3);
    padding: var(--r2-space-3);
    border: 1px solid var(--r2-danger-border);
    background: var(--r2-danger-soft);
    color: var(--r2-danger);
    font-size: var(--r2-font-size-sm);
}

.r2-support-draft-notice {
    margin-bottom: var(--r2-space-3);
    padding: var(--r2-space-2) var(--r2-space-3);
    border: 1px solid var(--r2-info-border);
    background: var(--r2-info-soft);
    color: var(--r2-info);
    font-size: var(--r2-font-size-sm);
}

.r2-upload-progress {
    position: relative;
    height: 1.5rem;
    margin-top: var(--r2-space-3);
    overflow: hidden;
    border: 1px solid var(--r2-border);
    background: var(--r2-surface-muted);
}

.r2-upload-progress > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--r2-primary-soft);
    transition: width var(--r2-duration-fast) linear;
}

.r2-upload-progress > small {
    position: relative;
    z-index: 1;
    display: grid;
    height: 100%;
    place-items: center;
    color: var(--r2-text-secondary);
}

.r2-support-reopen {
    margin-top: var(--r2-space-6);
    padding: var(--r2-space-4);
    border: 1px solid var(--r2-border);
    background: var(--r2-surface-subtle);
}

.r2-support-reopen form {
    display: grid;
    gap: var(--r2-space-3);
    margin-top: var(--r2-space-3);
}

.r2-support-ticket-side {
    display: grid;
    gap: var(--r2-space-5);
}

.r2-support-ticket-side > section {
    padding-bottom: var(--r2-space-5);
    border-bottom: 1px solid var(--r2-border);
}

.r2-support-ticket-side dl {
    margin: 0;
}

.r2-support-ticket-side dl > div {
    display: grid;
    gap: var(--r2-space-1);
    padding: var(--r2-space-2) 0;
}

.r2-support-ticket-side dt {
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-xs);
}

.r2-support-ticket-side dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.r2-support-file-list {
    display: grid;
}

.r2-support-file-list a {
    display: grid;
    gap: var(--r2-space-1);
    padding: var(--r2-space-2) 0;
    border-bottom: 1px solid var(--r2-divider);
    color: var(--r2-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.r2-support-file-list small,
.r2-support-ticket-side > section > p {
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-xs);
}

.r2-support-new-ticket {
    width: 100%;
}

.r2-support-modal {
    width: min(42rem, calc(100vw - 2rem));
}

.r2-support-modal__body {
    display: grid;
    gap: var(--r2-space-4);
}

.r2-support-modal__status {
    display: flex;
    justify-content: space-between;
    gap: var(--r2-space-3);
    color: var(--r2-text-muted);
    font-size: var(--r2-font-size-xs);
}

@media (max-width: 980px) {
    .r2-help-article-layout,
    .r2-support-conversation-layout {
        grid-template-columns: 1fr;
    }

    .r2-help-article-side {
        position: static;
        padding: var(--r2-space-5) 0 0;
        border-top: 1px solid var(--r2-border);
        border-left: 0;
    }

    .r2-support-list {
        overflow-x: auto;
    }

    .r2-support-list__head,
    .r2-support-row {
        min-width: 48rem;
    }

    .r2-support-ticket-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .r2-help-context,
    .r2-help-support-strip,
    .r2-support-help-strip,
    .r2-support-ticket-state {
        align-items: flex-start;
        flex-direction: column;
    }

    .r2-help-search__row,
    .r2-support-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .r2-help-article-row {
        grid-template-columns: minmax(0, 1fr) 1.5rem;
    }

    .r2-help-article-row__meta {
        display: none;
    }

    .r2-support-filters[open] {
        width: 100%;
    }

    .r2-support-filters form {
        grid-template-columns: 1fr;
    }

    .r2-support-message {
        max-width: 100%;
    }

    .r2-support-ticket-side {
        grid-template-columns: 1fr;
    }
}

/* Batch 20 manual review: distinguish instructions from support requests. */
.r2-help-instructions-head {
    max-width: 48rem;
    margin-top: var(--r2-space-7);
    padding-top: var(--r2-space-6);
    border-top: 1px solid var(--r2-border);
}

.r2-help-instructions-head h2,
.r2-help-instructions-head p {
    margin: 0;
}

.r2-help-instructions-head h2 {
    margin-top: var(--r2-space-1);
    font-size: var(--r2-font-size-xl);
}

.r2-help-instructions-head > p:last-child {
    margin-top: var(--r2-space-2);
    color: var(--r2-text-secondary);
}

.r2-help-instructions-head + .r2-help-search {
    margin-top: var(--r2-space-4);
}

.r2-help-support-strip .r2-eyebrow {
    margin-bottom: var(--r2-space-1);
}