/*==================================================================
    Forum
    ------------------------------------------------------------------
    Styles for the /forum module. Loaded after style.css so the
    forum-specific classes below win over the shared theme rules where
    they overlap (comment-box, comment-content, blog-section).

    Palette follows the existing theme:
      #fde3a7 / #fce2aa  primary gold accents
      #c8a96e / #b6914e  deep gold
      #877756            bronze
      #222 / #333 / #666 / #999  text ramp
    Latin type is Lato; Chinese uses the shared .chines helpers.
==================================================================*/

/*------------------------------------------------------------------
    1. Layout shell
------------------------------------------------------------------*/
.forum-section {
    padding: 40px 0 60px;
}

.forum-block {
    margin-bottom: 45px;
}

.forum-block-heading,
.forum-page-title {
    font-family: "Lato", sans-serif;
    color: #222222;
}

.forum-block-heading {
    font-size: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.forum-page-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 5px;
}

.forum-block-heading .chines,
.forum-page-title .chines {
    display: inline-block;
    margin-right: 10px;
    color: #222222;
}

.forum-category-page .forum-page-title .eng_wrd {
    display: block;
    font-size: 16px;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.forum-heading-row {
    margin-bottom: 24px;
}

.forum-page-desc {
    color: #666666;
    font-size: 14px;
    margin: 10px 0 0;
}

.forum-empty,
.forum-login-prompt {
    background: #fbfbfb;
    border: 1px solid #eeeeee;
    border-left: 3px solid #fde3a7;
    padding: 18px 20px;
    color: #666666;
    font-size: 14px;
    margin: 20px 0;
}

.forum-login-prompt a {
    color: #b6914e;
    font-weight: 700;
}

.forum-meta-sep {
    color: #cccccc;
    margin: 0 6px;
}

/*------------------------------------------------------------------
    2. Banner
    ------------------------------------------------------------------
    The forum banner now shares the .award-archive-banner shell (see
    style.css) with the ICFCS Awards Watch banner; its search pill
    styling (.forum-banner-search, .forum-banner-search-icon-btn,
    .forum-banner-search-input) lives there too.

    .open-forum-search is the phone-only trigger for the fullscreen
    #forum-search-overlay (see the max-width: 767px block below and the
    shared archive-search-overlay rules in style.css). Hidden here so
    desktop/tablet keep the real inline .forum-banner-search form untouched;
    the 767px block below is the only place that shows it.
------------------------------------------------------------------*/
.open-forum-search {
    display: none;
}

/*------------------------------------------------------------------
    3. Breadcrumb and action bar
------------------------------------------------------------------*/
.forum-breadcrumb {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #999999;
    margin-bottom: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-breadcrumb a {
    color: #877756;
}

.forum-breadcrumb a:hover {
    color: #b6914e;
}

.forum-breadcrumb-sep {
    margin: 0 7px;
    color: #d9d9d9;
    font-size: 16px;
}

.forum-breadcrumb-current {
    color: #666666;
}

.forum-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.forum-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    border: 1px solid #e3d9c2;
    background: #fde3a7;
    color: #222222;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.forum-btn:hover,
.forum-btn:focus {
    background: #fce2aa;
    border-color: #c8a96e;
    color: #222222;
    text-decoration: none;
}

.forum-btn-ghost {
    background: #ffffff;
    color: #666666;
}

.forum-btn-ghost:hover {
    background: #fbf7ee;
    color: #222222;
}

/*------------------------------------------------------------------
    5. Forum directory
    ------------------------------------------------------------------
    FORUM / ACTIVITY in one table, with each zone introduced by a
    full-width row. The topic and post counts sit under the forum name
    rather than in their own columns, so Activity keeps the width it
    needs for a full sentence. Builds on the shared .forum-table shell
    in section 6.
------------------------------------------------------------------*/
.forum-directory-table thead th.forum-col-latest,
.forum-directory-table tbody td.forum-col-latest {
    width: 42%;
}

.forum-directory-table tbody td {
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: middle;
}

/* Zone header — spans all four columns so the grid does not restart. */
.forum-zone-row td {
    padding: 24px 12px 9px !important;
    border-bottom: 2px solid #fde3a7 !important;
    background: #ffffff !important;
}

.forum-zone-row:first-child td {
    padding-top: 6px !important;
}

/* Zone headings (影奖区 / 影迷区 / 追星区) introduce each group of forums.
   Their size and colour live in section 18 with the rest of the Chinese type. */
.forum-zone-row .chines {
    margin-right: 10px;
}

.forum-zone-row .eng_wrd {
    font-family: "Lato", sans-serif;
    font-size: 23px;
    font-weight: 300;
    /* letter-spacing: 0.14em; */
    color: #877756;
}

.forum-directory-row:nth-child(even) td {
    background: #f7f7f6;
}

.forum-directory-row:hover td {
    background: #fbf7ee;
}

.forum-directory-name {
    display: inline-block;
    color: #222222;
}

.forum-directory-name:hover,
.forum-directory-name:focus {
    color: #b6914e;
    text-decoration: none;
}

/* No font-size here: Chinese sizing lives in section 18, and a size set at
   this depth would be overridden by it anyway. */
.forum-directory-name .chines {
    display: block;
    line-height: 1.35;
}

.forum-directory-name .eng_wrd {
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 10px;
    line-height: 1.2;
    color: #666666;
    text-transform: uppercase;
}

.forum-directory-desc {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: #666666;
    margin-top: 3px;
}

.forum-directory-stats {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999999;
}

.forum-directory-stats strong {
    color: #333333;
}

/* Activity column: the topic on top, then who and when beneath it. */
.forum-activity-line {
    display: block;
    font-family: "Lato", sans-serif;
    line-height: 1.45;
}

.forum-activity-topic {
    font-size: 13px;
    color: #333333;
}

.forum-activity-topic-link {
    color: #222222;
    font-weight: 700;
}

a.forum-activity-topic-link:hover,
a.forum-activity-topic-link:focus {
    color: #b6914e;
    text-decoration: none;
}

/* The topic's opening message. Clamped to three lines: -webkit-line-clamp is
   the only cross-browser way to cap by line count, and is supported in every
   current browser. max-height keeps the cap if the clamp is ever unsupported,
   so the row can never grow unbounded. */
.forum-activity-excerpt {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* max-height: 3.9em; */
}

/* Who and when always share one line — the username is already shortened in
   the view, so nothing here can wrap the timestamp away from it. */
.forum-activity-byline {
    margin-top: 3px;
    font-size: 11px;
    color: #999999;
    white-space: nowrap;
}

/* The shared table styling further down sets these two to display:block so the
   topic listing's LAST POST column can stack the name above the time. Here
   they must sit side by side, and a block child breaks the line no matter what
   white-space says — so they are forced back inline. Scoped to the byline, so
   the topic table keeps its stacked layout. */
.forum-activity-byline .forum-activity-user,
.forum-activity-byline .forum-activity-time {
    display: inline;
    margin-top: 0;
    font-size: inherit;
}

.forum-activity-user {
    color: #877756;
    font-weight: 700;
}

a.forum-activity-user:hover,
a.forum-activity-user:focus {
    color: #b6914e;
    text-decoration: none;
}

.forum-activity-sep {
    margin: 0 4px;
    color: #cccccc;
}

.forum-activity-time {
    font-family: "Lato", sans-serif;
    font-size: 11px;
    color: #999999;
}

.forum-activity-none {
    margin-top: 0;
    color: #bbbbbb;
}

.forum-activity-none .chines {
    margin-right: 5px;
}

/* Marks placeholder rows so sample content is never mistaken for real
   activity. Remove with ForumMockActivityService. */
.forum-activity-sample {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a9a08c;
    border: 1px solid #ebe3d2;
    background: #fdfaf3;
}

/*------------------------------------------------------------------
    6. Topic table
------------------------------------------------------------------*/
.forum-table-wrap {
    overflow-x: auto;
}

.forum-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Lato", sans-serif;
}

.forum-table thead th {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #999999;
    font-weight: 700;
    padding: 0 12px 10px;
    border-bottom: 2px solid #eeeeee;
    text-align: left;
    white-space: nowrap;
}

.forum-table thead th.forum-col-num,
.forum-table tbody td.forum-col-num {
    text-align: center;
    width: 80px;
}

.forum-table thead th.forum-col-activity,
.forum-table tbody td.forum-col-activity {
    width: 190px;
}

.forum-table tbody td {
    padding: 15px 12px;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: top;
}

.forum-topic-row:nth-child(even) td {
    background: #fbfbfb;
}

.forum-topic-row:hover td {
    background: #fbf7ee;
}

.forum-topic-row.is-pinned td {
    background: #fffaf0;
}

.forum-topic-flag {
    color: #b6914e;
    margin-right: 6px;
    font-size: 12px;
}

.forum-topic-title {
    display: inline-block;
    color: #222222;
}

.forum-topic-title:hover {
    text-decoration: none;
    color: #b6914e;
}

.forum-topic-title-cn {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}

.forum-topic-title-en {
    display: block;
    font-size: 9.5px;
    font-family: "Lato", sans-serif;
    line-height: 1.4;
    color: #999999;
}

/* News/user topics store one title in whichever language its author
   used; when that turns out to be Chinese, it still needs the Chinese
   serif face rather than the English default above. */
.forum-topic-title-en.is-chinese-title {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000000;
}

.forum-topic-title:hover .forum-topic-title-en,
.forum-topic-title:hover .forum-topic-title-cn {
    color: #b6914e;
}

.forum-topic-meta {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #999999;
}

.forum-topic-meta a {
    color: #877756;
}

.forum-topic-cat {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.forum-col-num {
    font-size: 14px;
    color: #666666;
}

.forum-activity-time {
    display: block;
    font-size: 12px;
    color: #666666;
}

.forum-activity-user {
    display: block;
    font-size: 11px;
    color: #999999;
    margin-top: 3px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.forum-topic-empty td {
    padding: 30px 12px;
    text-align: center;
    color: #999999;
}

.forum-topic-empty .chines {
    display: block;
    margin-bottom: 4px;
}

/*------------------------------------------------------------------
    7. Pagination
------------------------------------------------------------------*/
.forum-pagination-summary {
    font-family: "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #999999;
    margin: 0 0 10px;
}

.forum-category-page .forum-pagination-summary,
.forum-topic-page .forum-pagination-summary {
    display: none;
}

.forum-pagination {
    margin: 12px 0;
}

.forum-pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.forum-pagination-list li a,
.forum-pagination-list li span {
    display: block;
    min-width: 32px;
    padding: 6px 10px;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-size: 13px;
    border: 1px solid #e8e8e8;
    color: #666666;
    background: #ffffff;
}

.forum-pagination-list li a:hover {
    background: #fbf7ee;
    border-color: #c8a96e;
    color: #222222;
    text-decoration: none;
}

.forum-pagination-list li.active span {
    background: #fde3a7;
    border-color: #c8a96e;
    color: #222222;
    font-weight: 700;
}

.forum-pagination-list li.disabled span {
    color: #cccccc;
    background: #fafafa;
}

/*------------------------------------------------------------------
    8. Topic detail — post stream
------------------------------------------------------------------*/
.forum-topic-subhead {
    font-family: "Lato", sans-serif;
    font-size: 12px;
    color: #999999;
    margin: 10px 0 0;
}

.forum-topic-source {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #877756;
}

.forum-topic-source .chines {
    margin-right: 5px;
}

.forum-topic-closed {
    color: #b6914e;
}

.forum-news-lead {
    border: 1px solid #eeeeee;
    border-left: 3px solid #fde3a7;
    background: #fbfbfb;
    padding: 18px 20px;
    margin-bottom: 28px;
}

.forum-news-lead-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 14px;
}

.forum-news-lead-text {
    font-size: 14px;
    line-height: 1.7;
    color: #444444;
}

.forum-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.forum-post {
    border: 1px solid #eeeeee;
    background: #ffffff;
    margin-bottom: 18px;
}

.forum-post.is-review-post {
    border-top: 3px solid #fde3a7;
}

.forum-post-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f3f3;
    background: #fbfbfb;
}

.forum-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 42px;
}

