@layer components {
  /* ===================================================
     Discussion System + Forms + Modals + Messages
     Version: 2.5  Tokenised + Consolidated (2026)
     Ownership:
     • This file owns Community discussion, message, modal and participation
       interface presentation only.
     • Community writing and reading permissions remain governed by the
       established access and Firestore rules, not CSS.

     Changes:
     • Full v2.5 token parity with root + all pillar themes
     • Removed duplication while preserving every animation, depth styling,
       vote ripple/particle, modal behaviour, mobile spacing, and theme-specific tweaks
     • Cleaner structure and comments
     • 100% visual & functional fidelity — nothing was removed or altered
     =================================================== */

  /* ==========================================================
     Muted info box + Lead text
     ========================================================== */
  .muted-box {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--card-soft-bg);
    color: var(--text-primary);
    border: 1px solid var(--section-border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-soft);
  }

  .lead {
    max-width: 100%;
    font-size: var(--type-copy-size, 1em);
    line-height: var(--type-lead-line, 1.9);
    color: var(--text-primary);
  }

  body.community .lead {
    max-width: 80ch;
    margin: var(--space-xs) auto var(--space-xl);
    font-family: var(--page-title);
    font-weight: var(--type-weight-medium, 500);
    font-size: clamp(var(--font-size-sm), 1.6vw, var(--font-size-lg));
    line-height: 1.7;
    text-align: center;
    color: var(--text-accent);
    letter-spacing: 0.02em;
    text-shadow: 0 0 6px var(--shadow-glow);
  }

  .lead p {
    margin: 0 0 1rem 0;
  }

  .lead p:last-child {
    margin-bottom: 0;
  }

  /* Community "Latest From The Read" alignment */
  #community-the-read .portal-grid > .gnostic-card {
    min-height: 14.5rem;
  }

  #community-the-read .portal-grid > .gnostic-card .card-link {
    min-height: 14.5rem;
  }

  /* Standard image-less TGK Community cards inherit the soft card shell. */
  body.emerald.is-landing .main-content .pillar-grid .portal-grid > .gnostic-card:not(:has(.card-media)) {
    --card-bg: var(--card-soft-bg);
    background: var(--card-bg);
  }

  body.community-guide-landing .editorial-card-system .gnostic-card:not(:has(.card-media)) {
    --card-bg: transparent;
    background: transparent;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
  }

  body.community-guide-landing #page-community .editorial-card-system .gnostic-card {
    --card-bg: transparent;
    background: transparent;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
  }

  body.emerald.is-landing.community-guide-landing .main-content #page-community.editorial-card-system .editorial-card-grid .portal-grid > .gnostic-card {
    --card-bg: transparent;
    background: transparent;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
  }

  body.emerald.is-landing.community-guide-landing .main-content #page-community.editorial-card-system .editorial-card-grid--two-up .portal-grid > .gnostic-card {
    flex: 0 1 calc((100% - clamp(1rem, 2.6vw, 2rem)) / 2);
    max-width: calc((100% - clamp(1rem, 2.6vw, 2rem)) / 2);
  }

  body.emerald.is-landing .main-content .pillar-grid .portal-grid {
    justify-content: center;
    gap: clamp(1rem, 2.6vw, 2rem);
    row-gap: clamp(1.25rem, 3vw, 2.5rem);
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  body.emerald.is-landing .main-content .pillar-grid .portal-grid > .gnostic-card:not(:has(.card-media)) {
    --card-radius: 8px;
    flex: 0 1 calc((100% - (2 * clamp(1rem, 2.6vw, 2rem))) / 3);
    max-width: calc((100% - (2 * clamp(1rem, 2.6vw, 2rem))) / 3);
    border-color: color-mix(in srgb, var(--section-border) 78%, var(--highlight) 22%);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--bg-primary) 84%, transparent);
  }

  body.emerald.is-landing .main-content .pillar-grid .portal-grid > .gnostic-card:not(:has(.card-media)) .card-body {
    display: flex;
    flex-direction: column;
    min-height: clamp(13rem, 22vw, 17rem);
    padding: clamp(1.35rem, 2.8vw, 2rem);
    text-align: left;
    border-top: 0;
  }

  body.emerald.is-landing .main-content .pillar-grid .portal-grid > .gnostic-card:not(:has(.card-media)) .card-title {
    color: var(--text-primary);
    font-family: var(--page-title);
    font-size: var(--type-card-title-size-large, clamp(1.4rem, 2.6vw, 2rem));
    line-height: var(--type-heading-line, 1.08);
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
  }

  body.emerald.is-landing .main-content .pillar-grid .portal-grid > .gnostic-card:not(:has(.card-media)) .card-desc {
    max-width: 62ch;
    margin: 0.7rem 0 0;
    color: var(--text-secondary);
    line-height: var(--type-card-desc-line-editorial, 1.65);
  }

  body.emerald.is-landing .main-content .pillar-grid .portal-grid > .gnostic-card:not(:has(.card-media)) .card-body::after {
    content: attr(data-card-enter-label);
    display: flex;
    width: 100%;
    align-self: stretch;
    align-items: center;
    margin-top: auto;
    padding-top: clamp(0.75rem, 1.4vw, 1rem);
    padding-right: clamp(8rem, 26vw, 14rem);
    border-top: 1px solid color-mix(in srgb, var(--section-border) 72%, var(--highlight) 18%);
    color: var(--text-accent);
    font-size: 0.72rem;
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: 0.12em;
    line-height: 1;
    opacity: 0.82;
    text-transform: uppercase;
  }

  /* ==========================================================
     Community Portal Cards
     Scoped to emerald TGK Community hub/index pages only.
     Keeps Community identity, adds subtle destination chamber cues.
     ========================================================== */
  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/"] {
    position: relative;
    border-radius: inherit;
    overflow: hidden;
  }

  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    border-top: 2px solid color-mix(in srgb, var(--portal-accent, var(--text-accent)) 52%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--portal-accent, var(--text-accent)) 16%, transparent);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--portal-accent, var(--text-accent)) var(--portal-wash, 6%), transparent) 0%,
      transparent 28%
    );
    z-index: 1;
  }

  body.community .gnostic-card::before,
  body.community .gnostic-card::after,
  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/"]::before {
    content: none !important;
    display: none !important;
  }

  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/"] .card-body {
    position: relative;
    z-index: 2;
    padding-top: 2rem;
  }

  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/the-vault/"] {
    --portal-accent: var(--accent-page);
    --portal-wash: 7%;
  }

  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/the-forge/"] {
    --portal-accent: var(--text-accent);
    --portal-wash: 9%;
  }

  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/the-obsidian-key/"] {
    --portal-accent: var(--link-color);
    --portal-wash: 6%;
  }

  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/the-teachings/"] {
    --portal-accent: var(--accent);
    --portal-wash: 8%;
  }

  body.emerald.is-landing .pillar-grid .portal-grid .gnostic-card .card-link[href^="/pillars/tgk-community/discussions/the-gnostic-eye/"] {
    --portal-accent: var(--text-primary);
    --portal-wash: 5%;
  }

  /* ==========================================================
     Anchors & Discussion Form
     ========================================================== */
  .anchor-target {
    scroll-margin-top: 120px;
  }

  /* Tighten the gap above the tab bar on community-topic pages only
     (the tab bar is the first element in .content-container here). */
  body.community :where(.page-tabs) {
    margin-top: calc(var(--space-xs, 0.5rem) - 10px);
  }

  /* Batch 4A: removed the confirmed-dead #topic-intro .index-heading
     override — #topic-intro has no live template, JS or built-output
     reference. The live .index-heading implementation (layout/
     site-header.css) and its dedicated tokens are unaffected. */

  /* ==========================================================
     Discussion Feed Toolbar
     ========================================================== */
  .thread-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .thread-list-toolbar .section-heading {
    margin: 0;
  }

  .discussion-form {
    display: grid;
    gap: var(--space-md);
    margin-top: 0.6rem;
    width: 100%;
    padding: 0 var(--space-xs);
  }

  .discussion-form .form-guidance {
    margin: 0;
  }

  .disclaimer-box .discussion-form p {
    padding: 0;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.55;
  }

  /* Single composer card: reply type, Steel Man summary (when a Challenge is
     selected) and the response field all live inside one bordered container,
     separated by a divider rather than repeating box chrome per field. */
  .discussion-form__composer {
    display: grid;
    padding: clamp(0.85rem, 2vw, 1.15rem);
    border: 1px solid color-mix(in oklab, var(--section-border) 70%, transparent);
    border-radius: var(--border-radius-base);
    background: transparent;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
  }

  .composer-subfield {
    display: grid;
    gap: 0.55rem;
  }

  .composer-subfield ~ .composer-subfield {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in oklab, var(--section-border) 55%, transparent);
  }

  .composer-subfield[hidden],
  .discussion-form .reply-context[hidden] {
    display: none;
  }

  .composer-intent-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
  }

  .composer-intent-row .intent-options {
    width: auto;
    padding: 0;
  }

  .composer-intent-row #reply-intent-guidance {
    width: 100%;
    margin: 0;
  }

  #reply-body {
    min-height: 200px;
  }

  .composer-sublabel {
    font-size: var(--type-form-label-size-compact, 0.78rem);
    letter-spacing: var(--type-form-label-tracking, 0.04em);
    text-transform: uppercase;
    color: var(--text-muted);
    width: 100%;
    padding: 0 0.2rem;
  }

  .discussion-form .form-requirement {
    display: inline-block;
    margin-left: 0.35rem;
    color: var(--text-accent);
    font-size: var(--type-form-requirement-size, 0.66rem);
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: var(--type-form-label-tracking, 0.04em);
  }

  .discussion-form .form-requirement--managed {
    color: var(--text-secondary);
  }

  .discussion-form textarea,
  .discussion-form input[type="text"],
  .discussion-form select.form-input {
    width: 100%;
    font: inherit;
    color: var(--input-text);
    background: transparent;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
    border: 1px solid color-mix(in oklab, var(--input-border) 85%, transparent);
    border-radius: var(--border-radius-base);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .discussion-form textarea,
  .discussion-form input[type="text"] {
    padding: var(--input-padding, 0.85rem 1.1rem);
    resize: vertical;
  }

  #steelman-summary { min-height: 90px; }

  .discussion-form textarea:focus,
  .discussion-form input[type="text"]:focus {
    outline: 2px solid var(--input-focus-border, var(--input-focus, var(--text-accent)));
    outline-offset: 2px;
    border-color: var(--input-focus-border, var(--input-focus, var(--text-accent)));
    box-shadow: var(--input-focus-shadow, 0 0 0 3px color-mix(in oklab, var(--text-accent) 22%, transparent));
  }

  .discussion-form textarea:disabled,
  .discussion-form input:disabled,
  .discussion-form button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
  }

  .discussion-form.is-disabled .discussion-form__composer {
    background: color-mix(in oklab, var(--card-bg) 42%, transparent);
  }

  /* Select styling */
  .discussion-form select.form-input {
    max-width: 340px;
    padding: 0.65rem 2.4rem 0.65rem 0.9rem;
    border-radius: var(--border-radius-base);
    line-height: 1.2;
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--text-primary) 50%),
      linear-gradient(135deg, var(--text-primary) 50%, transparent 50%),
      linear-gradient(to right, transparent, transparent);
    background-position:
      calc(100% - 18px) calc(50% - 3px),
      calc(100% - 12px) calc(50% - 3px),
      0 0;
    background-size:
      6px 6px,
      6px 6px,
      100% 100%;
    background-repeat: no-repeat;
  }

  .discussion-form select.form-input:focus {
    outline: none;
    border-color: var(--input-focus-border, var(--accent, var(--link-accent, #7fe0d6)));
    box-shadow: var(--input-focus-shadow, 0 0 0 3px color-mix(in oklab, var(--text-accent) 25%, transparent));
  }

  .discussion-form select.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .discussion-form select.form-input option {
    background: var(--panel-bg, #0b1213);
    color: var(--text-primary);
  }

  .reply-context {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border-left: 3px solid var(--text-accent);
    background: color-mix(in oklab, var(--text-accent) 8%, var(--card-bg));
    border-radius: var(--border-radius-base);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: space-between;
  }

  .discussion-form__footer {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 0.2rem 0 0;
  }

  @media (max-width: 600px) {
    .discussion-form__footer {
      flex-direction: column;
      align-items: stretch;
    }

    .discussion-form__actions .btn {
      width: 100%;
    }
  }

  .reply-context .btn-link {
    padding: 0.2rem 0.4rem;
    font-size: var(--type-button-size-compact, 0.75rem);
  }

  .discussion-form .btn-row {
    margin-top: 0.4rem;
  }

  .discussion-form__actions {
    display: flex;
    justify-content: flex-start;
  }

  .discussion-form__actions .btn {
    min-width: min(100%, 15rem);
    justify-content: center;
  }

  /* Discussion sort control: same themed field chrome and custom arrow as
     the reply composer's select (.discussion-form select.form-input), so
     it reads as part of the same design system rather than a bare native
     dropdown. */
  .discussion-sort-select.form-input {
    min-width: 12rem;
    padding: 0.55rem 2.2rem 0.55rem 0.85rem;
    font: inherit;
    line-height: 1.2;
    color: var(--discussion-sort-text, var(--input-text));
    background-color: var(--discussion-sort-bg, var(--input-bg));
    border: 1px solid var(--discussion-sort-border, color-mix(in oklab, var(--input-border) 85%, transparent));
    border-radius: var(--border-radius-base);
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--text-primary) 50%),
      linear-gradient(135deg, var(--text-primary) 50%, transparent 50%),
      linear-gradient(to right, transparent, transparent);
    background-position:
      calc(100% - 18px) calc(50% - 3px),
      calc(100% - 12px) calc(50% - 3px),
      0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .discussion-sort-select.form-input:focus {
    outline: none;
    border-color: var(--discussion-sort-focus-border, var(--input-focus-border, var(--accent, var(--link-accent, #7fe0d6))));
    box-shadow: var(--discussion-sort-focus-shadow, var(--input-focus-shadow, 0 0 0 3px color-mix(in oklab, var(--text-accent) 25%, transparent)));
  }

  .discussion-sort-select.form-input option {
    background: var(--panel-bg, #0b1213);
    color: var(--text-primary);
  }

  .discussion-submit-status {
    width: 100%;
    padding: 0.7rem 0.85rem;
    text-align: left;
    color: var(--danger, #d04444);
    border-left: 3px solid currentColor;
    background: color-mix(in oklab, currentColor 8%, transparent);
  }

  .discussion-submit-status.is-success {
    color: var(--form-success-color, #32a862);
  }

  .discussion-submit-status.is-info {
    color: var(--text-secondary, var(--text-primary));
  }

  .discussion-submit-status[hidden] {
    display: none;
  }

  .discussion-submit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
  }

  .discussion-submit-btn__spinner {
    display: none;
    width: 0.95em;
    height: 0.95em;
    border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: discussion-submit-spin 0.7s linear infinite;
  }

  .discussion-submit-btn.is-loading {
    cursor: progress;
  }

  .discussion-submit-btn.is-loading .discussion-submit-btn__spinner {
    display: inline-block;
  }

  @keyframes discussion-submit-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .discussion-submit-btn__spinner {
      animation-duration: 1.4s;
    }
  }

  @media (max-width: 820px) {
    .discussion-form {
      gap: var(--space-sm);
    }
  }

  @media (max-width: 600px) {
    .discussion-form {
      padding-inline: var(--space-sm);
    }

    .discussion-form__composer {
      padding: var(--space-sm);
    }

    .discussion-form .form-requirement {
      display: block;
      margin: 0.2rem 0 0;
    }

    .discussion-form__actions .btn {
      width: 100%;
    }
  }

  /* ==========================================================
     Message List + Thread Group
     ========================================================== */
  .discussion-messages,
  #discussion-messages,
  #messages {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.25rem;
  }

  .discussion-thread-group {
    position: relative;
    padding-left: 0.9rem;
  }

  .reply-collapse-toggle {
    margin: 0.35rem 0 0.9rem 2.1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-accent);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
    font: inherit;
  }

  .reply-collapse-toggle:hover,
  .reply-collapse-toggle:focus-visible {
    color: var(--text);
  }

  .discussion-thread-group::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in oklab, var(--text-accent) 18%, transparent) 25%,
      color-mix(in oklab, var(--text-accent) 30%, transparent) 75%,
      transparent 100%
    );
    opacity: 0.6;
  }

  /* ==========================================================
     Message Card
     ========================================================== */
  .discussion-message {
    --glyph-level: "☉";

    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0.9rem 1rem;
    background: transparent;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
    border: 1px solid var(--section-border);
    border-left-width: 2px;
    border-left-color: var(--accent-page);
    border-radius: var(--border-radius-base);
    box-shadow: var(--page-shadow-soft);
    transition: background 0.25s ease, border-color 0.25s ease;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .discussion-message[data-depth="0"] {
    margin-left: 0;
    margin-bottom: 1.6rem;
    background: transparent;
  }

  .discussion-message[data-depth]:not([data-depth="0"]) {
    margin-bottom: 0.6rem;
  }

  .discussion-message.is-collapsed {
    display: none;
  }

  /* Depth-based background tones */
  .discussion-message[data-depth="1"],
  .discussion-message[data-depth="2"],
  .discussion-message[data-depth="3"] { background: transparent; }

  /* Flat nesting */
  .discussion-message[data-depth="1"] { margin-left: 2.1rem; }
  .discussion-message[data-depth="2"] { margin-left: 3.1rem; }
  .discussion-message[data-depth="3"] { margin-left: 3.9rem; }
  .discussion-message[data-depth="4"],
  .discussion-message[data-depth="5"],
  .discussion-message[data-depth="6"] {
    margin-left: 3.9rem;
  }

  .discussion-message[data-depth]:not([data-depth="0"])::after {
    content: "";
    position: absolute;
    top: 0.9rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--text-accent) 30%, transparent);
    opacity: 0.7;
  }

  .discussion-message[data-depth="1"]::after { left: -1rem; }
  .discussion-message[data-depth="2"]::after { left: -1.1rem; }
  .discussion-message[data-depth="3"]::after { left: -1.2rem; }
  .discussion-message[data-depth="4"],
  .discussion-message[data-depth="5"],
  .discussion-message[data-depth="6"]::after { left: -1.2rem; }

  /* Reputation glows */
  .discussion-message[data-rep="initiate"] { box-shadow: 0 0 6px rgba(120, 200, 200, 0.25); }
  .discussion-message[data-rep="adept"]   { box-shadow: 0 0 10px rgba(140, 220, 220, 0.32); }
  .discussion-message[data-rep="master"]  { box-shadow: 0 0 14px rgba(160, 240, 240, 0.38); }
  .discussion-message[data-rep="luminary"] {
    box-shadow: 0 0 18px rgba(255, 215, 125, 0.45);
    border-left-color: var(--accent-gold);
  }

  /* Pinned */
  .discussion-message.is-pinned {
    border-left-width: 3px;
    border-left-color: var(--glyph-color);
    background: transparent;
    box-shadow: 0 0 14px var(--shadow-glow);
  }

  /* New activity highlights */
  .discussion-message.just-posted {
    animation: highlightPulse 1.5s ease-out;
  }

  .discussion-message.just-replied {
    outline: 2px solid var(--link-accent, #9ff);
    outline-offset: 2px;
  }

  .discussion-message-deleted {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--muted-text);
    background: color-mix(in srgb, var(--card-soft-bg) 82%, transparent);
    border-left: 3px solid var(--accent-muted);
  }

  /* Depth glyphs */
  .discussion-message[data-depth="1"] { --glyph-level: "☽"; }
  .discussion-message[data-depth="2"] { --glyph-level: "✶"; }
  .discussion-message[data-depth="3"] { --glyph-level: "🜂"; }
  .discussion-message[data-depth="4"] { --glyph-level: "⚚"; }
  .discussion-message[data-depth="5"] { --glyph-level: "✺"; }
  .discussion-message[data-depth="6"] { --glyph-level: "☬"; }

  .discussion-message::before {
    content: var(--glyph-level);
    position: absolute;
    left: -0.9rem;
    top: 0.6rem;
    font-size: 1.1rem;
    opacity: 0.55;
    color: var(--glyph-color);
  }

  .discussion-message.is-pinned::before {
    content: "♛";
    font-size: 1.25rem;
    opacity: 1;
  }

  /* ==========================================================
     Message Header & Meta
     ========================================================== */
  .discussion-message-header {
    position: relative;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
  }

  .discussion-message-author {
    font-size: 0.9rem;
    font-weight: var(--type-weight-semibold, 600);
    color: var(--text-accent);
  }

  .discussion-message-meta {
    font-size: var(--type-metadata-size-discussion, 0.7rem);
    color: var(--text-muted);
    opacity: 0.6;
  }

  .discussion-message-reply-count {
    font-size: var(--type-metadata-size-discussion, 0.7rem);
    color: var(--text-muted);
    opacity: 0.6;
    margin-left: auto;
  }

  .discussion-message-previous {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: -0.3rem;
  }

  .reply-parent-line {
    margin: -0.2rem 0 0.6rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.8;
  }

  .reply-parent-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in oklab, var(--text-muted) 55%, transparent);
  }

  .reply-parent-link:hover {
    color: var(--text-accent);
    border-bottom-color: color-mix(in oklab, var(--text-accent) 65%, transparent);
  }

  .reply-parent-snippet {
    display: inline-block;
    margin-left: 0.35rem;
    opacity: 0.75;
  }

  .rep-badge {
    margin-left: 0.35rem;
    font-size: 1.1rem;
    opacity: 0.9;
    color: var(--accent-page);
  }

  /* ==========================================================
     Steelman + Intent
     ========================================================== */
  .discussion-message-steelman {
    margin: 0.4rem 0 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--border-radius-base);
    border: 1px dashed var(--section-border);
    background: var(--card-soft-bg);
    color: var(--text-primary);
    font-style: italic;
    word-break: break-word;
  }

  .steelman-label {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.8;
  }

  .steelman-rejection-note,
  .steelman-acceptance-note {
    display: grid;
    gap: 0.35rem;
    margin: 0.5rem 0 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--border-radius-base);
    border: 1px solid var(--section-border);
    border-left: 3px solid var(--text-accent);
    background: var(--card-soft-bg);
    box-shadow: var(--shadow-soft);
  }

  .steelman-rejection-note {
    border-left-color: color-mix(in oklab, var(--danger, #c96a5a) 65%, transparent);
  }

  .steelman-acceptance-label {
    margin: 0;
    color: var(--text-accent);
    font-size: 0.7rem;
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .steelman-rejection-label {
    margin: 0;
    color: color-mix(in oklab, var(--danger, #c96a5a) 82%, var(--text-primary));
    font-size: 0.7rem;
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .steelman-rejection-copy,
  .steelman-acceptance-copy {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    word-break: break-word;
  }

  .steelman-rejection-copy strong,
  .steelman-acceptance-copy strong {
    color: var(--text-accent);
  }

  .steelman-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.15rem 0 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in oklab, var(--accent-gold, #d9a441) 55%, transparent);
    background: color-mix(in oklab, var(--accent-gold, #d9a441) 14%, transparent);
    color: var(--accent-gold, #d9a441);
    font: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .steelman-pending-badge:hover,
  .steelman-pending-badge:focus-visible {
    background: color-mix(in oklab, var(--accent-gold, #d9a441) 24%, transparent);
    border-color: var(--accent-gold, #d9a441);
  }

  /* Steel Man state badge, consistent across pending/accepted/rejected. */
  .steelman-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.15rem 0 0.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
  }

  .steelman-status[data-status="pending"] {
    border-color: color-mix(in oklab, var(--accent-gold, #d9a441) 55%, transparent);
    background: color-mix(in oklab, var(--accent-gold, #d9a441) 14%, transparent);
    color: var(--accent-gold, #d9a441);
  }

  .steelman-status[data-status="accepted"] {
    border-color: color-mix(in oklab, var(--text-accent) 55%, transparent);
    background: color-mix(in oklab, var(--text-accent) 14%, transparent);
    color: var(--text-accent);
  }

  .steelman-status[data-status="rejected"] {
    border-color: color-mix(in oklab, var(--danger, #c96a5a) 45%, transparent);
    background: color-mix(in oklab, var(--danger, #c96a5a) 10%, transparent);
    color: color-mix(in oklab, var(--danger, #c96a5a) 82%, var(--text-primary));
  }

  .steelman-inline-panel {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.9rem;
    border-radius: var(--border-radius-base);
    border: 1px solid var(--section-border);
    border-left: 3px solid var(--text-accent);
    background: var(--card-soft-bg);
    box-shadow: var(--shadow-soft);
  }

  .steelman-inline-panel[hidden] { display: none; }

  .steelman-reject-label,
  .steelman-accept-label {
    display: grid;
    gap: 0.4rem;
  }

  .steelman-reject-label > span,
  .steelman-accept-label > span {
    color: var(--text-accent);
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .steelman-reject-reason,
  .steelman-accept-comment {
    box-sizing: border-box;
    width: 100%;
    min-height: 7rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--section-border);
    border-radius: var(--border-radius-base);
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.55;
    resize: vertical;
  }

  .steelman-reject-reason:focus,
  .steelman-accept-comment:focus {
    border-color: var(--text-accent);
    outline: 2px solid color-mix(in oklab, var(--text-accent) 28%, transparent);
    outline-offset: 2px;
  }

  .steelman-reject-count,
  .steelman-reject-error,
  .steelman-accept-count,
  .steelman-accept-error {
    margin: 0;
  }

  .steelman-reject-error:not([hidden]),
  .steelman-accept-error:not([hidden]) {
    color: var(--form-error-color);
  }

  .steelman-panel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .steelman-panel-actions .btn {
    margin: 0;
  }

  .intent-options {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 0.2rem;
    position: relative;
    z-index: 1;
  }

  .intent-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--section-border) 70%, transparent);
    background: color-mix(in oklab, var(--card-bg) 70%, transparent);
    font-size: 0.72rem;
    letter-spacing: var(--type-button-tracking, 0.05em);
    text-transform: uppercase;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .intent-toggle:hover {
    border-color: var(--text-accent);
    color: var(--text-accent);
  }

  .intent-toggle.is-active {
    border-color: var(--text-accent);
    color: var(--text-accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--text-accent) 20%, transparent);
  }

  .intent-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    border-color: color-mix(in oklab, var(--section-border) 70%, transparent);
    color: var(--text-muted);
  }

  .intent-toggle:disabled:hover {
    border-color: color-mix(in oklab, var(--section-border) 70%, transparent);
    color: var(--text-muted);
  }

  /* ==========================================================
     Action Bar + Voting
     ========================================================== */
  .discussion-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    pointer-events: auto;
  }

  /* Compact pill treatment for every action button on a comment or reply
     (Reply, Report, Edit, Delete, Pin, Steel Man accept/reject, and the
     vote buttons below) so they read as lightweight message-board
     controls, matching the Comment/Reply/Challenge Reply intent-toggle
     pills on the composer above rather than the full-size CTA .btn. */
  .discussion-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: auto;
    padding: 0.25rem 0.7rem;
    font-size: var(--type-badge-size-corner, 0.72rem);
    border-radius: 999px;
    border-width: 1px;
    background: color-mix(in oklab, var(--card-bg) 70%, transparent);
    box-shadow: none;
  }

  .discussion-actions .btn:hover,
  .discussion-actions .btn:focus-visible {
    box-shadow: none;
    transform: none;
  }

  /* Steel Man moderation trio: same pill treatment as the other action
     buttons, with accept/reject tinted to match the status badge colours. */
  .discussion-actions .btn-accept-steelman,
  .discussion-actions .btn-accept-steelman-with-comment {
    border-color: color-mix(in oklab, var(--text-accent) 55%, transparent);
    color: var(--text-accent);
  }

  .discussion-actions .btn-reject-steelman {
    border-color: color-mix(in oklab, var(--danger, #c96a5a) 55%, transparent);
    color: color-mix(in oklab, var(--danger, #c96a5a) 82%, var(--text-primary));
  }

  .btn-link {
    padding: 0.15rem 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-accent);
    border-radius: var(--border-radius-base);
  }

  .btn-link:hover { text-decoration: underline; }

  .vote-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .vote-btn.btn {
    --vote-control-colour: var(--text-accent);
    --vote-control-surface: var(--card-bg);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 4.75rem;
    padding: 0.25rem 0.6rem;
    border-color: var(--vote-control-colour);
    background: var(--vote-control-surface);
    color: var(--vote-control-colour);
    box-shadow: none;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .vote-btn.btn:hover,
  .vote-btn.btn:focus-visible {
    border-color: var(--vote-control-colour);
    background: color-mix(in srgb, var(--vote-control-colour) 24%, var(--card-bg));
    color: var(--text-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--vote-control-colour) 45%, transparent);
  }

  .vote-btn[data-vote-type="insight"] {
    --vote-control-colour: var(--vote-insight);
    --vote-control-surface: var(--vote-insight-bg);
  }

  .vote-btn[data-vote-type="agree"] {
    --vote-control-colour: var(--vote-agree);
    --vote-control-surface: var(--vote-agree-bg);
  }

  .vote-btn:is(.active, .is-voted) {
    border-color: var(--vote-control-colour);
    background: color-mix(in srgb, var(--vote-control-colour) 34%, var(--card-bg));
    color: var(--text-primary);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--vote-control-colour) 22%, transparent),
      0 0 16px color-mix(in srgb, var(--vote-control-colour) 52%, transparent);
  }

  .vote-count {
    min-width: 1.25em;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
  }

  .vote-group.is-loading .vote-count { opacity: 0.65; }

  /* ==========================================================
     Modals + Report Modal
     ========================================================== */
  .tgk-modal,
  #report-modal.tgk-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tgk-modal[hidden],
  #report-modal.tgk-modal[hidden] {
    display: none !important;
  }

  .tgk-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
  }

  .tgk-modal-panel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: min(720px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: calc(var(--space-lg) * 1.45);
    background: var(--card-gradient, var(--card-bg, #0f131a));
    color: var(--text-primary, #fff);
    border-radius: var(--border-radius-base);
    border: 1px solid var(--section-border, rgba(255,255,255,0.12));
    box-shadow: var(--page-shadow-soft, 0 20px 60px rgba(0, 0, 0, 0.6));
  }

  /* Report modal specifics */
  #report-modal .tgk-modal-panel h3 { margin-bottom: 1rem; font-size: var(--type-modal-heading-size, 1.25rem); }
  #report-modal .tgk-modal-panel label { display: grid; gap: 0.45rem; margin-bottom: 1rem; font-size: 0.95rem; }
  #report-modal .tgk-modal-panel select,
  #report-modal .tgk-modal-panel textarea { width: 100%; font-size: 0.98rem; }

  #report-modal .modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
  }

  #report-modal .modal-actions button {
    appearance: none;
    min-width: 10.5rem;
    min-height: 46px;
    padding: 0.78rem 1.3rem;
    font-family: var(--btn-font, var(--font-display));
    font-size: 0.94rem;
    font-weight: var(--type-weight-semibold, 600);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    cursor: pointer;
    color: var(--text-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--text-accent) 8%, transparent), transparent 70%);
    border: 2px solid var(--text-accent);
    border-radius: var(--btn-radius, var(--radius-md));
    box-shadow: 0 0 8px transparent;
    transition: all 0.25s ease;
  }

  #report-modal .modal-actions button[type="submit"] {
    color: var(--bg-primary);
    background: var(--text-accent);
    border-color: var(--text-accent);
    box-shadow: 0 0 15px var(--text-accent);
  }

  #report-modal .modal-actions button:hover,
  #report-modal .modal-actions button:focus-visible {
    transform: translateY(-1px);
    outline: 2px solid color-mix(in srgb, var(--highlight) 74%, transparent);
    outline-offset: 3px;
  }

  @media (max-width: 600px) {
    .tgk-modal,
    #report-modal.tgk-modal {
      align-items: start;
      padding:
        max(0.75rem, env(safe-area-inset-top))
        0.75rem
        max(0.75rem, env(safe-area-inset-bottom));
      overflow-y: auto;
    }

    .tgk-modal-panel {
      max-width: 100%;
      max-height: calc(100dvh - 1.5rem);
      padding: var(--space-md, 1rem);
    }

    #report-modal .modal-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;
    }

    #report-modal .modal-actions button {
      width: 100%;
      min-width: 0;
      white-space: normal;
    }
  }

  /* ==========================================================
     Reports List
     ========================================================== */
  #reports-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--dashboard-gap, clamp(1rem, 2.4vw, 1.75rem));
    margin-top: var(--space-md);
    padding: 0;
  }

  .report-card {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
    padding: clamp(1.15rem, 2.4vw, 1.5rem);
    border: 1px solid color-mix(in srgb, var(--section-border) 78%, var(--highlight) 22%);
    border-top: 2px solid var(--text-accent);
    border-radius: var(--border-radius-base);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--highlight) 6%, transparent), transparent 46%),
      color-mix(in srgb, var(--bg-primary) 86%, var(--section-bg-top) 14%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--shadow-glow) 12%, transparent);
  }

  /* ==========================================================
     Mobile Styles (preserved exactly)
     ========================================================== */
  @media (max-width: 768px) {
    body.emerald.is-landing.community-guide-landing .main-content #page-community.editorial-card-system .editorial-card-grid--two-up .portal-grid > .gnostic-card {
      flex-basis: 100%;
      max-width: 100%;
    }

    .discussion-message {
      padding: 0.75rem;
      border-radius: 0.75rem;
    }

    .discussion-children {
      margin-left: 0.5rem;
      padding-left: 0.5rem;
      border-left-width: 1px;
    }

    .discussion-message[data-depth="0"] { margin-left: 0; }
    .discussion-message[data-depth="1"] { margin-left: 0.6rem; }
    .discussion-message[data-depth="2"],
    .discussion-message[data-depth="3"],
    .discussion-message[data-depth="4"],
    .discussion-message[data-depth="5"],
    .discussion-message[data-depth="6"] {
      margin-left: 1rem;
    }

    .discussion-message[data-depth="3"],
    .discussion-message[data-depth="4"],
    .discussion-message[data-depth="5"],
    .discussion-message[data-depth="6"] {
      border-left: 2px solid rgba(120, 200, 200, 0.35);
      padding-left: 0.75rem;
      background: linear-gradient(90deg, rgba(120, 200, 200, 0.06), transparent 40%);
    }

    .discussion-message-body,
    .steelman-text {
      font-size: 0.95rem;
      line-height: 1.55;
    }

    .discussion-message-steelman {
      font-size: 0.85rem;
    }

    .vote-tooltip {
      display: none;
    }

    .vote-btn.btn {
      min-width: 44px;
      padding-inline: 0.65rem;
    }

    /* Undo the global .btn{width:100%} mobile rule for thread action
       buttons (vote, Reply, Report, Edit, Delete, Pin) and the Steel Man
       accept/reject panel's Cancel/Confirm buttons, so they all match
       the same compact multi-per-row layout instead of stacking as
       full-width blocks. */
    .discussion-actions .btn,
    .steelman-panel-actions .btn {
      width: auto;
      max-width: none;
      flex: 0 1 auto;
    }

    .discussion-sort-bar {
      display: grid;
      justify-content: flex-start;
      padding: 0.7rem;
    }

    .discussion-sort-select.form-input {
      width: 100%;
      min-width: 0;
    }

    .discussion-pagination {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-xs);
    }

    .discussion-pagination .btn {
      width: 100%;
    }
  }
}