.forum-post-byline h4 {
    margin: 0;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    color: #222222;
}

.forum-post-byline h4 a {
    color: #222222;
}

.forum-post-byline h4 a:hover {
    color: #b6914e;
}

.forum-post-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
    background: #fde3a7;
    color: #222222;
    vertical-align: middle;
}

.forum-post-badge .chines {
    margin-right: 4px;
}

.forum-post-time {
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    color: #999999;
    margin-top: 2px;
}

.forum-post-permalink {
    color: #999999;
}

.forum-post-permalink:hover {
    color: #b6914e;
}

.forum-post-body {
    padding: 20px;
}

.forum-post-text {
    font-size: 15px;
    line-height: 1.75;
    color: #333333;
    word-wrap: break-word;
}

/*------------------------------------------------------------------
    9. Review post card
------------------------------------------------------------------*/
.forum-review-card {
    display: flex;
    gap: 20px;
}

.forum-review-poster {
    flex: 0 0 110px;
}
section.blog-section.standard.forum-section.forum-topic-page.forum-topic-page-netflixthe-unheard-2 {
    padding: 30px 0;
}

.forum-review-poster img {
    width: 110px;
    height: auto;
    display: block;
}

.forum-review-content {
    flex: 1 1 auto;
    min-width: 0;
}

.forum-review-title {
    font-family: "Lato", sans-serif;
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 8px;
}

.forum-review-title a {
    color: #222222;
}

.forum-review-title a:hover {
    color: #b6914e;
}

.forum-review-rating {
    margin-bottom: 10px;
}

.forum-review-rating .fa {
    color: #ffba00;
    font-size: 13px;
}

.forum-review-score {
    margin-left: 7px;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    color: #877756;
}

.forum-review-text {
    font-size: 15px;
    line-height: 1.75;
    color: #333333;
    word-wrap: break-word;
}

.forum-review-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #877756;
}

.forum-review-more:hover {
    color: #b6914e;
    text-decoration: none;
}

.forum-review-more .chines {
    margin-right: 6px;
}

/*------------------------------------------------------------------
    9b. Posting: actions, reply boxes, composer
------------------------------------------------------------------*/
.forum-entry-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.forum-reply-toggle,
.forum-quote-btn,
.forum-edit-toggle {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 5px;
    max-width: 100%;
    border: 1px solid #e3d9c2;
    background: #ffffff;
    padding: 6px 14px;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #877756;
    cursor: pointer;
    line-height: 1.35;
    white-space: normal;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.forum-reply-toggle:hover,
.forum-reply-toggle:focus,
.forum-quote-btn:hover,
.forum-quote-btn:focus {
    background: #fbf7ee;
    border-color: #c8a96e;
}
.forum-edit-toggle:hover,
.forum-edit-toggle:focus {
    color: #b6914e;
}

.forum-reply-toggle .chines,
.forum-edit-toggle .chines {
    margin-right: 0;
    letter-spacing: 0;
}

.forum-delete-btn {
    border: 0;
    background: none;
    padding: 0;
    color: #bbbbbb;
    cursor: pointer;
    font-size: 13px;
}

.forum-delete-btn:hover,
.forum-delete-btn:focus {
    color: #b34a4a;
}

/* Destructive/edit controls close the action row. Both are icon-only, but
   deliberately stronger than the text actions so they remain easy to find. */
.forum-entry-manage-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
}

.forum-entry-actions .forum-delete-form {
    display: inline-flex !important;
}

.forum-entry-actions .forum-delete-btn,
.forum-entry-actions .forum-edit-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 3px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.forum-entry-actions .forum-delete-btn {
    border: 1px solid #d9a3a3;
    background: #fff7f7;
    color: #a94442;
}

.forum-entry-actions .forum-delete-btn:hover,
.forum-entry-actions .forum-delete-btn:focus {
    border-color: #b34a4a;
    background: #fbe7e7;
    color: #8f2929;
}

.forum-entry-actions .forum-edit-toggle {
    border: 1px solid #c8a96e;
    background: #fffaf0;
    color: #877756;
}

.forum-entry-actions .forum-edit-toggle:hover,
.forum-entry-actions .forum-edit-toggle:focus {
    border-color: #b6914e;
    background: #fde3a7;
    color: #5f5136;
}

.forum-reply-form-wrap,
.forum-edit-form-wrap {
    margin-top: 12px;
}

/* Editing an existing message, as opposed to writing a new one: set apart so it
   is obvious which entry is being changed. */
.forum-edit-form-wrap {
    padding: 12px;
    background: #fbf9f4;
    border: 1px solid #e3d9c2;
}

.forum-edit-form-wrap .forum-field-label {
    margin-bottom: 5px;
}

.forum-edit-form-wrap input[type="text"] {
    width: 100%;
    border: 1px solid #e3d9c2;
    background: #ffffff;
    padding: 9px 13px;
    margin-bottom: 12px;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    color: #333333;
}

.forum-edit-form-wrap input[type="text"]:focus {
    outline: none;
    border-color: #c8a96e;
}

.forum-edit-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.forum-edit-form-actions .forum-submit {
    flex: 0 1 115px;
    width: 160px;
    height: 51px;
    max-width: 100%;
    box-sizing: border-box;
}

.forum-reply-form textarea,
.forum-edit-form textarea,
.forum-composer-form textarea {
    width: 100%;
    border: 1px solid #e3d9c2;
    background: #ffffff;
    padding: 11px 13px;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
    resize: vertical;
}

.forum-reply-form textarea:focus,
.forum-edit-form textarea:focus,
.forum-composer-form textarea:focus {
    outline: none;
    border-color: #c8a96e;
}

.forum-submit {
    margin-top: 9px;
    border: 1px solid #e3d9c2;
    border-radius: 4px;
    background: #fde3a7;
    color: #222222;
    padding: 8px 20px;
    font-family: "Lato", sans-serif;
    font-size: 19px;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(135, 119, 86, 0.15);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.forum-submit:hover:not(:disabled) {
    background: #fce2aa;
    border-color: #c8a96e;
    box-shadow: 0 3px 8px rgba(135, 119, 86, 0.25);
    transform: translateY(-1px);
}

.forum-submit:active:not(:disabled) {
    box-shadow: 0 1px 2px rgba(135, 119, 86, 0.2);
    transform: translateY(0);
}

.forum-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.35);
}

/* Match the Save Changes dimensions and typography while keeping Cancel
   visually secondary. */
.forum-edit-form-actions .forum-edit-cancel {
    background: #ffffff;
    border-color: #e3d9c2;
    color: #666666;
    box-shadow: none;
}

.forum-edit-form-actions .forum-edit-cancel:hover,
.forum-edit-form-actions .forum-edit-cancel:focus {
    background: #fbf7ee;
    border-color: #c8a96e;
    color: #222222;
    box-shadow: 0 3px 8px rgba(135, 119, 86, 0.12);
}

.forum-submit:disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
    transform: none;
}
.btn-comment-submit .eng_wrd {
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
    color: #777777;
    margin: 6px 0 0 0;
}
span.chat-btn-post.chines.n-s-tc-imp.NotoSerifTC-900 {
    font-size: 19px;
    font-family: "Noto Serif SC", serif;
}
.forum-submit .chines {
    /* margin-right: 6px; */
}
.btn-comment-submit .chines {
    font-size: 28px;
    line-height: 30px;
}
.forum-composer {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid #eeeeee;
    border-top: 3px solid #fde3a7;
    background: #fbfbfb;
}

.forum-composer-heading {
    font-family: "Lato", sans-serif;
    font-size: 17px;
    margin: 0 0 14px;
    color: #222222;
}

.forum-composer-heading .chines {
    margin-right: 9px;
}

/* Automatic @username on a flattened reply. */
.forum-mention {
    font-weight: 700;
    color: #877756;
}

.forum-flash {
    padding: 12px 16px;
    margin: 18px 0 0;
    font-size: 14px;
    border: 1px solid #eeeeee;
    border-left: 3px solid #fde3a7;
    background: #fbfbfb;
    color: #555555;
}

.forum-flash-error {
    border-left-color: #b34a4a;
    color: #8a3b3b;
}

/*------------------------------------------------------------------
    10. Comments and replies (two visible levels)
------------------------------------------------------------------*/
.forum-comment-list {
    list-style: none;
    margin: 0;
    padding: 0 20px 18px;
    border-top: 1px solid #f3f3f3;
}

.forum-comment {
    padding-top: 18px;
}

.forum-comment + .forum-comment {
    border-top: 1px solid #f7f7f7;
}

.forum-comment-box {
    display: flex;
    gap: 12px;
}

.forum-comment-box .forum-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.forum-comment-content {
    flex: 1 1 auto;
    min-width: 0;
}

.forum-comment-content h4 {
    margin: 0;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    color: #222222;
}

.forum-comment-content h4 a {
    color: #222222;
}

.forum-comment-content h4 a:hover {
    color: #b6914e;
}

.forum-comment-content p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #444444;
    word-wrap: break-word;
}

/* Level 2 — indents once and never deeper. Replying to a level-2 entry
   keeps the new one at this level and mentions the author instead. */
.forum-reply-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0 0 0 26px;
    border-left: 2px solid #f3ede0;
}

.forum-reply + .forum-reply {
    margin-top: 14px;
}

/*------------------------------------------------------------------
    11. Sidebar widgets
------------------------------------------------------------------*/
.forum-sidebar-categories,
.forum-sidebar-topics,
.forum-sidebar-picks,
.forum-sidebar-stats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.forum-sidebar-categories li,
.forum-sidebar-topics li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f3f3f3;
}

.forum-sidebar-categories li:last-child,
.forum-sidebar-topics li:last-child {
    border-bottom: 0;
}

.forum-sidebar-categories a,
.forum-sidebar-topics a {
    font-family: "Lato", sans-serif;
    font-size: 13px;
    color: #333333;
    line-height: 1.4;
}

.forum-sidebar-categories a:hover,
.forum-sidebar-topics a:hover {
    color: #b6914e;
    text-decoration: none;
}

.forum-sidebar-categories .chines {
    margin-right: 6px;
}

.forum-sidebar-count {
    flex: 0 0 auto;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    color: #999999;
}

.forum-sidebar-picks li {
    padding: 11px 0;
    border-bottom: 1px solid #f3f3f3;
}

.forum-sidebar-picks li:last-child {
    border-bottom: 0;
}

.forum-sidebar-picks a {
    display: flex;
    gap: 11px;
}

.forum-sidebar-picks a:hover {
    text-decoration: none;
}

.forum-pick-media {
    flex: 0 0 62px;
}

.forum-pick-media img {
    width: 62px;
    height: 46px;
    object-fit: cover;
    display: block;
}

.forum-pick-kicker {
    display: block;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b6914e;
}

.forum-pick-title {
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #333333;
    margin-top: 2px;
}

.forum-sidebar-picks a:hover .forum-pick-title {
    color: #b6914e;
}

.forum-sidebar-stats li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
}

.forum-sidebar-stats strong {
    font-family: "Lato", sans-serif;
    font-size: 18px;
    color: #222222;
}

.forum-sidebar-stats span {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999999;
}

/*------------------------------------------------------------------
    12. Quoting
------------------------------------------------------------------*/
.forum-quote-btn {
    border: 1px solid #e3d9c2;
    background: #ffffff;
    padding: 6px 14px;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #877756;
    cursor: pointer;
}

.forum-quote-btn:hover,
.forum-quote-btn:focus {
    background: #fbf7ee;
    border-color: #c8a96e;
    color: #b6914e;
}

.forum-quote-btn .chines {
    margin-right: 0;
    letter-spacing: 0;
}

.forum-body blockquote.forum-quote {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-left: 3px solid #e3d9c2;
    background: #fbfaf6;
    font-size: 14px;
    line-height: 1.65;
}

.forum-quote-heading {
    margin-bottom: 4px;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #999999;
}

.forum-quote-author {
    color: #877756;
    font-weight: 700;
}

.forum-quote-body {
    color: #555555;
}

.forum-quote-collapsed {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-style: italic;
    color: #999999;
    background: #f3f0e8;
}

/*------------------------------------------------------------------
    13. Attachments
------------------------------------------------------------------*/
.forum-attachment-uploader {
    margin: 12px 0;
}

.forum-attachment-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.forum-attachment-preview {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 3px;
    background-color: #f3f0e8;
    background-size: cover;
    background-position: center;
    border: 1px solid #e3d9c2;
}

.forum-attachment-preview.is-uploading {
    opacity: 0.6;
}

.forum-attachment-preview.is-removing {
    opacity: 0.3;
}

.forum-attachment-spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-top-color: #b6914e;
    border-radius: 50%;
    animation: forum-attachment-spin 0.7s linear infinite;
}

@keyframes forum-attachment-spin {
    to {
        transform: rotate(360deg);
    }
}

.forum-attachment-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    padding: 0;
    border: 1px solid #e3d9c2;
    border-radius: 50%;
    background: #ffffff;
    color: #888888;
    font-size: 13px;
    cursor: pointer;
}

.forum-attachment-remove:hover {
    color: #b34a4a;
    border-color: #b34a4a;
}

.forum-attachment-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px dashed #c8a96e;
    background: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    color: #877756;
    cursor: pointer;
}

.forum-attachment-add:hover {
    background: #fbf7ee;
}

.forum-attachment-add.is-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.forum-attachment-add .chines {
    margin-right: 2px;
}

.forum-attachment-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.forum-attachment-hint {
    margin: 6px 0 0;
    font-size: 11px;
    color: #999999;
}

.forum-attachment-error {
    margin: 6px 0 0;
    font-size: 12px;
    color: #b34a4a;
}

.forum-attachment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.forum-attachment-item {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #eeeeee;
}

.forum-attachment-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*------------------------------------------------------------------
    14. New topic form
------------------------------------------------------------------*/
.forum-new-topic .forum-field-label {
    display: block;
    margin: 16px 0 6px;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666666;
}

.forum-new-topic .forum-field-label:first-of-type {
    margin-top: 0;
}

.forum-new-topic .forum-field-label .chines {
    margin-right: 6px;
    letter-spacing: 0;
}

.forum-new-topic select,
.forum-new-topic input[type="text"] {
    width: 100%;
    border: 1px solid #e3d9c2;
    background: #ffffff;
    padding: 10px 13px;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    color: #333333;
}

.forum-new-topic select:focus,
.forum-new-topic input[type="text"]:focus {
    outline: none;
    border-color: #c8a96e;
}

/*------------------------------------------------------------------
    15. Embeds
------------------------------------------------------------------*/
.forum-embed {
    display: block;
    margin: 12px 0;
}

/* YouTube click-to-play facade */
.forum-embed-youtube {
    position: relative;
    max-width: 480px;
}

.forum-embed-youtube-facade {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #000000;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.forum-embed-youtube-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
}

.forum-embed-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.forum-embed-youtube iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

/* Shown once playback has been requested, so a reader whose browser or network
   blocks YouTube playback still has a way to reach the video. */
.forum-embed-youtube-fallback {
    display: inline-block;
    margin-top: 6px;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #877756;
}

.forum-embed-youtube-fallback:hover,
.forum-embed-youtube-fallback:focus {
    color: #222222;
    text-decoration: underline;
}

/* X / Twitter — widgets.js applies its own styling to .twitter-tweet once it
   scans the page; this only bounds it before that happens so the page does
   not jump when the real widget replaces it. */
.forum-embed-tweet {
    max-width: 480px;
}

/* Facebook and Instagram render their own post markup into these; both cap
   themselves around 540px, so the container matches rather than leaving the
   post floating in a much wider column. Anything the platform scripts set
   inline wins over this, which is the intent — these rules only have to make
   the fallback link and the pre-render gap look deliberate. */
.forum-embed-facebook,
.forum-embed-instagram {
    max-width: 540px;
    margin: 12px 0;
}

/* Instagram pins min-width: 326px on its own iframe, so anything narrower
   scrolls the embed inside its container instead of pushing the whole page
   sideways - the same treatment .forum-post-table-wrap gives a wide table. */
.forum-embed-instagram {
    overflow-x: auto;
}

.forum-embed-facebook .fb-post,
.forum-embed-facebook .fb-post span,
.forum-embed-facebook iframe,
.forum-embed-instagram iframe {
    max-width: 100%;
}

/* Until the platform script replaces it — and permanently, for a reader whose
   browser blocks that script — the blockquote is just the link. */
.forum-embed-facebook blockquote,
.forum-embed-instagram blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.forum-embed-facebook blockquote a,
.forum-embed-instagram blockquote a {
    color: #877756;
    text-decoration: underline;
}

/* Link-preview card: the Facebook/Instagram fallback and the generic case. */
.forum-embed-link-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 480px;
    padding: 12px 16px;
    border: 1px solid #e3d9c2;
    border-left: 3px solid #c8a96e;
    background: #fbfaf6;
    text-decoration: none;
}

.forum-embed-link-card:hover {
    background: #f5efe0;
    text-decoration: none;
}

.forum-embed-link-kicker {
    font-family: "Lato", sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #877756;
}

.forum-embed-link-kicker .chines {
    margin-right: 5px;
    letter-spacing: 0;
}

.forum-embed-link-url {
    font-size: 13px;
    color: #444444;
    word-break: break-all;
}

/* Plain inline link a URL becomes when it is not alone on its own line. */
.forum-inline-link {
    color: #877756;
    text-decoration: underline;
    word-break: break-all;
}

/*------------------------------------------------------------------
    16. Filmmaker mentions
------------------------------------------------------------------*/
/* Rendered link, per requirement 19: italic, always. */
a.forum-mention-filmmaker {
    font-style: italic;
    color: #877756;
    font-weight: 700;
}

a.forum-mention-filmmaker:hover {
    color: #b6914e;
    text-decoration: none;
}

/* Autocomplete dropdown while typing "@" in a composer. */
.forum-mention-dropdown {
    z-index: 1000;
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #e3d9c2;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    font-family: "Lato", sans-serif;
    font-size: 13px;
}

.forum-mention-option {
    padding: 7px 14px;
    cursor: pointer;
    color: #333333;
}

.forum-mention-option.is-active,
.forum-mention-option:hover {
    background: #fbf2dc;
    color: #222222;
}

/*------------------------------------------------------------------
    18. Chinese typography
    ------------------------------------------------------------------
    The single place the forum's Chinese face, weight, colour and size
    are decided. Nothing outside this section should set a font-size on
    a .chines element — see the note on ordering below.
------------------------------------------------------------------*/
/* forum.css is loaded after fonts.css and style.css (see
   includes/head.blade.php), so a two-class selector here already outranks the
   site-wide .chines / .n-s-tc-imp.NotoSerifTC-900 / .m-y-imp helpers. That is
   why none of the rules below need to repeat those helper classes, and why
   only the one noted case needs !important.

   The rules run general to specific and DEPEND ON THAT ORDER, so keep the
   sequence: default, per-page override, then contexts and exemptions that
   outrank both by carrying one extra class.

   :not(.eng_wrd) throughout: a few shared elements carry both .chines and
   .eng_wrd while holding ENGLISH text (the banner's search caption), and must
   keep their own face and size. */

/* 1. Default — the directory and the banner. */
.forum-section .chines:not(.eng_wrd),
.forum-banner .chines:not(.eng_wrd) {
    font-family: "Noto Serif SC", serif;
    font-weight: 400;
    color: #333333;
    font-size: 19px;
    text-align: left;
}

/* 2. A forum's topic list, a topic page and the new-topic form read plainer.
      These classes sit on the same element as .forum-section, so this wins on
      source order rather than specificity — it must stay below rule 1. */
.forum-category-page .chines:not(.eng_wrd),
.forum-topic-page .chines:not(.eng_wrd) {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    line-height: 15px;
}
span.chines.m-y-imp.Microsoft-YaHei-Regular.joined {
    width: 28px;
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    color: #666666;
}
span.eng_wrd.eng-joined {
    width: 44px;
    display: inline-block;
    font-size: 11px;
    line-height: 20px;
}
span.chines.m-y-imp.Microsoft-YaHei-Regular.topics {
    width: 28px;
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    color: #666666;
}
span.eng_wrd.eng-topics {
    width: 44px;
    display: inline-block;
    font-size: 11px;
    line-height: 20px;
}
span.chines.m-y-imp.Microsoft-YaHei-Regular.posts {
    width: 28px;
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    color: #666666;
}
span.eng_wrd.eng-posts {
    width: 44px;
    display: inline-block;
    font-size: 11px;
    line-height: 20px;
}
/* 3. Titles keep the display face at their own size on every page. The extra
      class puts them above both rules above, so one rule covers all pages. */
.forum-banner .award-archive-brand-copy .chines:not(.eng_wrd),
.forum-section .forum-page-title .chines:not(.eng_wrd) {
    font-family: "Noto Serif SC", serif;
    font-weight: 400;
    color: #333333;
    font-size: 26px;
}

/* style.css sets the shared Awards banner title to black with !important, so
   matching it is the only way to bring the forum masthead into line. Scoped to
   .forum-banner, so the Awards banner itself is untouched. */
.forum-banner .award-archive-brand-copy .chines:not(.eng_wrd) {
    color: #000000 !important;
}

/* The banner search input reads larger than the rest of the banner text. The
   extra .forum-banner-search-input-lg class (input only, not its FORUM SEARCH
   caption) puts it above rule 1. */
.forum-banner .chines.forum-banner-search-input-lg:not(.eng_wrd) {
    font-size: 19px;
    line-height: 1.2;
}

/* Section headings sit between body and title size. */
.forum-section .forum-block-heading .chines:not(.eng_wrd),
.forum-section .forum-composer-heading .chines:not(.eng_wrd) {
    font-size: clamp(16px, 1.5vw, 22px);
}
span.chat-board-title.chines.n-s-tc-imp.NotoSerifTC-900 {
    font-size: 24px;
    font-family: "Noto Serif SC", serif;
}
/* Zone headings introduce each group of forums in the directory. */
.forum-section .forum-zone-row .chines:not(.eng_wrd) {
    font-size: 23px;
    color: #222222;
}

/* 4. The footer reads identically wherever it sits. It is nested inside the
      content column on some pages and standalone on others, so without this it
      would take on whichever page it landed in. */
.forum-footer .chines:not(.eng_wrd) {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 12px;
}

/* The sidebar's widget shares the portal's standard shell, so its Chinese
   keeps the site-wide treatment and inherits its size from the widget. Keyed
   on the helper classes so each lands on the right face; the first rule needs
   :not() only to match rule 1's weight and win on order. */
.forum-sidebar .chines:not(.eng_wrd) {
    font-family: "Noto Serif TC Regular", serif;
    font-weight: normal;
    color: #333333;
    font-size: inherit;
}

.forum-sidebar .chines.n-s-tc-imp.NotoSerifTC-900 {
    font-family: "Noto Serif SC", serif;
    font-weight: 700;
    font-size: inherit;
}

.forum-sidebar .chines.m-y-imp.Microsoft-YaHei-Regular {
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 400;
    font-size: inherit;
}

/*------------------------------------------------------------------
    19. Board head (a forum's own listing page)
    ------------------------------------------------------------------
    Name, then the board's totals, its description and its moderators —
    the masthead the reference board shows above the topic table.
------------------------------------------------------------------*/
.forum-board-head {
    margin-bottom: 20px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #fde3a7;
}

.forum-board-counts {
    margin: 0 0 10px;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999999;
}

.forum-board-counts-inner {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #e3d9c2;
    background: #fbf7ee;
}

.forum-board-counts strong {
    color: #222222;
    font-size: 15px;
    margin-right: 3px;
}

.forum-board-desc,
.forum-board-mods {
    margin: 0 0 0px;
    font-size: 13px;
    line-height: 1.55;
    color: #666666;
}

.forum-board-label {
    display: inline-block;
    margin-right: 0px;
}

.forum-board-desc-text + .forum-board-label {
    margin-left: 14px;
}

.forum-board-label .eng_wrd {
    font-family: "Lato", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #877756;
}

.forum-board-desc-text .eng_wrd {
    display: block;
    font-family: "Lato", sans-serif;
    color: #666666;
}

.forum-board-mods-list a {
    color: #877756;
    font-weight: 700;
}

.forum-board-mods-list a:hover,
.forum-board-mods-list a:focus {
    color: #b6914e;
}

/* Back to the directory, the action buttons, then pagination. */
.forum-board-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.forum-board-controls .forum-actions {
    margin-bottom: 0;
}

.forum-board-controls .forum-pagination {
    margin: 0 0 0 auto;
}

.forum-board-controls .forum-board-counts {
    margin: 0 0 0 auto;
    border: 1px solid #e3d9c2;
    background: #fbf7ee;
    padding: 6px 15px;
}

.forum-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid #e3d9c2;
    background: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #666666;
}

.forum-back-btn:hover,
.forum-back-btn:focus {
    background: #fbf7ee;
    border-color: #c8a96e;
    color: #222222;
    text-decoration: none;
}

/*------------------------------------------------------------------
    20. Topic listing table
    ------------------------------------------------------------------
    Type / Topic / Author-Date / Replies-Views / Last post. Builds on the
    shared .forum-table shell in section 6.
------------------------------------------------------------------*/
.forum-topic-table thead th.forum-col-author,
.forum-topic-table tbody td.forum-col-author {
    width: 15%;
    white-space: nowrap;
}

.forum-topic-table thead th.forum-col-counts,
.forum-topic-table tbody td.forum-col-counts {
    width: 12%;
    text-align: center;
    white-space: nowrap;
}

.forum-topic-table thead th.forum-col-latest,
.forum-topic-table tbody td.forum-col-latest {
    width: 18%;
    white-space: nowrap;
}

.forum-topic-table thead th .chines,
.forum-topic-table thead th .eng_wrd {
    display: block;
    line-height: 1.3;
}

.forum-topic-table thead th .eng_wrd {
    font-size: 9.5px;
    color: #999999;
}

.forum-topic-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}

.forum-topic-table tbody tr:nth-child(even) td {
    background: #f7f7f6;
}

.forum-topic-table tbody tr:hover td {
    background: #fbf7ee;
}

.forum-topic-table .forum-topic-flag {
    color: #c8a96e;
    font-size: 13px;
    margin-right: 5px;
}

/* Author / date cell. */
.forum-topic-author,
.forum-topic-created {
    display: block;
    font-family: "Lato", sans-serif;
    line-height: 1.4;
}

.forum-topic-author {
    font-size: 11px;
    color: #877756;
    font-weight: 700;
    font-size: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a.forum-topic-author:hover,
a.forum-topic-author:focus {
    color: #b6914e;
    text-decoration: none;
}

.forum-topic-author.is-system {
    color: #999999;
    font-weight: 400;
}

.forum-topic-author.is-system .eng_wrd {
    font-size: 10px;
    letter-spacing: 0.1em;
}

.forum-topic-created {
    font-size: 11px;
    color: #999999;
}

/* Replies / views cell. */
.forum-count-replies {
    font-family: "Lato", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #222222;
}

.forum-count-sep {
    margin: 0 4px;
    color: #cccccc;
}

.forum-count-views {
    font-family: "Lato", sans-serif;
    font-size: 13px;
    color: #999999;
}

/* Inline page links beside a topic title. */
.forum-topic-pages {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.forum-topic-pages-lead,
.forum-topic-pages-gap {
    font-family: "Lato", sans-serif;
    font-size: 11px;
    color: #bbbbbb;
}

.forum-topic-page-link {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    border: 1px solid #e3d9c2;
    background: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 10.5px;
    line-height: 1.5;
    text-align: center;
    color: #877756;
}

.forum-topic-page-link:hover,
.forum-topic-page-link:focus {
    background: #fde3a7;
    border-color: #c8a96e;
    color: #222222;
    text-decoration: none;
}

/*------------------------------------------------------------------
    21. Topic page — flat entry stream
    ------------------------------------------------------------------
    Every entry sits at the same level: a member panel on the left, the
    message on the right, a rule between entries. Threading is carried by
    quotes and the automatic "@username", not by indentation.
------------------------------------------------------------------*/
.forum-topic-statbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 8px;
}

.forum-topic-stats {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.forum-topic-stat {
    font-family: "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999999;
}

.forum-topic-stat strong {
    font-size: 15px;
    color: #666666;
    margin-right: 4px;
}
span.newColor-stats.chines.m-y-imp.Microsoft-YaHei-Regular {
    color: #666666;
}
span.newColor-stats.chines.n-s-tc-imp.NotoSerifTC-900 {
    color: #666666;
}
.forum-topic-in {
    margin: 0 0 0 auto;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999999;
}

.forum-topic-in-link {
    color: #877756;
    font-weight: 700;
}

.forum-topic-in-link:hover,
.forum-topic-in-link:focus {
    color: #b6914e;
    text-decoration: none;
}

.forum-topic-in-link .chines {
    margin-right: 5px;
}

.forum-entry-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.forum-entry {
    position: relative;
    display: flex;
    gap: 22px;
    padding: 24px 0;
    border-top: 1px solid #eeeeee;
}

.forum-entry:first-child {
    border-top: 0;
}

.forum-entry.is-review-post {
    background: #fdfcf8;
}

/* Member panel — everything left-aligned in its column.
   Wide enough for the longest stat row ("注册 JOINED  Sep 30th, 2019" measures
   ~150px) so none of them has to wrap; see .forum-entry-stat below. */
.forum-entry-author {
    flex: 0 0 164px;
    max-width: 164px;
    text-align: left;
}

.forum-entry-avatar {
    display: block;
    margin: 0 0 8px;
    width: 82px;
    height: 82px;
    overflow: hidden;
    border: 1px solid #e3d9c2;
    /* Circular, matching the avatar treatment used elsewhere on the portal. */
    border-radius: 50%;
}

.forum-entry-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.forum-entry-username {
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    /* text-transform: uppercase; */
    color: #877756;
    word-break: break-word;
}

a.forum-entry-username:hover,
a.forum-entry-username:focus {
    color: #b6914e;
    text-decoration: none;
}

.forum-entry-username.is-deleted {
    color: #bbbbbb;
}

.forum-entry-stats {
    margin: 10px 0 0;
    padding: 0;
    font-family: "Lato", sans-serif;
}

/* One stat per line: label and value stay together and never wrap. The panel
   above is sized to fit the longest of them, so nowrap cannot cause overflow. */
.forum-entry-stat {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 5px;
    margin: 0 0 2px;
    font-size: 10px;
    letter-spacing: 0.06em;
    align-items: center;
}

.forum-entry-stat dt {
    margin: 0;
    font-weight: 400;
    text-transform: uppercase;
    color: #999999;
}

.forum-entry-stat dd {
    margin: 0;
    color: #666666;
    line-height: 20px;
}

/* Message column. */
.forum-entry-main {
    flex: 1 1 auto;
    min-width: 0;
    border-left: 1px solid #eeeeee;
    padding-left: 22px;
}

.forum-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.forum-entry-time {
    font-family: "Lato", sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #999999;
}

.forum-entry-time a {
    color: #999999;
}

.forum-entry-time a:hover,
.forum-entry-time a:focus {
    color: #b6914e;
}

/* "Edited" marker closes the entry at its bottom-right edge. */
.forum-entry-edited {
    position: absolute;
    right: 0;
    bottom: 4px;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0 4px;
    max-width: 100%;
    text-align: right;
    font-family: "Lato", sans-serif;
    font-size: 10px;
    letter-spacing: 0;
    color: #bbbbbb;
}

.forum-entry-edited a {
    color: #999999;
    font-weight: 700;
}

.forum-entry-edited a:hover,
.forum-entry-edited a:focus {
    color: #b6914e;
    text-decoration: none;
}

.forum-entry-ref {
    margin-left: auto;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    color: #cccccc;
}

.forum-entry-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #fde3a7;
    border: 1px solid #e3d9c2;
    font-size: 10px;
    letter-spacing: 0.1em;
}

.forum-entry-badge .eng_wrd {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    color: #877756;
}

.forum-entry-body {
    font-size: 14px;
    line-height: 1.65;
    color: #333333;
}

.forum-entry-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    margin-top: 40px;
}

.forum-entry .forum-entry-actions {
    margin-top: 0;
}

/* Signature — closes the message, separated by a dotted rule. */
.forum-signature {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px dotted #cccccc;
}

.forum-signature-body {
    font-family: "Lato", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: #999999;
}

/* A signature is written in the same editor as a post and rendered by the same
   ForumContentRenderer, so it arrives carrying the post classes. It still has
   to read as a small footer rather than a second message, which is what the
   .forum-signature-body scoping below enforces. The .forum-signature-* rules
   are the markup the earlier, separate signature renderer produced. */
.forum-signature-link,
.forum-signature-body .forum-inline-link,
.forum-signature-body .forum-post-image-link {
    color: #877756;
}

.forum-signature-link:hover,
.forum-signature-link:focus,
.forum-signature-body .forum-inline-link:hover,
.forum-signature-body .forum-inline-link:focus {
    color: #b6914e;
}

.forum-signature-image,
.forum-signature-body .forum-post-image {
    display: inline-block;
    max-width: 720px;
    max-height: 250px;
    width: auto;
    height: auto;
    margin: 4px 6px 0 0;
    vertical-align: middle;
}

.forum-signature-body .forum-post-heading,
.forum-signature-body .forum-post-heading-1,
.forum-signature-body .forum-post-heading-2,
.forum-signature-body .forum-post-heading-3 {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 4px;
    color: #888888;
}

.forum-signature-body .forum-quote,
.forum-signature-body .forum-post-table-wrap,
.forum-signature-body .forum-code-block {
    margin: 4px 0;
    font-size: 12px;
}

.forum-signature-body ul,
.forum-signature-body ol {
    margin: 0 0 0 18px;
    padding: 0;
}

.forum-signature-body p {
    margin: 0 0 4px;
}

/* Signature field help text on the profile form. */
.signature-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #999999;
}

.signature-help code {
    font-size: 11px;
    background: #f7f7f6;
    border: 1px solid #eeeeee;
    padding: 1px 4px;
    color: #877756;
}

/*------------------------------------------------------------------
    21b. Composer toolbar
    ------------------------------------------------------------------
    Sits directly on top of the textarea it writes into, reading as one
    control. Buttons insert tokens; they never produce HTML.
------------------------------------------------------------------*/
.forum-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 11px;
    padding: 6px 8px;
    border: 1px solid #e3d9c2;
    border-bottom: 0;
    background: #ffffff;
}

/* The wide gap between groups is the only separator; a rule between every
   pair crowded a bar this dense. */
.forum-editor-group {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.forum-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 27px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    font-family: "Lato", sans-serif;
    font-size: 13px;
    line-height: 1;
    color: #3c4043;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.forum-editor-btn:hover,
.forum-editor-btn:focus {
    background: #f5f2ea;
    border-color: #e3d9c2;
    color: #b34a4a;
    outline: none;
}

/* Platform buttons keep their own brand colour so they are recognisable. */
.forum-editor-btn.is-youtube {
    color: #c4302b;
}

.forum-editor-btn.is-twitter {
    color: #1d9bf0;
}

.forum-editor-btn.is-facebook {
    color: #1877f2;
}

.forum-editor-btn.is-instagram {
    color: #c13584;
}

.forum-editor-hint {
    margin-left: auto;
    font-size: 11px;
    color: #999999;
}

.forum-editor-hint .eng_wrd {
    font-family: "Lato", sans-serif;
    letter-spacing: 0.04em;
}

/* The textarea directly under a toolbar loses its own top edge so the two
   read as a single field. */
.forum-editor-toolbar + textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

/* "Posting in <forum>" line on the new-topic form. */
.forum-new-topic-target {
    margin: 0 0 16px;
    font-size: 13px;
    color: #666666;
}

.forum-new-topic-forum {
    color: #877756;
    font-weight: 700;
}

.forum-new-topic-forum:hover,
.forum-new-topic-forum:focus {
    color: #b6914e;
    text-decoration: none;
}

.forum-new-topic-forum .chines {
    margin-right: 6px;
}

/*------------------------------------------------------------------
    21c. Rich editor surface and dialogs
    ------------------------------------------------------------------
    The contenteditable surface replaces the textarea visually; the
    textarea itself stays in the DOM (it is what posts) but is taken out
    of the layout by .forum-editor-source.
------------------------------------------------------------------*/
.forum-editor-source {
    position: absolute !important;
    /* !important on the box as well as the positioning: the composer rules
       below are ".forum-reply-form textarea" and friends, which outrank a
       single class and were stretching this hidden field to the full column
       width. Absolutely positioned at that width it pushed the document's
       scroll width past the viewport, so a topic page scrolled sideways on a
       phone even though nothing visible was too wide. */
    width: 1px !important;
    height: 1px !important;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.forum-editor-surface {
    min-height: 120px;
    max-height: 460px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid #e3d9c2;
    background: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #333333;
    outline: none;
}

.forum-editor-surface:focus {
    border-color: #c8a96e;
}

.forum-reply-form .forum-editor-surface {
    min-height: 84px;
}

/* Placeholder, since a contenteditable has none of its own. */
.forum-editor-surface:empty::before {
    content: attr(data-placeholder);
    color: #aaaaaa;
}

/* What the writer sees while composing mirrors how the post will render. */
.forum-editor-surface ul,
.forum-editor-surface ol {
    margin: 6px 0 6px 22px;
    padding: 0;
}

.forum-editor-surface li {
    margin: 2px 0;
}

.forum-editor-surface blockquote {
    margin: 8px 0;
    padding: 6px 12px;
    border-left: 3px solid #fde3a7;
    background: #fbf7ee;
    color: #666666;
}

.forum-editor-surface img {
    max-width: 100%;
    height: auto;
    margin: 6px 0;
}

.forum-editor-shell {
    position: relative;
}

.forum-editor-surface img.is-selected {
    outline: 2px solid #c8a96e;
    outline-offset: 2px;
}

.forum-editor-image-remove {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #a94442;
    border-radius: 50%;
    background: #ffffff;
    color: #a94442;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.forum-editor-image-remove:hover,
.forum-editor-image-remove:focus {
    background: #a94442;
    color: #ffffff;
    outline: none;
}

.forum-editor-image-url-preview {
    min-height: 70px;
    margin: 8px 0 12px;
    padding: 8px;
    border: 1px solid #e3d9c2;
    background: #fbfaf6;
    text-align: center;
}

.forum-editor-image-url-preview img {
    display: inline-block;
    max-width: 100%;
    max-height: 180px;
}

.forum-editor-surface a {
    color: #877756;
    text-decoration: underline;
}

/* Pressed state while the caret sits inside that formatting. */
.forum-editor-btn.is-active {
    background: #f7f3e9;
    border-color: #e3d9c2;
    color: #b34a4a;
}

/* --- Dialogs (link / image) --- */
.forum-editor-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
}

.forum-editor-dialog {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #e3d9c2;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    font-family: "Lato", sans-serif;
}

.forum-editor-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eeeeee;
}

.forum-editor-dialog-head h3 {
    margin: 0;
    font-size: 16px;
    color: #222222;
}

.forum-editor-dialog-close {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #999999;
    cursor: pointer;
}

.forum-editor-dialog-close:hover {
    color: #222222;
}

.forum-editor-dialog-body {
    padding: 16px 18px;
}

.forum-editor-field {
    display: block;
    margin-bottom: 12px;
}

.forum-editor-field span {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #777777;
}

.forum-editor-field input[type="text"],
.forum-editor-field input[type="url"],
.forum-editor-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d8d8d8;
    font-size: 14px;
    color: #333333;
    background: #ffffff;
}

.forum-editor-field input:focus,
.forum-editor-field select:focus {
    border-color: #c8a96e;
    outline: none;
}

.forum-editor-dialog-or {
    margin: 14px 0;
    text-align: center;
    font-size: 12px;
    color: #999999;
    border-top: 1px solid #eeeeee;
}

.forum-editor-dialog-or span {
    position: relative;
    top: -9px;
    padding: 0 10px;
    background: #ffffff;
}

.forum-editor-dialog-status {
    margin: 8px 0 0;
    font-size: 12px;
    color: #877756;
}

.forum-editor-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #eeeeee;
    background: #fbfbfb;
}

.forum-editor-dialog-cancel,
.forum-editor-dialog-save {
    padding: 8px 18px;
    border: 1px solid #d8d8d8;
    background: #ffffff;
    font-size: 13px;
    color: #444444;
    cursor: pointer;
}

.forum-editor-dialog-save {
    border-color: #b6914e;
    background: #fde3a7;
    color: #222222;
    font-weight: 700;
}

.forum-editor-dialog-cancel:hover {
    background: #f2f2f2;
}

.forum-editor-dialog-save:hover {
    background: #fce2aa;
}

/*------------------------------------------------------------------
    21d. Rich content inside a rendered post
------------------------------------------------------------------*/
.forum-list {
    margin: 8px 0 8px 22px;
    padding: 0;
}

.forum-list li {
    margin: 3px 0;
}

.forum-align {
    display: block;
}

.forum-align-left {
    text-align: left;
}

.forum-align-center {
    text-align: center;
}

.forum-align-right {
    text-align: right;
}

.forum-align-justify {
    text-align: justify;
}

/* Images render inside a safety link. Keeping that link inline-block lets the
   surrounding alignment container position both URL and uploaded images. */
.forum-align .forum-post-image-link {
    display: inline-block;
    max-width: 100%;
}

.forum-post-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}

/* --- Toolbar dropdowns ---
   A trigger button plus an absolutely positioned panel, in place of the native
   <select> controls these replaced: a native dropdown cannot show which value
   is in force while closed, and opening one takes the caret out of the
   contenteditable that the formatting commands need. */
.forum-editor-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.forum-editor-menu-toggle {
    width: auto;
    min-width: 34px;
    padding: 0 3px;
    gap: 1px;
}

.forum-editor-caret {
    font-size: 10px;
    line-height: 1;
    opacity: 0.75;
}

/* "tT" and the pilcrow are drawn as text: Font Awesome 4.0.3 carries no
   font-size or paragraph glyph. */
.forum-editor-glyph {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.forum-editor-glyph-size {
    letter-spacing: -0.02em;
}

.forum-editor-palette {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.forum-editor-menu-toggle.is-open {
    background: #f5f2ea;
    border-color: #e3d9c2;
    color: #b34a4a;
}

.forum-editor-menu-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 5px);
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 168px;
    padding: 5px;
    border: 1px solid #e0dccf;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

/* After the display rule above, so a closed panel stays closed. */
.forum-editor-menu-panel[hidden] {
    display: none;
}

.forum-editor-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 30px;
    padding: 5px 14px 5px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: "Lato", sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: #333333;
    cursor: pointer;
    white-space: nowrap;
}

.forum-editor-menu-item > i {
    width: 15px;
    flex: 0 0 15px;
    text-align: center;
    font-size: 13px;
}

.forum-editor-menu-item:hover,
.forum-editor-menu-item:focus {
    background: #f5f2ea;
    color: #b34a4a;
    outline: none;
}

/* The value already in force, marked as the panel opens. */
.forum-editor-menu-item.is-active {
    background: #b34a4a;
    color: #ffffff;
}

.forum-editor-menu-sep {
    display: block;
    height: 1px;
    margin: 4px 2px;
    background: #ece7d9;
}

/* Sizes are a short numeric list, so the panel narrows to fit. */
.forum-editor-menu-sizes {
    min-width: 76px;
}

.forum-editor-menu-sizes .forum-editor-menu-item {
    justify-content: center;
    padding-left: 14px;
}

/* Each heading is offered at the size it produces. */
.forum-editor-block-h1 {
    font-size: 22px;
    font-weight: 700;
}

.forum-editor-block-h2 {
    font-size: 18px;
    font-weight: 700;
}

.forum-editor-block-h3 {
    font-size: 15px;
    font-weight: 700;
}

/* Alignment needs no labels; the icons say it. */
.forum-editor-menu-align {
    min-width: 0;
}

.forum-editor-menu-align .forum-editor-menu-item {
    justify-content: center;
    width: 40px;
    padding: 6px 0;
}

/* Each family is shown in itself. */
.forum-editor-menu-font[data-editor-font="Arial"] {
    font-family: Arial, sans-serif;
}

.forum-editor-menu-font[data-editor-font="Book Antiqua"] {
    font-family: "Book Antiqua", Palatino, serif;
}

.forum-editor-menu-font[data-editor-font="Courier New"] {
    font-family: "Courier New", monospace;
}

.forum-editor-menu-font[data-editor-font="Georgia"] {
    font-family: Georgia, serif;
}

.forum-editor-menu-font[data-editor-font="Tahoma"] {
    font-family: Tahoma, Geneva, sans-serif;
}

.forum-editor-menu-font[data-editor-font="Times New Roman"] {
    font-family: "Times New Roman", Times, serif;
}

.forum-editor-menu-font[data-editor-font="Verdana"] {
    font-family: Verdana, Geneva, sans-serif;
}

/* --- Colour panel --- */
.forum-editor-menu-colors {
    min-width: 0;
    padding: 9px;
}

.forum-editor-swatch-grid {
    display: grid;
    grid-template-columns: repeat(8, 18px);
    gap: 5px;
}

.forum-editor-swatch {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.forum-editor-swatch:hover,
.forum-editor-swatch:focus,
.forum-editor-swatch.is-active {
    outline: none;
    box-shadow: 0 0 0 2px #b34a4a;
}

/* The swatch values are duplicated here rather than written inline on the
   markup, so the palette stays in the stylesheet with everything else. They
   must match the $editorColours list in components/forum/editor-toolbar. */
.forum-editor-swatch[data-editor-color="#000000"] {
    background: #000000;
}

.forum-editor-swatch[data-editor-color="#444444"] {
    background: #444444;
}

.forum-editor-swatch[data-editor-color="#888888"] {
    background: #888888;
}

.forum-editor-swatch[data-editor-color="#cccccc"] {
    background: #cccccc;
}

.forum-editor-swatch[data-editor-color="#ffffff"] {
    background: #ffffff;
}

.forum-editor-swatch[data-editor-color="#b34a4a"] {
    background: #b34a4a;
}

.forum-editor-swatch[data-editor-color="#e60000"] {
    background: #e60000;
}

.forum-editor-swatch[data-editor-color="#ff9900"] {
    background: #ff9900;
}

.forum-editor-swatch[data-editor-color="#ffd966"] {
    background: #ffd966;
}

.forum-editor-swatch[data-editor-color="#34a853"] {
    background: #34a853;
}

.forum-editor-swatch[data-editor-color="#0b8043"] {
    background: #0b8043;
}

.forum-editor-swatch[data-editor-color="#1155cc"] {
    background: #1155cc;
}

.forum-editor-swatch[data-editor-color="#4a86e8"] {
    background: #4a86e8;
}

.forum-editor-swatch[data-editor-color="#674ea7"] {
    background: #674ea7;
}

.forum-editor-swatch[data-editor-color="#a64d79"] {
    background: #a64d79;
}

.forum-editor-swatch[data-editor-color="#877756"] {
    background: #877756;
}

.forum-editor-hex-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
}

.forum-editor-hex-input {
    width: 96px;
    height: 27px;
    padding: 0 7px;
    border: 1px solid #e0dccf;
    background: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    color: #333333;
}

.forum-editor-hex-input:focus {
    border-color: #b34a4a;
    outline: none;
}

.forum-editor-hex-apply {
    height: 27px;
    padding: 0 11px;
    border: 1px solid #e0dccf;
    background: #fbf7ee;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    color: #555555;
    cursor: pointer;
}

.forum-editor-hex-apply:hover,
.forum-editor-hex-apply:focus {
    border-color: #b34a4a;
    color: #b34a4a;
    outline: none;
}

.forum-editor-hex-error {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.4;
    color: #b34a4a;
}

.forum-editor-hex-error[hidden] {
    display: none;
}

/* --- Preview, pushed to the far end behind its own divider --- */
.forum-editor-utility-group {
    margin-left: auto;
    padding-left: 10px;
    border-left: 1px solid #ece7d9;
}

.forum-editor-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid transparent;
    background: transparent;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    color: #3c4043;
    cursor: pointer;
    white-space: nowrap;
}

.forum-editor-text-btn:hover,
.forum-editor-text-btn:focus {
    border-color: #e3d9c2;
    background: #f5f2ea;
    color: #b34a4a;
    outline: none;
}

.forum-editor-surface {
    resize: vertical;
}

.forum-editor-surface pre,
.forum-code-block {
    max-width: 100%;
    overflow: auto;
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid #e5e5e5;
    background: #f7f7f6;
    color: #333333;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.forum-inline-code {
    padding: 1px 4px;
    border: 1px solid #e5e5e5;
    background: #f7f7f6;
    color: #725f3c;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.92em;
}

.forum-editor-inline-spoiler,
.forum-inline-spoiler {
    border-radius: 2px;
    background: #444444;
    color: transparent;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.8);
    cursor: pointer;
    user-select: none;
}

.forum-editor-inline-spoiler {
    color: #eeeeee;
}

.forum-inline-spoiler.is-revealed {
    background: #f2eee5;
    color: inherit;
    text-shadow: none;
    user-select: text;
}

.forum-editor-spoiler-block,
.forum-spoiler-block {
    margin: 10px 0;
    border: 1px solid #e3d9c2;
    background: #fbfaf6;
}

.forum-editor-spoiler-block > summary,
.forum-spoiler-block > summary {
    padding: 8px 12px;
    background: #fbf7ee;
    color: #725f3c;
    font-weight: 700;
    cursor: pointer;
}

.forum-editor-spoiler-content,
.forum-spoiler-content {
    padding: 10px 12px;
}

.forum-post-heading {
    margin: 16px 0 8px;
    font-family: "Lato", sans-serif;
    color: #222222;
}

.forum-post-heading-1 {
    font-size: 24px;
}

.forum-post-heading-2 {
    font-size: 20px;
}

.forum-post-heading-3 {
    font-size: 17px;
}

.forum-post-rule {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid #e3d9c2;
}

.forum-editor-surface table,
.forum-post-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.forum-editor-surface td,
.forum-post-table td {
    min-width: 64px;
    padding: 7px 9px;
    border: 1px solid #d8d8d8;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.forum-post-table-wrap {
    max-width: 100%;
    margin: 12px 0;
    overflow-x: auto;
}

.forum-editor-preview-dialog {
    max-width: 760px;
}

.forum-editor-preview-body {
    max-height: 65vh;
    overflow: auto;
    padding: 20px;
    font-size: 14px;
    line-height: 1.65;
}

.forum-editor-supported,
.forum-preview-empty {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #888888;
}

.forum-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-height: 230px;
    overflow-y: auto;
}

.forum-emoji-option {
    min-height: 34px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.forum-emoji-option:hover,
.forum-emoji-option:focus {
    border-color: #c8a96e;
    background: #fbf7ee;
    outline: none;
}

.forum-table-grid {
    display: grid;
    grid-template-columns: repeat(8, 24px);
    gap: 3px;
}

.forum-table-grid-cell {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #d8d8d8;
    background: #ffffff;
    cursor: pointer;
}

.forum-table-grid-cell.is-selected {
    border-color: #b6914e;
    background: #fde3a7;
}

.forum-table-grid-label {
    margin: 0 0 10px;
    color: #666666;
    font-size: 12px;
}

/* New topic discussion/poll form. */
.forum-new-topic-form > input[type="text"],
.forum-poll-fields input[type="text"] {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #e3d9c2;
    background: #ffffff;
    color: #333333;
}

.forum-new-topic-form input:focus,
.forum-new-topic-form select:focus {
    border-color: #c8a96e;
    outline: none;
}

.forum-field-label {
    display: block;
    margin: 16px 0 7px;
    color: #444444;
    font-family: "Lato", sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.forum-field-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-height: 20px;
    margin-top: 4px;
}

.forum-field-error {
    display: block;
    margin-top: 4px;
    color: #a94442;
    font-size: 12px;
    line-height: 1.4;
}

.forum-character-counter,
.forum-field-help,
.forum-poll-option-limit {
    color: #999999;
    font-size: 12px;
    line-height: 1.5;
}

.forum-character-counter {
    margin-left: auto;
    white-space: nowrap;
}

.forum-character-counter.is-near-limit {
    color: #a36f1b;
}

.forum-topic-type,
.forum-poll-group,
.forum-thread-options {
    min-width: 0;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
}

.forum-topic-type-tabs {
    display: inline-flex;
    border: 1px solid #e3d9c2;
    background: #ffffff;
}

.forum-topic-type-tab {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.forum-topic-type-tab + .forum-topic-type-tab {
    border-left: 1px solid #e3d9c2;
}

.forum-topic-type-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.forum-topic-type-tab > span {
    display: block;
    min-width: 128px;
    padding: 10px 16px;
    text-align: center;
    color: #777777;
    font-size: 13px;
}

.forum-topic-type-tab.is-active > span,
.forum-topic-type-tab input:focus + span {
    background: #fde3a7;
    color: #222222;
}

.forum-poll-fields {
    margin-top: 22px;
    padding: 4px 20px 20px;
    border: 1px solid #e3d9c2;
    background: #ffffff;
}

.forum-poll-fields[hidden],
.forum-watch-email[hidden] {
    display: none;
}

.forum-composer-subheading {
    margin: 14px 0 4px;
    font-family: "Lato", sans-serif;
    font-size: 17px;
    color: #222222;
}

.forum-poll-response-list {
    display: grid;
    gap: 7px;
}

.forum-poll-response-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.forum-poll-response-row input {
    min-width: 0;
}

.forum-poll-remove-response {
    flex: 0 0 40px;
    border: 1px solid #e3d9c2;
    background: #fbfaf6;
    color: #999999;
    cursor: pointer;
}

.forum-poll-remove-response:hover:not(:disabled),
.forum-poll-remove-response:focus:not(:disabled) {
    color: #a94442;
    border-color: #c78b89;
    outline: none;
}

.forum-poll-remove-response:disabled {
    opacity: 0.45;
    cursor: default;
}

.forum-choice-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    color: #555555;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.forum-choice-line input[type="radio"],
.forum-choice-line input[type="checkbox"] {
    margin: 0;
}

.forum-number-stepper {
    display: inline-flex;
    align-items: stretch;
}

.forum-number-stepper button,
.forum-number-stepper input {
    width: 34px;
    height: 30px;
    padding: 0;
    border: 1px solid #d8d8d8;
    background: #ffffff;
    text-align: center;
}

.forum-number-stepper button {
    cursor: pointer;
}

.forum-number-stepper input {
    width: 48px;
    margin: 0 -1px;
    -moz-appearance: textfield;
}

.forum-number-stepper input::-webkit-outer-spin-button,
.forum-number-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.forum-poll-close-line select {
    height: 30px;
    padding: 0 7px;
    border: 1px solid #d8d8d8;
    background: #ffffff;
}

.forum-poll-close-line.is-disabled {
    opacity: 0.6;
}

.forum-watch-email {
    margin-left: 26px;
}

.forum-new-topic-submitbar {
    position: sticky;
    z-index: 20;
    bottom: 0;
    margin: 22px -22px -22px;
    padding: 13px 22px;
    border-top: 1px solid #e3d9c2;
    background: rgba(251, 251, 251, 0.96);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}

/* Poll card displayed above the topic stream. */
.forum-poll-card {
    margin: 20px 0 26px;
    padding: 20px 22px;
    border: 1px solid #e3d9c2;
    border-top: 3px solid #fde3a7;
    background: #fbfaf6;
}

.forum-poll-question {
    margin: 0 0 15px;
    color: #222222;
    font-family: "Lato", sans-serif;
    font-size: 19px;
}

.forum-poll-options {
    display: grid;
    gap: 11px;
}

.forum-poll-option-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #444444;
    font-size: 14px;
    cursor: pointer;
}

.forum-poll-option-choice input {
    margin-top: 4px;
}

.forum-poll-result-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    color: #666666;
    font-size: 12px;
}

.forum-poll-result-bar {
    display: block;
    width: 100%;
    height: 7px;
    margin-top: 5px;
    border: 0;
    overflow: hidden;
    background: #e9e4d8;
    appearance: none;
}

.forum-poll-result-bar::-webkit-progress-bar {
    background: #e9e4d8;
}

.forum-poll-result-bar::-webkit-progress-value,
.forum-poll-result-bar::-moz-progress-bar {
    background: #c8a96e;
}

.forum-poll-voters {
    margin: 4px 0 0;
    color: #999999;
    font-size: 11px;
    line-height: 1.5;
}

.forum-poll-meta,
.forum-poll-login {
    margin: 13px 0 0;
    color: #888888;
    font-size: 12px;
}

.forum-poll-submit {
    margin-top: 16px;
}

/*------------------------------------------------------------------
    22. Forum footer — who is online
------------------------------------------------------------------*/
.forum-footer-section {
    padding: 30px 0;
}
section.blog-section.standard.forum-section {
    padding: 30px 15px 30px 15px;
}
section.main-wrapper.blog-section.standard.forum-section {
    padding-bottom: 30px;
}
.forum-footer {
    border: 1px solid #e3d9c2;
    background: #fbf7ee;
    padding: 18px 22px;
}
.col-md-12.forum-section.forum-topic-page-content-wrap {
    padding: 0;
}
/* Nested inside a content column: fills that column, so its edges match the
   table or post stream above it. Its own spacing replaces what the standalone
   wrapper section provided. */
.forum-footer-nested {
    display: block;
    margin: 30px 0 10px;
}
/* .col-md-12.forum-category-page.forum-content-wrap {
    padding: 0px 0px 30px;
} */
.forum-footer-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
    /* gap: 8px 35px; */
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3d9c2;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999999;
}

.forum-footer-title .eng_wrd {
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #877756;
}

.forum-footer-stat strong {
    font-size: 12px;
    color: #222222;
    margin-right: 3px;
}

.forum-footer-hidden {
    color: #bbbbbb;
}

.forum-footer-peak-date {
    color: #666666;
}

.forum-footer-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* gap: 10px 75px; */
}

.forum-footer-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-family: "Lato", sans-serif;
    font-size: 11px;
}

.forum-footer-badge {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1px solid #c8a96e;
    background: #ffffff;
    flex: 0 0 auto;
}

.forum-footer-group.is-admin .forum-footer-badge {
    background: #b34a4a;
    border-color: #b34a4a;
}

.forum-footer-group.is-mod .forum-footer-badge {
    background: #c8a96e;
    border-color: #b6914e;
}

.forum-footer-group.is-member .forum-footer-badge {
    background: #fde3a7;
}

.forum-footer-group.is-guest .forum-footer-badge {
    background: #eeeeee;
    border-color: #cccccc;
}

.forum-footer-group.is-admin,
.forum-footer-group.is-mod {
    display: none;
}

.forum-footer-group-name .eng_wrd {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #877756;
}

.forum-footer-group-count {
    color: #999999;
}

.forum-footer-people {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.forum-footer-person {
    color: #877756;
    font-weight: 700;
}

.forum-footer-person:hover,
.forum-footer-person:focus {
    color: #b6914e;
    text-decoration: none;
}

/*------------------------------------------------------------------
    23. Responsive
------------------------------------------------------------------*/
@media (max-width: 991px) {
    .forum-table thead th.forum-col-num,
    .forum-table tbody td.forum-col-num {
        width: 60px;
    }

    .forum-table thead th.forum-col-activity,
    .forum-table tbody td.forum-col-activity {
        width: 140px;
    }

    /* The avatar shrinks here, but the panel keeps its width: the stat rows
       must still fit on one line each, and 104px forced all three to wrap. */
    .forum-entry-avatar {
        width: 64px;
        height: 64px;
    }

    .forum-entry-main {
        padding-left: 16px;
    }

    .forum-entry {
        gap: 16px;
    }
}

@media (max-width: 767px) {
    /* forum.css's own .forum-banner .award-archive-brand-copy .chines rule
       (see the Banner section above, and style.css's .award-archive-brand-
       copy .chines rule in this same media query) has identical specificity
       to that rule but sits earlier in the file, so its unconditional 26px
       silently won on source order and the title never shrank on phones -
       that's what was colliding with the portrait in the overlap screenshot.
       Repeating the selector here, later in the file, wins instead and
       matches the Critics/Films banners' 20px mobile title. */
    .forum-banner .award-archive-brand-copy .chines:not(.eng_wrd) {
        font-size: 20px;
    }

    /* style.css's shared .award-archive-brand-art rule (125x165px) sizes the
       portrait for the Awards/Watch banners, which don't share the banner
       with a search trigger on phones the way forum does. At that width
       "雯苑中文論壇" (6 characters) had only ~105px to work with and wrapped
       onto two lines, colliding with the portrait - narrowing just the
       forum portrait recovers the room the title needs to stay on one line,
       matching how Critics' own portrait/title pairing fits on one line at
       this width. */
    .forum-banner .award-archive-brand-art {
        height: 128px;
        width: 113px;
    }

    .forum-banner .award-archive-brand-copy {
        margin-left: 8px;
    }

    /* The forum banner mirrors the Awards Watch banner shell (see the Banner
       note above), but was missing the phone opt-back-in that
       .award-archive-banner-watch and .award-archive-banner-icfcs already get
       from style.css's shared "@media (max-width: 991px) .award-archive-
       search-mark { display: none }" rule. Without an opt-back-in the forum's
       search stayed hidden on every phone. This reproduces the same
       side-by-side flex layout style.css already uses for
       .award-archive-banner-icfcs at this width, so the brand and the search
       trigger sit next to each other instead of overlapping. */
    .forum-banner .award-archive-banner-inner {
        align-items: flex-end;
        display: flex;
        justify-content: space-between;
    }

    /* .container carries Bootstrap's clearfix pseudo-elements, which turn into
       zero-width flex items here and make space-between split the row into
       three equal gaps instead of pinning the brand left and the search pill
       right. */
    .forum-banner .award-archive-banner-inner:before,
    .forum-banner .award-archive-banner-inner:after {
        display: none;
    }

    .forum-banner .award-archive-brand {
        flex: 0 1 auto;
        left: auto;
        min-width: 0;
        position: relative;
    }

    .forum-banner .award-archive-search-mark {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        position: relative;
        right: auto;
    }

    /* Drops the decorative right-side artwork here, the same way the Awards
       Watch banner drops its envelope image, so the trigger can shrink to its
       label width without the artwork covering the text. */
    .forum-banner .forumaward-archive-brand-art {
        display: none;
    }

    /* On phones the real inline search form is replaced by a compact trigger
       button - like the Critics/Films/Filmmakers/Reviews banners already do -
       that opens the fullscreen #forum-search-overlay (see the shared
       "@media (max-width: 767px)" archive-search-overlay block in style.css,
       and initArchiveBannerOverlays in script.js). This is what actually
       fixes the "still behaves like desktop" search: the old fix just shrank
       the real <input> to fit inline instead of switching to the same
       tap-to-open-fullscreen-search pattern the other banners use. Desktop
       and tablet keep the real form untouched - .open-forum-search stays
       "display: none" there (see the Banner section above). */
    .forum-banner .forum-banner-search {
        display: none;
    }

    .forum-banner .open-forum-search {
        display: flex;
    }

    /* .award-archive-search-pill was only ever applied to a <form> before
       (which has no default browser chrome), so it never needed to reset a
       border. Reusing it on this real <button> pulled in the UA default
       "border: 2px outset" and made the trigger look like a chunky raised
       button instead of the flat borderless pill Critics/Films/Filmmakers
       use for the same trigger. */
    .forum-banner .forum-search-trigger {
        border: 0;
        cursor: pointer;
        font: inherit;
    }

    .forum-banner .award-archive-search-pill {
        flex-shrink: 0;
        padding: 7px 14px;
        width: auto;
    }

    .forum-banner .forum-search-trigger i {
        font-size: 13px;
        margin-right: 7px;
    }

    /* Matches the Critics/Awards Watch pill's mobile label sizes exactly
       (style.css's .award-archive-search-pill strong/small rules for
       .award-archive-banner-icfcs/-watch at this same width). */
    .forum-banner .forum-search-trigger strong {
        font-size: 14px;
    }

    .forum-banner .forum-search-trigger small {
        font-size: 7px;
        letter-spacing: 0.4px;
    }

    .forum-section {
        padding: 25px 0 40px;
    }

    .forum-page-title {
        font-size: 22px;
    }

    /* The topic column stays readable; the numeric columns fold away and
       their values move into the topic cell's meta line instead. */
    .forum-table thead th.forum-col-num,
    .forum-table tbody td.forum-col-num {
        display: none;
    }

    .forum-table thead th.forum-col-activity,
    .forum-table tbody td.forum-col-activity {
        width: 110px;
        font-size: 11px;
    }

    /* Directory: two side-by-side columns are too narrow for a phone, so the
       activity stacks beneath its forum. The counts already sit under the forum
       name at every width, so nothing has to be revealed here. */
    .forum-directory-table thead {
        display: none;
    }

    .forum-directory-table,
    .forum-directory-table tbody,
    .forum-directory-table tbody tr,
    .forum-directory-table tbody td {
        display: block;
        width: 100%;
    }

    .forum-directory-table tbody td.forum-col-forum {
        padding-bottom: 8px;
        border-bottom: 0;
    }

    .forum-directory-table tbody td.forum-col-latest {
        width: 100%;
        padding-top: 0;
        border-top: 0;
    }

    .forum-review-card {
        display: block;
    }

    .forum-review-poster {
        margin-bottom: 14px;
    }

    .forum-review-poster img {
        width: 92px;
    }

    .forum-comment-list {
        padding-left: 14px;
        padding-right: 14px;
    }

    .forum-reply-list {
        padding-left: 14px;
    }

    .forum-post-head,
    .forum-post-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Flat stream: the member panel becomes a header strip above the
       message rather than a column beside it. */
    .forum-entry {
        display: block;
        padding: 18px 14px;
    }

    .forum-entry-edited {
        right: 14px;
        max-width: calc(100% - 28px);
    }

    .forum-entry-author {
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: none;
        text-align: left;
        margin-bottom: 12px;
    }

    .forum-entry-avatar {
        margin: 0;
        width: 46px;
        height: 46px;
        flex: 0 0 auto;
    }

    .forum-entry-stats {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        display: none;
    }

    .forum-entry-stat {
        justify-content: flex-start;
        margin: 0;
    }

    .forum-entry-main {
        border-left: 0;
        padding-left: 0;
    }

    /* Board head and topic table: drop the column that cannot fit. */
    .forum-topic-table thead th.forum-col-author,
    .forum-topic-table tbody td.forum-col-author {
        display: none;
    }

    /* Toolbar: hide the hint so the buttons keep one row. */
    .forum-editor-hint {
        display: none;
    }

    .forum-editor-toolbar {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2px 9px;
        overflow: visible;
    }

    .forum-editor-group {
        flex: 0 0 auto;
    }

    .forum-editor-utility-group {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .forum-editor-dialog-backdrop {
        align-items: flex-start;
        overflow-y: auto;
        padding: 12px;
    }

    .forum-editor-dialog {
        margin-top: 30px;
    }

    .forum-new-topic {
        padding: 16px;
    }

    .forum-new-topic-submitbar {
        margin: 20px -16px -16px;
        padding: 11px 16px;
    }

    .forum-poll-fields,
    .forum-poll-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .forum-choice-with-stepper,
    .forum-poll-close-line {
        align-items: flex-start;
    }

    .forum-topic-type-tabs {
        display: flex;
    }

    .forum-topic-type-tab {
        flex: 1 1 50%;
    }

    .forum-topic-type-tab > span {
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    .forum-poll-result-head {
        flex-wrap: wrap;
        gap: 3px 8px;
    }

    .forum-board-controls .forum-pagination {
        margin-left: 0;
    }

    .forum-topic-in {
        display: none;
    }

    /* Reclaim the hidden 版块 slot for 楼主: put the title on its own
       line, then let the stats bar and the "started by" line share the
       next row, pushed to opposite ends. */
    .forum-heading-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .forum-heading-row > .forum-page-title {
        flex: 0 0 100%;
    }

    .forum-topic-subhead {
        margin: 10px 0 0 auto;
    }

    .forum-footer {
        padding: 14px 16px;
    }

    .forum-footer-legend {
        gap: 8px 16px;
    }
}
@media (max-width: 480px) {
    .forum-banner .award-archive-brand-copy {
        margin-left: -5px;
    }
    #forum-search-overlay.forum-search-overlay--banner .archive-search-inner {
        padding: 90px 24px 0;
    }
}

@media (max-width: 400px) {
    .forum-banner .award-archive-brand-copy {
        margin: 0px 0 15px -5px;
    }
    .forum-banner .award-archive-brand-copy .chines:not(.eng_wrd) {
        font-size: 18px;
    }
    .forum-banner .award-archive-banner-inner {
        padding-left: 0;
    }
    section#forum-archive-banner {
        height: 68px;
    }
    /* .forum-banner .award-archive-brand-copy {
        margin-left: -5px;
    } */
    /* Below ~300px the 97px portrait (set above, for max-width: 767px) plus
       its 8px margin leaves too little room for "雯苑中文論壇" even wrapped
       onto two lines, and the second line starts overlapping the search
       trigger. Narrowing the portrait further here, the same way Critics'
       own portrait keeps shrinking at its narrower breakpoints, keeps the
       title clear of the trigger with room to spare. */
    .forum-banner .award-archive-brand-art {
        height: 96px;
        width: 90px;
    }
}