@layer layout {
  /* ===================================================
     TGK Dashboard, Bookmarks and Reputation
     Version: 4.0, Responsive Consolidation (2026)

     Ownership:
     • This file owns dashboard, account, reputation, bookmark and protected
       administration interface presentation.
     • It may own dashboard-specific grid variants, but not the shared card
       shell, generic grid system, masthead or entitlement decisions.

     Preserved contracts:
     • Dashboard portal and membership grids
     • Utility navigation
     • Bookmark cards, groups and controls
     • Completion and tier indicators
     • Progress graph and reading history
     • Keys overview, breakdown and timeline
     • Community contribution cards
     • Continue-reading and resume sections
     • Reputation timeline graph
     • Account sanctions and moderation review
     =================================================== */

  /* ===================================================
     Local tokens
     =================================================== */

  :root {
    --dashboard-max: var(--content-max, 1240px);
    --dashboard-reading-max: 72rem;
    --dashboard-gutter: clamp(0.9rem, 2.6vw, 1.75rem);
    --dashboard-gap: clamp(1rem, 2.4vw, 1.75rem);

    --dashboard-radius:
      var(--border-radius-base, 0.75rem);

    --dashboard-border:
      color-mix(
        in srgb,
        var(--section-border, var(--text-accent)) 72%,
        transparent
      );

    --dashboard-border-soft:
      color-mix(
        in srgb,
        var(--text-accent) 18%,
        transparent
      );

    --dashboard-surface:
      color-mix(
        in srgb,
        var(--bg-primary) 94%,
        var(--highlight) 6%
      );

    --dashboard-surface-strong:
      color-mix(
        in srgb,
        var(--bg-primary) 88%,
        var(--section-bg-top, var(--highlight)) 12%
      );

    --dashboard-shadow:
      0 10px 28px
      color-mix(
        in srgb,
        var(--shadow-glow) 12%,
        transparent
      );

    --dashboard-shadow-hover:
      0 16px 38px
      color-mix(
        in srgb,
        var(--shadow-glow) 20%,
        transparent
      );

    --dashboard-rule:
      color-mix(
        in srgb,
        var(--text-accent) 22%,
        transparent
      );
  }

  :where(
    .dashboard-utility-strip,
    .dashboard-utility-strip *,
    .dashboard-bookmark-card,
    .dashboard-bookmark-card *,
    .dashboard-progress-graph-card,
    .dashboard-progress-graph-card *,
    .dashboard-keys-overview-panel,
    .dashboard-keys-overview-panel *,
    .dashboard-steelman-review-card,
    .dashboard-steelman-review-card *,
    .rep-timeline-graph-wrap,
    .rep-timeline-graph-wrap *
  ) {
    box-sizing: border-box;
  }

  /* ===================================================
     Tier display
     =================================================== */

  #user-tier {
    padding-left: 0.4rem;
    color: var(--gold-tone, var(--text-accent));
    font-weight: var(--type-weight-bold, 700);
  }

  .tier-display {
    margin-bottom: var(--space-lg, 2rem);
  }

  .tier-display p {
    margin: 0.25rem 0;
    color: var(--text-accent);
    font-size: 0.95rem;
  }

  .member-since {
    font-style: italic;
    letter-spacing: 0.015em;
    opacity: 0.8;
  }

  .tier-display.inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: 0.65rem 0.9rem;
    margin-bottom: var(--space-md, 1.5rem);
  }

  .tier-display.inline > span {
    min-width: 0;
    color: var(--text-accent);
    font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  }


  .tier-display.inline .member-since {
    margin-left: auto;
    white-space: nowrap;
  }

  .tier-info {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.75rem;
    margin-top: 0.25rem;

    color: var(--text-secondary);
    font-size: 0.85rem;
  }

  .tier-info .tier-divider {
    width: 1px;
    height: 1rem;

    background:
      linear-gradient(
        to bottom,
        transparent,
        var(--text-accent),
        transparent
      );
    opacity: 0.55;
  }

  .glow-tier {
    color: var(--gold-tone, var(--text-accent));
    text-shadow:
      0 0 8px
      color-mix(
        in srgb,
        var(--accent-glow, var(--shadow-glow)) 65%,
        transparent
      );
  }

  /* ===================================================
     Core dashboard grids
     =================================================== */

  .portal-grid.dashboard-portal-grid {
    display: grid;
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;
    max-width: var(--grid-max-width, 1100px);

    margin:
      var(--space-md, 1.5rem)
      auto;
    padding:
      var(--space-sm, 1rem)
      var(--dashboard-gutter);

    gap: var(--grid-gap, var(--dashboard-gap));
  }

  .portal-grid.dashboard-portal-grid > .gnostic-card {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .dashboard-keys-grid,
  .dashboard-reading-grid {
    width: 100%;
    max-width: var(--dashboard-max);
    justify-content: stretch;
  }

  .dashboard-keys-grid {
    --grid-card-min: 220px;
  }

  .dashboard-reading-grid {
    --grid-card-min: 260px;
  }

  @media (min-width: 1025px) {
    .portal-grid.dashboard-reading-grid,
    .portal-grid.dashboard-keys-grid,
    #dashboard-the-read .portal-grid.dashboard-portal-grid,
    #dashboard-most-active .portal-grid.dashboard-portal-grid,
    #dashboard-top-contributions-grid,
    #dashboard-progress-history-latest,
    #bookmark-list {
      max-width: 100%;
    }
  }

  /* ===================================================
     Dashboard utility navigation
     =================================================== */

  .dashboard-utility-strip {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(13rem, 1fr));

    width: 100%;
    max-width: var(--dashboard-max);

    margin:
      0
      auto
      var(--space-md, 1.5rem);
    padding-inline: var(--dashboard-gutter);

    gap: var(--space-md, 1.5rem);
  }

  .dashboard-utility-link {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr);
    align-items: center;

    width: 100%;
    min-width: 0;
    padding: 0.85rem 1rem;

    color: inherit;
    text-decoration: none;

    background: var(--card-soft-bg);
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
    border: 1px solid var(--dashboard-border-soft);
    border-radius: var(--dashboard-radius);
    box-shadow: none;

    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      transform 0.2s ease;
  }

  .dashboard-utility-link:hover,
  .dashboard-utility-link:focus-visible {
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 42%,
        transparent
      );
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--highlight) 5%, transparent), transparent 58%),
      var(--card-soft-bg);
    transform: translateY(-1px);
  }

  .dashboard-utility-link:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 3px;
  }

  .dashboard-utility-link.is-current {
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 52%,
        transparent
      );
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--highlight) 6%, transparent), transparent 58%),
      var(--card-soft-bg);
  }

  .dashboard-utility-glyph {
    display: inline-grid;
    place-items: center;

    width: 2.25rem;
    height: 2.25rem;

    color: var(--text-accent);
    background:
      color-mix(
        in srgb,
        var(--text-accent) 9%,
        transparent
      );
    border:
      1px solid
      color-mix(
        in srgb,
        var(--text-accent) 16%,
        transparent
      );
    border-radius: 50%;

    font-size: 1.15rem;
  }

  .dashboard-utility-copy {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
  }

  .dashboard-utility-copy strong {
    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: 0.88rem;
    line-height: 1.25;
    letter-spacing: var(--type-tracking-heading, 0.04em);
    text-transform: uppercase;
  }

  .dashboard-utility-copy span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }

  /* Dashboard, Progress, Keys and administration reuse the restrained homepage utility panel. */
  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    box-sizing: border-box;
    width: 100%;
    max-width: var(--dashboard-max);
    min-width: 0;

    margin: 0 auto clamp(2rem, 4vw, 3rem);
    padding: clamp(1rem, 2.4vw, 1.35rem);
    gap: 0;

    border: 1px solid color-mix(in srgb, var(--section-border) 78%, var(--highlight) 22%);
    border-radius: var(--dashboard-radius);
    background: transparent;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
    box-shadow:
      0 10px 24px color-mix(in srgb, var(--bg-primary) 88%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 28%, transparent);
  }

  #page-account .dashboard-utility-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #page-community .dashboard-utility-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.25rem;

    min-width: 0;
    min-height: 100%;
    max-width: 100%;
    padding: var(--space-sm) var(--space-md);

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link + .dashboard-utility-link {
    border-left: 1px solid color-mix(in srgb, var(--section-border) 72%, var(--highlight) 18%);
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link:hover,
  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link:focus-visible,
  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link.is-current {
    border-color: transparent;
    background: color-mix(in srgb, var(--highlight) 5%, transparent);
    transform: none;
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link:focus-visible {
    outline: 3px solid var(--highlight);
    outline-offset: -3px;
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-glyph {
    display: none;
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-copy {
    gap: 0.25rem;
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-copy strong {
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--page-title);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: var(--type-weight-bold, 700);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-copy span {
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.4;
  }

  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link:hover .dashboard-utility-copy strong,
  :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link:focus-visible .dashboard-utility-copy strong {
    color: var(--text-accent);
  }

  #admin-ops-dashboard .dashboard-utility-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #admin-moderation-console .dashboard-utility-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 641px) and (max-width: 900px) {
    #admin-ops-dashboard .dashboard-utility-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #admin-ops-dashboard .dashboard-utility-link:nth-child(odd) {
      border-left: 0;
    }

    #admin-ops-dashboard .dashboard-utility-link:nth-child(n + 3) {
      border-top: 1px solid color-mix(in srgb, var(--section-border) 72%, var(--highlight) 18%);
    }
  }

  /* ===================================================
     Bookmark grid and groups
     =================================================== */

  #bookmark-list,
  .bookmark-grid,
  #section-bookmarks .pillar-grid {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(min(17rem, 100%), 1fr));

    width: 100%;
    max-width: var(--dashboard-max);

    margin:
      var(--space-lg, 2rem)
      auto;
    padding:
      clamp(1rem, 3vw, 2rem)
      var(--dashboard-gutter);

    gap: var(--dashboard-gap);
  }

  .bookmark-group {
    margin-bottom: var(--space-xl, 3rem);
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .group-heading,
  .pillar-label {
    margin:
      0
      0
      var(--space-md, 1.5rem);

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.25;
    letter-spacing: 0.07em;
    text-align: center;
    text-transform: uppercase;
  }

  .group-heading {
    cursor: pointer;
    user-select: none;
  }

  .group-heading .count {
    color: var(--text-secondary);
    font-size: 0.8rem;
  }

  .group-heading .toggle-icon {
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .bookmark-group.open .toggle-icon {
    transform: rotate(180deg);
  }

  .bookmark-grid {
    max-height: none;
    overflow: hidden;
    opacity: 1;

    transition:
      max-height 0.25s ease,
      opacity 0.25s ease;
  }

  .bookmark-group.collapsed .bookmark-grid {
    opacity: 0;
  }

  .pillar-section {
    margin-bottom: var(--space-lg, 2rem);
  }

  /* ===================================================
     Bookmark cards
     =================================================== */

  .dashboard-bookmark-card,
  .pillar-card.bookmark-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    min-width: 0;
    min-height: 13rem;
    margin: 0;
    padding: clamp(1rem, 2.4vw, 1.4rem);

    overflow: hidden;

    color: var(--text-primary);
    background: var(--card-soft-bg);
    border: 1px solid var(--dashboard-border-soft);
    border-radius: var(--dashboard-radius);
    box-shadow: none;

    text-align: left;

    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      transform 0.2s ease;
  }

  .dashboard-bookmark-card:hover,
  .pillar-card.bookmark-card:hover {
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 40%,
        transparent
      );
    background: var(--card-soft-bg);
    transform: translateY(-2px);
  }

  .dashboard-bookmark-card.removing {
    animation: bookmark-fade-out 0.3s ease forwards;
  }

  @keyframes bookmark-fade-out {
    to {
      opacity: 0;
      transform: translateY(0.5rem) scale(0.98);
    }
  }

  .dashboard-bookmark-card .bookmark-glyph,
  .pillar-card .pillar-icon {
    margin:
      0
      0
      0.7rem;

    color: var(--glyph-color, var(--text-accent));
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1;
  }

  .dashboard-bookmark-card .bookmark-title,
  .pillar-card .pillar-title {
    margin:
      0
      0
      0.5rem;

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.25;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .dashboard-bookmark-card .bookmark-description {
    margin:
      0
      0
      var(--space-md, 1.5rem);

    color: var(--text-primary);
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .dashboard-bookmark-card .bookmark-meta,
  .pillar-card .pillar-meta {
    margin:
      auto
      0
      var(--space-sm, 1rem);

    color: var(--text-secondary);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.45;
  }

  .pillar-card .pillar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    gap: 0.6rem;
    margin-top: auto;
  }

  /* ===================================================
     Remove controls and bookmark actions
     =================================================== */

  .bookmark-floating {
    margin-bottom: var(--space-sm, 1rem);
    text-align: right;
  }

  .page-actions-floating {
    position: absolute;
    top: var(--space-sm, 1rem);
    right: var(--space-sm, 1rem);
    z-index: 100;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 0.35rem;
  }

  .download-tag,
  .remove-bookmark-icon {
    border: 0;
    background: none;
    cursor: pointer;
  }

  .page-complete-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2rem;
    min-height: 2rem;
    padding: 0.2rem 0.42rem;

    color:
      color-mix(
        in srgb,
        var(--text-secondary) 80%,
        var(--text-accent) 20%
      );
    background: var(--card-soft-bg);
    border: 1px solid var(--dashboard-border-soft);
    border-radius: 999px;

    font-size: 0.92rem;
    line-height: 1;

    cursor: pointer;
  }

  .page-complete-toggle:hover,
  .page-complete-toggle:focus-visible {
    color: var(--text-accent);
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 55%,
        transparent
      );
  }

  .page-complete-toggle:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 3px;
  }

  .page-complete-toggle.is-complete {
    color: var(--bg-primary);
    background: var(--text-accent);
    border-color: var(--text-accent);
  }

  .download-tag {
    margin-left: 0.25rem;
    color: var(--accent, var(--text-accent));
    font-size: 1.3rem;
  }

  .download-tag:hover {
    opacity: 0.78;
  }

  .remove-bookmark-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    z-index: 3;

    padding: 0.2rem;

    color:
      color-mix(
        in srgb,
        var(--text-accent) 55%,
        transparent
      );
    font-size: 1rem;
    line-height: 1;

    transition:
      color 0.2s ease,
      transform 0.2s ease;
  }

  .remove-bookmark-icon:hover,
  .remove-bookmark-icon:focus-visible {
    color: var(--color-danger, #ff6464);
    transform: scale(1.12);
  }

  .remove-bookmark-icon:focus-visible {
    outline: 2px solid var(--color-danger, #ff6464);
    outline-offset: 2px;
  }

  /* Batch 4A: removed confirmed-dead .btn-mini.remove-bookmark (base,
     ::before, :hover/:focus-visible) and the "Sticky bookmark controls"
     .bookmark-controls rule — neither .btn-mini nor .bookmark-controls has
     any live template, JS or built-output reference. The live
     bookmark-removal control is .remove-bookmark-icon (above), unaffected. */

  /* ===================================================
     Dashboard-specific bookmark cards
     =================================================== */

  body.requires-auth:not(.admin)
  #section-bookmarks
  .bookmark-grid {
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  body.requires-auth:not(.admin)
  #section-bookmarks
  .bookmark-grid
  > .gnostic-card
  .card-link {
    min-height: 100%;
  }

  .dashboard-bookmark-kicker,
  .dashboard-keys-timeline-kicker,
  .dashboard-keys-contribution-kicker,
  .dashboard-the-read-kicker,
  .dashboard-most-active-kicker,
  .progress-history-kicker {
    margin: 0 0 0.45rem;

    color: var(--text-accent);
    font-size: var(--type-eyebrow-size-compact, 0.72rem);
    line-height: var(--type-eyebrow-line, 1.35);
    letter-spacing: var(--type-eyebrow-tracking-subtle, 0.08em);
    text-transform: uppercase;
  }

  .dashboard-bookmark-timestamp,
  .dashboard-bookmark-episode,
  .dashboard-bookmark-part {
    margin:
      0.2rem
      0
      0;

    color: var(--text-secondary);
    line-height: var(--type-metadata-line, 1.45);
  }

  .dashboard-bookmark-episode {
    color: var(--text-primary);
    font-weight: var(--type-weight-bold, 700);
  }

  /* ===================================================
     Completion state
     =================================================== */

  .episode-complete-badge {
    position: absolute;
    top: var(--space-sm, 0.75rem);
    left: var(--space-sm, 0.75rem);
    z-index: 6;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width:
      calc(
        100%
        - (var(--space-sm, 0.75rem) * 2)
      );

    pointer-events: none;
  }

  .gnostic-card.is-completed {
    opacity: 0.94;
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 34%,
        transparent
      );
  }

  .episode-progress {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    opacity: 0.85;
  }

  .progress-text {
    white-space: nowrap;
  }

  /* ===================================================
     Overview cards
     =================================================== */

  #dashboard-progress-card,
  .dashboard-keys-card {
    border: 1px solid var(--dashboard-border-soft);
    box-shadow: none;
  }

  #dashboard-progress-card .card-glyph,
  .dashboard-keys-card .card-glyph {
    color: var(--text-accent);
  }

  #dashboard-progress-percent {
    color: var(--text-accent);
  }

  .dashboard-keys-value-number {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 650;
    letter-spacing: 0.015em;
  }

  .card-link[aria-disabled="true"] {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.74;
  }

  .badge-coming-soon {
    display: inline-block;

    margin-bottom: var(--space-xs, 0.4rem);
    padding: 0.12rem 0.42rem;

    color: var(--text-accent);
    border: 1px solid var(--dashboard-border-soft);
    border-radius: 999px;

    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* ===================================================
     Progress graph
     =================================================== */

  .dashboard-progress-intro,
  .dashboard-progress-panel {
    margin:
      var(--space-lg, 2rem)
      0;
  }

  .dashboard-progress-graph-card {
    display: grid;
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(17rem, 1.1fr);
    align-items: center;

    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1rem, 2.4vw, 1.5rem);

    background: var(--card-soft-bg);
    border-top: 1px solid var(--dashboard-rule);
    border-bottom: 1px solid var(--dashboard-rule);
  }

  .dashboard-progress-graph-copy,
  .dashboard-progress-graph-visual {
    min-width: 0;
  }

  .dashboard-progress-graph-copy {
    display: grid;
    align-content: start;
    gap: 0.75rem;
  }

  .dashboard-progress-graph-copy
  > :where(.section-heading, p) {
    margin: 0;
    padding: 0;
  }

  .dashboard-progress-graph-stats {
    display: grid;
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 0.65rem;
    margin-top: 0.35rem;
  }

  .dashboard-progress-graph-stat {
    display: grid;
    gap: 0.15rem;

    padding: 0.7rem 0.75rem;

    background: var(--card-soft-bg);
    border-left: 2px solid var(--dashboard-rule);
  }

  .dashboard-progress-graph-stat strong {
    display: block;

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
  }

  .dashboard-progress-graph-stat span {
    color: var(--text-secondary);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .dashboard-progress-graph-visual {
    display: grid;
    gap: 0.65rem;
  }

  .dashboard-progress-graph-canvas {
    position: relative;
    min-height: 18rem;
  }

  .dashboard-progress-graph-canvas > p {
    margin: 0;
    padding: var(--space-md, 1.5rem);
  }

  .dashboard-progress-graph-svg {
    display: block;

    width: 100%;
    height: auto;

    overflow: visible;
  }

  .dashboard-progress-graph-ring {
    fill: none;
    stroke:
      color-mix(
        in srgb,
        var(--text-accent) 12%,
        transparent
      );
    stroke-width: 1;
    stroke-dasharray: 6 9;
  }

  .dashboard-progress-graph-link {
    fill: none;
    stroke-linecap: round;
  }

  .dashboard-progress-graph-link-base {
    stroke:
      color-mix(
        in srgb,
        var(--text-secondary) 52%,
        transparent
      );
    opacity: 0.42;
  }

  .dashboard-progress-graph-link-active {
    stroke: var(--text-accent);
  }

  .dashboard-progress-graph-node-halo {
    fill:
      color-mix(
        in srgb,
        var(--accent-glow) 36%,
        transparent
      );
    filter: blur(8px);
  }

  .dashboard-progress-graph-node-shell {
    fill: var(--dashboard-surface);
    stroke:
      color-mix(
        in srgb,
        var(--text-accent) 34%,
        transparent
      );
    stroke-width: 1.2px;
  }

  .dashboard-progress-graph-node-core {
    fill:
      color-mix(
        in srgb,
        var(--text-accent) 78%,
        var(--bg-primary) 22%
      );
  }

  .dashboard-progress-graph-node-progress {
    fill: none;
    stroke: var(--text-accent);
    stroke-width: 2.8px;
    stroke-linecap: round;
  }

  .dashboard-progress-graph-node-label,
  .dashboard-progress-graph-node-count {
    pointer-events: none;
  }

  .dashboard-progress-graph-node-label {
    fill: var(--text-accent);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .dashboard-progress-graph-node-count {
    fill: var(--text-secondary);
    font-size: 0.7rem;
  }

  .dashboard-progress-graph-legend {
    margin: 0;
  }

  .dashboard-progress-intro
  > :where(.section-heading, p),
  .dashboard-progress-panel
  > .section-heading {
    padding-inline: var(--dashboard-gutter);
  }

  /* ===================================================
     Progress history
     =================================================== */

  .progress-history-section
  + .progress-history-section {
    margin-top: var(--space-xl, 3rem);
    padding-top: var(--space-lg, 2rem);
    border-top: 1px solid var(--dashboard-rule);
  }

  .progress-history-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: var(--space-sm, 1rem);
    margin-bottom: var(--space-sm, 1rem);
    padding-inline: var(--dashboard-gutter);
  }

  .progress-history-section-title {
    margin: 0;

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .progress-history-section-count {
    margin: 0;
    white-space: nowrap;
  }

  .progress-history-card .card-body {
    text-align: left;
  }

  .progress-history-card
  :where(.card-title, .card-desc) {
    max-width: none;
    margin-inline: 0;
  }

  .progress-history-latest-card {
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 26%,
        transparent
      );
  }

  /* ===================================================
     Keys overview
     =================================================== */

  .dashboard-keys-intro > p {
    max-width: 62rem;
  }

  .dashboard-keys-overview-panel {
    display: grid;
    gap: clamp(0.9rem, 2vw, 1.2rem);
  }

  .dashboard-keys-hero {
    display: grid;
    justify-items: center;

    width: min(100%, 42rem);
    margin-inline: auto;

    gap: 0.65rem;
    text-align: center;
  }

  .dashboard-keys-hero-total {
    margin: 0;

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(3.3rem, 9vw, 6rem);
    font-weight: var(--type-weight-bold, 700);
    line-height: 0.92;
    letter-spacing: 0.025em;
  }

  .dashboard-keys-hero-level {
    margin: 0;

    color:
      color-mix(
        in srgb,
        var(--text-accent) 82%,
        var(--text-secondary) 18%
      );

    font-family: var(--font-display);
    font-size: clamp(0.72rem, 1.3vw, 0.9rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .dashboard-keys-progress {
    position: relative;

    width: min(100%, 32rem);
    height: 0.45rem;
    margin-top: 0.15rem;

    overflow: hidden;

    background:
      color-mix(
        in srgb,
        var(--bg-primary) 96%,
        var(--highlight) 4%
      );
    border: 1px solid var(--dashboard-border-soft);
    border-radius: 999px;
  }

  .dashboard-keys-progress-fill {
    display: block;

    height: 100%;

    background:
      linear-gradient(
        90deg,
        var(--text-accent),
        var(--highlight)
      );
    border-radius: inherit;
  }

  .dashboard-keys-next,
  .dashboard-keys-breakdown-note {
    width: min(100%, 58rem);
    margin-inline: auto;

    font-size: clamp(0.88rem, 1.3vw, 0.98rem);
    line-height: 1.5;
    text-align: center;
  }

  .dashboard-keys-breakdown-bar {
    display: grid;
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    width: min(100%, 58rem);
    margin-inline: auto;

    overflow: hidden;

    border-top: 1px solid var(--dashboard-rule);
    border-bottom: 1px solid var(--dashboard-rule);
  }

  .dashboard-keys-breakdown-stat {
    display: grid;
    align-content: center;
    justify-items: center;

    min-width: 0;
    min-height: 4.6rem;
    padding: 0.8rem 0.45rem;

    gap: 0.2rem;
    text-align: center;
  }

  .dashboard-keys-breakdown-stat
  + .dashboard-keys-breakdown-stat {
    border-left: 1px solid var(--dashboard-rule);
  }

  .dashboard-keys-breakdown-label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .dashboard-keys-breakdown-total {
    margin: 0;

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    letter-spacing: 0.04em;
  }

  /* ===================================================
     Keys explainer
     =================================================== */

  .dashboard-keys-explainer {
    width: min(100%, 58rem);
    margin-inline: auto;

    overflow: hidden;

    background: var(--card-soft-bg);
    border-top: 1px solid var(--dashboard-rule);
    border-bottom: 1px solid var(--dashboard-rule);
  }

  .dashboard-keys-explainer > summary {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      auto;
    align-items: center;

    gap: var(--space-sm, 1rem);
    padding: 0.85rem 0;

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .dashboard-keys-explainer
  > summary::-webkit-details-marker {
    display: none;
  }

  .dashboard-keys-explainer > summary::marker {
    content: "";
  }

  .dashboard-keys-explainer > summary::after {
    content: "\203a";

    color: var(--text-accent);
    font-size: 1.05rem;
    line-height: 1;

    transform: rotate(90deg);
    transition: transform 0.2s ease;
  }

  .dashboard-keys-explainer[open]
  > summary::after {
    transform: rotate(270deg);
  }

  .dashboard-keys-explainer
  > summary:hover,
  .dashboard-keys-explainer
  > summary:focus-visible {
    color: var(--highlight);
  }

  .dashboard-keys-explainer-body {
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows 0.25s ease;
  }

  .dashboard-keys-explainer[open]
  .dashboard-keys-explainer-body {
    grid-template-rows: 1fr;
  }

  .dashboard-keys-explainer-inner {
    overflow: hidden;
  }

  .dashboard-keys-explainer-grid {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: var(--dashboard-gap);
    padding:
      0
      0
      1rem;
  }

  .dashboard-keys-explainer-grid > section {
    min-width: 0;
  }

  .dashboard-keys-explainer-grid h4 {
    margin:
      0
      0
      0.65rem;

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .dashboard-keys-explainer-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dashboard-keys-explainer-list li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--dashboard-rule);
  }

  .dashboard-keys-explainer-list li:last-child {
    border-bottom: 0;
  }

  /* ===================================================
     Keys section headers and filters
     =================================================== */

  .dashboard-keys-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: var(--space-md, 1.5rem);
    margin-bottom: var(--space-md, 1.5rem);
  }

  .dashboard-keys-section-header > div {
    min-width: 0;
  }

  .dashboard-keys-section-header
  :where(.section-heading, p) {
    margin: 0;
  }

  .dashboard-keys-section-header-centered {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .dashboard-keys-section-header-filter {
    align-items: end;
  }

  .dashboard-keys-section-header-copy {
    min-width: 0;
  }

  .dashboard-keys-filter {
    display: grid;
    gap: 0.3rem;

    min-width: min(100%, 14rem);
  }

  .dashboard-keys-filter > .small.muted {
    margin: 0;
  }

  .dashboard-keys-filter .form-input {
    width: 100%;
    min-height: 2.55rem;
    padding: 0.55rem 0.75rem;

    color: var(--input-text, var(--text-primary));
    background: var(--input-bg, var(--bg-primary));
    border: 1px solid rgba(var(--text-accent-rgb, 100 120 140), 0.72);
    border-radius: var(--dashboard-radius);

    font: inherit;
  }

  .dashboard-keys-filter .form-input option {
    color: var(--input-text, var(--text-primary));
    background: var(--input-bg, var(--bg-primary));
  }

  .dashboard-keys-filter
  .form-input:hover {
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 54%,
        transparent
      );
  }

  .dashboard-keys-filter
  .form-input:focus {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
    border-color: var(--text-accent);
  }

  /* ===================================================
     Keys and contribution cards
     =================================================== */

  .dashboard-keys-grid.dashboard-portal-grid,
  .dashboard-keys-contributions-grid {
    width: 100%;
    max-width: 100%;
  }

  .dashboard-keys-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 0.65rem;
    margin-top: var(--space-md, 1.5rem);
  }


  .dashboard-keys-pagination .muted.small {
    margin: 0;
  }

  .dashboard-keys-timeline-card,
  .dashboard-keys-contribution-card,
  .dashboard-the-read-card,
  .dashboard-most-active-card,
  .dashboard-highest-engagement-card,
  .progress-history-card,
  .dashboard-keys-card,
  #dashboard-progress-card,
  #dashboard-continue-card {
    min-width: 0;
  }

  .dashboard-keys-timeline-card
  :where(.card-title, .card-desc),
  .dashboard-keys-contribution-card
  :where(.card-title, .card-desc),
  .dashboard-the-read-card
  :where(.card-title, .card-desc),
  .dashboard-most-active-card
  :where(.card-title, .card-desc),
  .dashboard-highest-engagement-card
  :where(.card-title, .card-desc),
  .progress-history-card
  :where(.card-title, .card-desc),
  .dashboard-keys-card
  :where(.card-title, .card-desc),
  #dashboard-progress-card
  :where(.card-title, .card-desc),
  #dashboard-continue-card
  :where(.card-title, .card-desc) {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }

  .dashboard-keys-contribution-card .card-link,
  .dashboard-the-read-card .card-link,
  .dashboard-most-active-card .card-link,
  .dashboard-highest-engagement-card .card-link,
  .progress-history-card .card-link,
  .dashboard-keys-card .card-link,
  #dashboard-progress-card .card-link,
  #dashboard-continue-card .card-link {
    min-height: 100%;
  }

  #dashboard-the-read .card-desc {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .dashboard-keys-contribution-card
  .contribution-score-badge-wrap {
    margin-top: 0.65rem;
  }

  .dashboard-keys-timeline-card .badge-br,
  .dashboard-keys-contribution-card .badge-br,
  .dashboard-the-read-card .badge-br,
  .dashboard-most-active-card .badge-br,
  .dashboard-highest-engagement-card .badge-br,
  .progress-history-card .badge-br {
    margin-top: auto;
    padding-top: 0.8rem;
  }

  .dashboard-card__footer {
    display: flex;
    position: relative;
    align-items: center;
    gap: 0.75rem;
    align-self: stretch;
    margin-top: auto;
    margin-right: clamp(1rem, 2.2vw, 1.4rem);
    margin-bottom: 0;
    margin-left: clamp(1rem, 2.2vw, 1.4rem);
    padding-top: 0.8rem;
    padding-bottom: 0.65rem;
    border-top: 1px solid var(--dashboard-rule);
    color: var(--text-accent);
    font-size: 0.68rem;
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .dashboard-card__footer > :first-child {
    margin-right: auto;
  }

  .dashboard-card__footer > :last-child {
    position: absolute;
    right: 0;
    text-align: right;
  }

  .dashboard-card__footer-meta {
    margin-left: auto;
  }

  #page-dashboard :is(.dashboard-portal-grid, .bookmark-grid) {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }

  #page-dashboard .gnostic-card,
  #page-dashboard-keys .gnostic-card,
  #page-dashboard-progress .gnostic-card,
  #community-profile-root .gnostic-card {
    --card-bg: var(--card-soft-bg);
    background: var(--card-bg);
  }

  #page-dashboard #section-signals .gnostic-card,
  #page-dashboard #dashboard-the-read .dashboard-the-read-card,
  #page-dashboard #dashboard-most-active .dashboard-most-active-card,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card {
    --card-bg: var(--card-soft-bg);
    background: var(--card-bg);
    box-shadow: none;
  }

  #page-dashboard #section-signals .gnostic-card,
  #page-dashboard #dashboard-the-read .dashboard-the-read-card,
  #page-dashboard #dashboard-most-active .dashboard-most-active-card,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card {
    border-color: var(--dashboard-border-soft);
  }

  #page-dashboard #section-bookmarks .dashboard-bookmark-card {
    border-color: var(--dashboard-border-soft);
  }

  #page-dashboard #steelman-feed.list-emoji > li,
  #page-dashboard #steelman-feed.list-emoji > li a,
  #page-dashboard #steelman-feed.list-emoji > li::before {
    font-size: var(--type-card-desc-size-excerpt, 0.8em);
    line-height: var(--type-card-desc-line-editorial, 1.65);
  }

  #page-dashboard #steelman-feed.list-emoji > li {
    color: var(--text-secondary);
  }

  #page-dashboard #section-signals .gnostic-card::before,
  #page-dashboard #section-signals .gnostic-card::after,
  #page-dashboard #dashboard-the-read .dashboard-the-read-card::before,
  #page-dashboard #dashboard-the-read .dashboard-the-read-card::after,
  #page-dashboard #dashboard-most-active .dashboard-most-active-card::before,
  #page-dashboard #dashboard-most-active .dashboard-most-active-card::after,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card::before,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card::after,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card::before,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card::after {
    content: none;
    display: none;
  }

  #page-dashboard #section-signals .gnostic-card .card-link,
  #page-dashboard #section-signals .gnostic-card .card-body,
  #page-dashboard #dashboard-the-read .dashboard-the-read-card .card-link,
  #page-dashboard #dashboard-the-read .dashboard-the-read-card .card-body,
  #page-dashboard #dashboard-most-active .dashboard-most-active-card .card-link,
  #page-dashboard #dashboard-most-active .dashboard-most-active-card .card-body,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card .card-link,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card .card-body,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card .card-link,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card .card-body {
    background: var(--card-soft-bg);
  }

  .dashboard-bookmark-card .dashboard-card__footer {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }

  body.requires-auth:not(.admin) .portal-grid.dashboard-portal-grid > .dashboard-highest-engagement-card .card-body {
    min-height: 0;
    padding: clamp(1.35rem, 2.8vw, 2rem);
  }

  .dashboard-highest-engagement-card .dashboard-card__footer {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }

  .dashboard-keys-card .dashboard-card__footer,
  #dashboard-progress-card .dashboard-card__footer,
  #dashboard-continue-card .dashboard-card__footer {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }

  .progress-history-latest-card .dashboard-card__footer {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }

  @media (min-width: 901px) {
    #section-bookmarks .bookmark-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  body.requires-auth:not(.admin) #section-bookmarks .bookmark-grid > .dashboard-bookmark-card {
    --card-bg: transparent;
    --card-soft-backdrop: blur(2px);

    min-height: 0;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
    border:
      2px
      solid
      color-mix(
        in srgb,
        var(--section-border) 78%,
        var(--highlight) 22%
      ) !important;
    box-shadow: none;
  }

  body.requires-auth:not(.admin) #section-bookmarks .bookmark-grid > .dashboard-bookmark-card .card-body {
    min-height: 0;
    padding: clamp(1rem, 2.2vw, 1.4rem) !important;
  }

  /* ===================================================
     Continue reading and resume
     =================================================== */

  #dashboard-continue-card {
    width: 100%;
    max-width: none;
  }

  #dashboard-continue-card .card-desc {
    max-width: 60ch;
  }

  #dashboard-continue-meta {
    margin-top: 0.55rem;
  }

  .gnostic-card.continue-card {
    width: 100%;
  }

  #dashboard-resume-section {
    margin:
      var(--space-lg, 2rem)
      0;
    padding:
      clamp(1rem, 2.5vw, 1.5rem)
      0;

    border-top: 1px solid var(--dashboard-rule);
    border-bottom: 1px solid var(--dashboard-rule);
  }

  #dashboard-resume-section
  .dashboard-section-title {
    margin-top: 0;
  }

  #dashboard-resume-section .small {
    margin-bottom: 1.15rem;
  }

  #dashboard-resume-section
  :where(.portal-grid, .pillar-grid) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  #dashboard-grid .pillar-grid {
    margin-top: 1.15rem;
  }

  #dashboard-grid .portal-grid {
    margin: 0;
    padding: 0;
  }

  /* ===================================================
     Reputation timeline
     =================================================== */

  .rep-timeline-graph-wrap {
    width: 100%;
    margin:
      var(--space-lg, 2rem)
      0;
    padding:
      clamp(1rem, 2.5vw, 1.5rem)
      0;

    border-top: 1px solid var(--dashboard-rule);
    border-bottom: 1px solid var(--dashboard-rule);
  }

  .rep-timeline-graph-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }

  .rep-timeline-btn {
    min-height: 2.2rem;
    padding: 0.35rem 0.75rem;

    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--dashboard-border-soft);
    border-radius: 999px;

    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
  }

  .rep-timeline-btn:hover,
  .rep-timeline-btn:focus-visible {
    color: var(--text-accent);
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 46%,
        transparent
      );
  }

  .rep-timeline-btn--active {
    color: var(--bg-primary);
    background: var(--text-accent);
    border-color: var(--text-accent);
  }

  .rep-timeline-graph {
    position: relative;
    width: 100%;
    min-height: 18rem;
  }

  .rep-graph-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .rep-graph-axis text {
    fill: var(--text-secondary);
    font-size: 0.72rem;
  }

  .rep-graph-axis .domain,
  .rep-graph-axis .tick line {
    stroke: var(--dashboard-rule);
  }

  .rep-graph-dot {
    cursor: pointer;
  }

  .rep-graph-tooltip {
    position: absolute;
    z-index: 10;

    max-width: min(18rem, 84vw);
    padding: 0.65rem 0.75rem;

    color: var(--text-primary);
    background:
      color-mix(
        in srgb,
        var(--bg-primary) 94%,
        transparent
      );
    border: 1px solid var(--dashboard-border-soft);
    border-radius: var(--dashboard-radius);
    box-shadow: var(--dashboard-shadow);

    font-size: 0.8rem;
    line-height: 1.45;

    pointer-events: none;
  }

  .rep-graph-tooltip strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text-accent);
  }

  /* ===================================================
     Signals and account sanctions
     =================================================== */

  #reputation-card-badge[hidden],
  #dashboard-keys-week-badge[hidden],
  #spendable-keys-badge[hidden],
  .dashboard-keys-week-panel[hidden] {
    display: none;
  }

  .dashboard-signals-grid
  .dashboard-portal-grid {
    width: 100%;
    max-width: 100%;
  }

  .dashboard-account-sanction-body {
    display: grid;
    gap: 0.8rem;
  }

  .dashboard-account-sanction[hidden],
  .dashboard-account-slot[data-account-status="pending"] .dashboard-account-sanction {
    display: none !important;
  }

  .dashboard-account-sanction-kicker {
    margin: 0;
    color: var(--text-accent);
    letter-spacing: var(--type-eyebrow-tracking-minimal, 0.07em);
    text-transform: uppercase;
  }

  .dashboard-account-sanction-actions {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0.65rem;
  }

  .dashboard-account-sanction-link {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr);
    align-items: center;

    gap: 0.75rem;
    padding: 0.8rem;

    color: inherit;
    text-decoration: none;

    background: var(--card-soft-bg);
    border: 1px solid var(--dashboard-border-soft);
    border-radius: var(--dashboard-radius);
  }

  .dashboard-account-sanction-link:hover,
  .dashboard-account-sanction-link:focus-visible {
    border-color:
      color-mix(
        in srgb,
        var(--text-accent) 46%,
        transparent
      );
  }

  .dashboard-account-sanction-link
  .dashboard-utility-glyph {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }

  .dashboard-account-sanction-link
  .dashboard-utility-copy strong {
    font-size: 0.78rem;
  }

  .dashboard-account-sanction-link
  .dashboard-utility-copy span {
    font-size: 0.76rem;
  }

  /* ===================================================
     Weekly Keys panel
     =================================================== */

  .dashboard-keys-week-panel {
    display: grid;
    gap: 0.65rem;
  }

  .dashboard-keys-week-kicker {
    margin: 0;
    color: var(--text-accent);
    letter-spacing: var(--type-eyebrow-tracking-minimal, 0.07em);
    text-transform: uppercase;
  }

  .dashboard-keys-week-inline-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap: 0.4rem 0.7rem;
  }

  .dashboard-keys-week-sparkline {
    min-height: 4rem;
  }

  .dashboard-keys-week-sparkline svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .dashboard-keys-week-sparkline
  .sparkline-baseline {
    stroke: var(--dashboard-rule);
  }

  .dashboard-keys-week-sparkline
  .sparkline-area {
    fill:
      color-mix(
        in srgb,
        var(--text-accent) 10%,
        transparent
      );
  }

  .dashboard-keys-week-sparkline
  .sparkline-line {
    fill: none;
    stroke: var(--text-accent);
    stroke-width: 2;
  }

  .dashboard-keys-week-sparkline
  .sparkline-dot {
    fill: var(--text-accent);
  }

  /* ===================================================
     Moderation review
     =================================================== */
  #steelman-pending-list.portal-grid.dashboard-portal-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #steelman-pending-list
  > .dashboard-steelman-review-card {
    width: 100%;
    max-width: none;
    background: var(--card-soft-bg);
    border-color: transparent;
    box-shadow: none;
  }

  #steelman-feed.list-emoji > li {
    color: var(--text-secondary);
    font-size: var(--type-card-desc-size-excerpt, 0.8em);
    line-height: var(--type-card-desc-line-editorial, 1.65);
  }

  .dashboard-steelman-review-card
  :where(.card-title, .card-desc) {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }

  .dashboard-steelman-review-card .card-body {
    gap: 0;
  }

  .dashboard-steelman-review-meta,
  .dashboard-steelman-review-status {
    margin:
      0.4rem
      0
      0;
    color: var(--text-secondary);
    font-size: var(--type-card-desc-size-excerpt, 0.8em);
    line-height: 1.5;
  }

  .dashboard-steelman-review-card .dashboard-steelman-review-eyebrow {
    display: block;
    color: var(--text-accent);
    font-size: var(--type-eyebrow-size-compact, 0.72rem);
    line-height: var(--type-eyebrow-line, 1.35);
    letter-spacing: var(--type-eyebrow-tracking-subtle, 0.08em);
    text-transform: uppercase;
  }

  .dashboard-steelman-review-deck {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.85rem, 2vw, 1.15rem);
    margin-top: clamp(1rem, 2.2vw, 1.35rem);
  }

  .dashboard-steelman-review-block {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    min-width: 0;
    padding: clamp(0.85rem, 2vw, 1.05rem);
    border: 1px solid var(--dashboard-border-soft);
    border-radius: var(--radius-md, 0.75rem);
    background: var(--card-soft-bg);
  }

  .dashboard-steelman-review-label {
    color: var(--text-accent);
    font-size: var(--type-eyebrow-size-emphasis, 0.78rem);
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: var(--type-tracking-badge, 0.05em);
    line-height: var(--type-eyebrow-line, 1.35);
    text-transform: uppercase;
  }

  .dashboard-steelman-review-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--type-card-desc-size-excerpt, 0.8em);
    line-height: var(--type-card-desc-line-editorial, 1.65);
  }

  .dashboard-steelman-review-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    gap: var(--space-sm, 0.75rem);
    margin-top: clamp(1rem, 2.2vw, 1.35rem);
    padding-top: 1rem;
    border-top: 1px solid var(--dashboard-rule);
  }

  .dashboard-steelman-review-card
  .card-body
  > .dashboard-steelman-review-status {
    order: 5;
  }

  .dashboard-steelman-review-card
  .card-body
  > .dashboard-steelman-review-actions {
    order: 6;
  }

  .dashboard-steelman-review-card
  .card-body
  > .dashboard-steelman-reject-panel {
    order: 7;
  }

  .dashboard-steelman-review-link {
    align-self: flex-start;
  }

  @media (max-width: 760px) {
    .dashboard-steelman-review-deck {
      grid-template-columns: 1fr;
    }
  }

  .dashboard-steelman-reject-panel {
    display: grid;

    gap: 0.6rem;
    margin-top: 0.8rem;
    padding: 0.85rem 0;

    background: var(--card-soft-bg);
    border-top: 1px solid var(--dashboard-rule);
  }

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

  .dashboard-steelman-reject-panel label {
    display: grid;
    gap: 0.3rem;
  }

  .dashboard-steelman-reject-panel
  :where(
    select,
    input[type="text"],
    textarea
  ) {
    width: 100%;
    padding: 0.7rem 0.85rem;

    color: var(--input-text, var(--text-primary));
    background: var(--input-bg, var(--bg-primary));
    border:
      1px solid
      color-mix(
        in srgb,
        var(--input-border, var(--text-accent)) 72%,
        transparent
      );
    border-radius: var(--dashboard-radius);

    font: inherit;
  }

  .dashboard-steelman-reject-panel
  :where(
    select,
    input[type="text"],
    textarea
  ):focus {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
    border-color: var(--text-accent);
  }

  .dashboard-steelman-reject-panel textarea {
    min-height: 7rem;
    resize: vertical;
  }

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

  .dashboard-steelman-reject-error {
    color: var(--form-error-color, var(--color-danger));
  }

  .dashboard-steelman-review-card.is-busy {
    opacity: 0.78;
  }

  /* ===================================================
     Tablet responsiveness
     =================================================== */

  @media (max-width: 900px) {
    .portal-grid.dashboard-portal-grid,
    #steelman-pending-list.portal-grid.dashboard-portal-grid {
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
    }

    .dashboard-progress-graph-card {
      grid-template-columns:
        minmax(0, 1fr);
      align-items: start;
    }

    .dashboard-progress-graph-canvas {
      min-height: 16rem;
    }

    .dashboard-keys-breakdown-bar {
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
    }

    .dashboard-keys-breakdown-stat:nth-child(4) {
      border-left: 0;
    }

    .dashboard-keys-breakdown-stat:nth-child(n + 4) {
      border-top: 1px solid var(--dashboard-rule);
    }

    .dashboard-keys-section-header-filter {
      align-items: stretch;
    }
  }

  /* ===================================================
     Mobile responsiveness
     =================================================== */

  @media (max-width: 640px) {
    :root {
      --dashboard-gutter: 0.85rem;
      --dashboard-gap: 0.9rem;
    }

    .portal-grid.dashboard-portal-grid,
    #steelman-pending-list.portal-grid.dashboard-portal-grid {
      grid-template-columns:
        minmax(0, 1fr);

      padding-inline: 0;
    }

    .dashboard-utility-strip {
      grid-template-columns:
        minmax(0, 1fr);
      padding-inline: 0;
    }

    .dashboard-utility-link {
      align-items: start;
      padding: 0.85rem;
    }

    :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-strip {
      grid-template-columns: minmax(0, 1fr);
      padding: clamp(1rem, 5vw, 1.35rem);
    }

    :is(#page-dashboard, #page-account, #page-membership, #page-dashboard-progress, #page-dashboard-keys, #page-community, #admin-ops-dashboard, #admin-moderation-console) .dashboard-utility-link + .dashboard-utility-link {
      border-top: 1px solid color-mix(in srgb, var(--section-border) 72%, var(--highlight) 18%);
      border-left: 0;
    }

    #bookmark-list,
    .bookmark-grid,
    #section-bookmarks .pillar-grid {
      grid-template-columns:
        minmax(0, 1fr);

      margin-block: var(--space-md, 1.5rem);
      padding:
        var(--space-sm, 1rem)
        0;
    }

    .dashboard-bookmark-card,
    .pillar-card.bookmark-card {
      min-height: 0;
      padding: 1rem;
    }

    .tier-display.inline {
      align-items: flex-start;
    }

    .tier-display.inline .member-since {
      flex-basis: 100%;
      margin-left: 0;
    }

    .dashboard-progress-graph-card {
      padding-inline: 0;
    }

    .dashboard-progress-graph-stats {
      grid-template-columns:
        minmax(0, 1fr);
    }

    .dashboard-progress-graph-stat {
      border-left: 0;
      border-top: 1px solid var(--dashboard-rule);
    }

    .dashboard-progress-graph-canvas {
      min-height: 15rem;
    }

    .dashboard-progress-intro
    > :where(.section-heading, p),
    .dashboard-progress-panel
    > .section-heading {
      padding-inline: 0;
    }

    .progress-history-section-header {
      flex-direction: column;
      align-items: flex-start;
      padding-inline: 0;
    }

    .dashboard-keys-breakdown-bar {
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
    }

    .dashboard-keys-breakdown-stat:nth-child(3),
    .dashboard-keys-breakdown-stat:nth-child(5) {
      border-left: 0;
    }

    .dashboard-keys-breakdown-stat:nth-child(n + 3) {
      border-top: 1px solid var(--dashboard-rule);
    }

    .dashboard-keys-explainer-grid {
      grid-template-columns:
        minmax(0, 1fr);
    }

    .dashboard-keys-section-header,
    .dashboard-keys-section-header-filter {
      flex-direction: column;
      align-items: stretch;
    }

    .dashboard-keys-filter {
      width: 100%;
      min-width: 0;
    }

    .dashboard-account-sanction-actions {
      grid-template-columns:
        minmax(0, 1fr);
    }

    .dashboard-steelman-review-actions {
      align-items: stretch;
    }

    .dashboard-steelman-review-link {
      width: 100%;
    }

    .rep-timeline-graph-controls {
      justify-content: flex-start;
    }

    .rep-timeline-graph {
      min-height: 15rem;
    }
  }

  /* ===================================================
     Narrow mobile responsiveness
     =================================================== */

  @media (max-width: 420px) {
    .dashboard-utility-link {
      grid-template-columns:
        2rem
        minmax(0, 1fr);

      gap: 0.7rem;
    }

    .dashboard-utility-glyph {
      width: 2rem;
      height: 2rem;
      font-size: 1rem;
    }

    .dashboard-bookmark-card
    .bookmark-title,
    .pillar-card .pillar-title {
      font-size: 0.95rem;
    }

    .dashboard-keys-hero-total {
      font-size: clamp(3rem, 20vw, 4.5rem);
    }

    .dashboard-keys-breakdown-bar {
      grid-template-columns:
        minmax(0, 1fr);
    }

    .dashboard-keys-breakdown-stat,
    .dashboard-keys-breakdown-stat:nth-child(n) {
      border-left: 0;
      border-top: 1px solid var(--dashboard-rule);
    }

    .dashboard-keys-breakdown-stat:first-child {
      border-top: 0;
    }

    .dashboard-keys-pagination {
      align-items: stretch;
    }

  }

  /* ===================================================
     Reduced motion
     =================================================== */

  @media (prefers-reduced-motion: reduce) {
    .dashboard-utility-link,
    .dashboard-bookmark-card,
    .pillar-card.bookmark-card,
    .page-bookmark,
    .bookmark-tag,
    .remove-bookmark-icon,
    .bookmark-grid,
    .group-heading .toggle-icon,
    .dashboard-keys-explainer-body,
    .dashboard-keys-explainer > summary::after {
      transition: none;
    }

    .dashboard-bookmark-card.removing {
      animation: none;
    }

    .dashboard-utility-link:hover,
    .dashboard-bookmark-card:hover,
    .pillar-card.bookmark-card:hover {
      transform: none;
    }
  }
}

/* ===================================================
   Dashboard card-title typography overrides
   Batch 2B.1: relocated out of @layer layout so these
   dashboard-scoped card-title variants compete with the
   canonical .gnostic-card .card-title rule (card-core.css,
   @layer components) on selector specificity within the
   same layer, instead of on accidental cross-layer order.
   Values are unchanged from their previous layout-layer
   declarations; only the layer and file location moved.
   =================================================== */
@layer components {
  body.requires-auth:not(.admin)
  #section-bookmarks
  .bookmark-grid
  > .gnostic-card
  .card-title {
    color: var(--text-primary);
    font-family: var(--page-title, var(--font-display));
    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;
    overflow-wrap: anywhere;
  }

  .progress-history-card .card-title {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 1rem;
  }

  .dashboard-keys-contribution-card .card-title,
  .dashboard-keys-timeline-card .card-title,
  .dashboard-the-read-card .card-title,
  .dashboard-most-active-card .card-title,
  .dashboard-highest-engagement-card .card-title,
  .progress-history-card .card-title,
  .dashboard-keys-card .card-title,
  #dashboard-progress-card .card-title,
  #dashboard-continue-card .card-title {
    color: var(--text-primary);
    font-family: var(--page-title, var(--font-display));
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.12;
    text-transform: none;
  }

  body.requires-auth:not(.admin) .dashboard-highest-engagement-card .card-title {
    font-size: var(--type-card-title-size-large, clamp(1.4rem, 2.6vw, 2rem));
    line-height: var(--type-heading-line, 1.08);
  }

  body.requires-auth:not(.admin) #section-bookmarks .bookmark-grid > .dashboard-bookmark-card .card-title {
    font-size: clamp(1.2rem, 2vw, 1.65rem);
  }

  .gnostic-card.continue-card .card-title {
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  }

  body.requires-auth:not(.admin)
  #steelman-pending-list
  .dashboard-steelman-review-card
  .card-title {
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.12;
  }

  @media (max-width: 420px) {
    body.requires-auth:not(.admin)
    #section-bookmarks
    .bookmark-grid
    > .gnostic-card
    .card-title {
      font-size: clamp(1.2rem, 7vw, 1.55rem);
    }
  }

  /* Batch 2B.2: relocated dashboard tier-badge override, unchanged values.
     .dashboard-card__footer .tier-badge (elsewhere in @layer layout) is
     left untouched — its color/background/etc are already !important and
     do not depend on layer order. */
  .tier-display.inline .tier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 1.5rem;
    max-width: 100%;
    margin-left: 0.4rem;
    padding: 0.28rem 0.62rem;

    color:
      color-mix(
        in srgb,
        var(--text-accent) 88%,
        var(--text-primary) 12%
      ) !important;

    background:
      color-mix(
        in srgb,
        var(--bg-primary) 86%,
        var(--highlight) 14%
      );

    border: 1px solid var(--dashboard-border-soft);
    border-radius: 999px;

    font-family: var(--font-ui);
    font-size: var(--type-badge-size-tier, 0.68rem);
    font-weight: var(--type-weight-bold, 700);
    line-height: var(--type-badge-line, 1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ===================================================
     Dashboard .gnostic-card / .card-body overrides
     Batch 2B.3: relocated out of @layer layout, values unchanged.
     All win over the canonical card-core.css rules by selector
     specificity (most are ID-scoped) or, for the three 0-2-0 ties
     against card-core.css/founder.css, by source order — both of
     those files load earlier than this file in base.njk, so
     appending here (same position already used in 2B.1/2B.2)
     preserves today's winner without relying on layer order.
     =================================================== */
  body.requires-auth:not(.admin)
  #section-bookmarks
  .bookmark-grid
  > .gnostic-card {
    width: 100%;
    min-width: 0;
    max-width: none;

    --card-bg: var(--card-soft-bg);
    background: var(--card-bg);
    border-color: var(--dashboard-border-soft);
    box-shadow: none;
  }

  body.requires-auth:not(.admin)
  #section-bookmarks
  .bookmark-grid
  > .gnostic-card
  .card-body {
    display: flex;
    flex-direction: column;

    min-height: clamp(12rem, 20vw, 16rem);
    padding: clamp(1.1rem, 2.5vw, 1.7rem);

    text-align: left;
    border-top: 0;
  }

  body.requires-auth:not(.admin)
  #section-bookmarks
  .bookmark-grid
  > .gnostic-card
  .card-body::after {
    content: "Enter";

    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    margin-top: auto;
    padding-top: 0.8rem;

    color: var(--text-accent);
    border-top: 1px solid var(--dashboard-rule);

    font-size: 0.68rem;
    font-weight: var(--type-weight-bold, 700);
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    opacity: 0.82;
  }

  #dashboard-progress-history-latest .gnostic-card,
  .progress-history-grid .gnostic-card {
    width: 100%;
    max-width: none;
  }

  .dashboard-keys-timeline-card .card-body,
  .dashboard-keys-contribution-card .card-body,
  .dashboard-the-read-card .card-body,
  .dashboard-most-active-card .card-body,
  .dashboard-highest-engagement-card .card-body,
  .progress-history-card .card-body,
  .dashboard-keys-card .card-body,
  #dashboard-progress-card .card-body,
  #dashboard-continue-card .card-body {
    display: flex;
    flex-direction: column;

    min-height: 0;
    flex: 1 1 auto;
    padding: clamp(1rem, 2.2vw, 1.4rem);

    text-align: left;
  }

  .dashboard-bookmark-card .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: clamp(1rem, 2.2vw, 1.4rem);
  }

  #dashboard-resume-section
  .gnostic-card::after {
    display: none;
  }

  #dashboard-resume-section
  .gnostic-card:hover {
    transform: translateY(-2px);
  }

  @media (prefers-reduced-motion: reduce) {
    #dashboard-resume-section
    .gnostic-card:hover {
      transform: none;
    }
  }

  .dashboard-steelman-review-card .card-body {
    display: flex;
    flex-direction: column;

    min-height: 0;
    padding: clamp(1rem, 2.2vw, 1.4rem);

    text-align: left;
  }

  body.requires-auth:not(.admin)
  #steelman-pending-list
  .dashboard-steelman-review-card
  .card-body::after {
    display: none;
  }

  /* ===================================================
     Batch 2C.1: relocated dashboard-scoped overrides,
     values unchanged, out of @layer layout.
     =================================================== */

  body.requires-auth:not(.admin)
  #section-bookmarks
  .bookmark-grid
  > .gnostic-card
  .card-desc {
    max-width: 62ch;
    margin:
      0.7rem
      0
      0;

    color: var(--text-secondary);
    line-height: var(--type-copy-line, 1.6);
  }

  #page-dashboard
  :is(
    #section-signals .gnostic-card,
    #dashboard-the-read .dashboard-the-read-card,
    #dashboard-most-active .dashboard-most-active-card,
    #dashboard-top-contributions .dashboard-keys-contribution-card,
    #section-bookmarks .dashboard-bookmark-card,
    #steelman-pending-list > .dashboard-steelman-review-card
  )
  .card-desc {
    max-width: 62ch;
    margin:
      0.7rem
      0
      0;

    color: var(--text-secondary);
    font-size: var(--type-card-desc-size-excerpt, 0.8em);
    line-height: var(--type-card-desc-line-editorial, 1.65);
    text-align: left;
  }

  #page-dashboard
  #section-signals
  .gnostic-card
  .card-body
  > p.small.muted:not([id*="meta"]):not(#keys-next) {
    max-width: 62ch;
    margin:
      0.7rem
      0
      0;

    color: var(--text-secondary);
    font-size: var(--type-card-desc-size-excerpt, 0.8em);
    line-height: var(--type-card-desc-line-editorial, 1.65);
    text-align: left;
  }

  .gnostic-card.continue-card .card-glyph {
    font-size: 1.5rem;
  }

  /* .page-bookmark/.bookmark-tag: dashboard's plain icon-toggle treatment.
     button-styles.css's .bookmark-tag (shared with .mark-read-btn) is a
     visually different round bordered-button component used inside
     .page-actions-floating; both selectors are bare/unscoped and tie at
     0-1-0 specificity, so this block is deliberately placed after
     button-styles.css in base.njk's load order (this file already loads
     at that position for the card-title/card-body/tier-badge relocations
     in Batches 2B.1-2B.3) to keep dashboard's treatment winning by source
     order within the shared layer, exactly as it already does today via
     layer order. No other components file defines .page-bookmark or
     .bookmark-tag, so this is the only tie to preserve. */
  .page-bookmark,
  .bookmark-tag {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0.25rem;

    color: var(--text-accent);
    font-size: 1.2rem;
    line-height: 1;

    transition:
      color 0.2s ease,
      transform 0.2s ease;
  }

  .page-bookmark:hover,
  .bookmark-tag:hover {
    color: var(--highlight);
    transform: scale(1.08);
  }

  .page-bookmark.bookmarked,
  .bookmark-tag.bookmarked {
    color: var(--color-success, #38a169);
    transform: scale(1.1);
  }

  .bookmark-tag.page-bookmark {
    position: static;
    font-size: 1.25rem;
  }

  /* Dashboard account status and local section navigation. */
  .dashboard-section-nav {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    gap: 0;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.5rem;
    padding: 0;
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.12));
    background: transparent;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .dashboard-section-nav::-webkit-scrollbar {
    display: none;
  }

  .dashboard-section-nav-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.48rem 0.85rem 0.26rem;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary, rgba(255,255,255,0.82));
    font-family: var(--font-display);
    font-size: var(--type-eyebrow-size-emphasis, 0.78rem);
    font-weight: var(--type-weight-semibold, 600);
    line-height: var(--type-ui-control-line, 1.1);
    letter-spacing: var(--type-tracking-badge, 0.05em);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
      color 140ms ease,
      border-color 140ms ease,
      background-color 140ms ease;
  }

  .dashboard-section-nav-link:hover {
    border-bottom-color: var(--accent, #d4af37);
    color: var(--accent, #d4af37);
  }

  .dashboard-section-nav-link:focus-visible {
    border-bottom-color: var(--accent, #d4af37);
    color: var(--accent, #d4af37);
    outline: none;
    box-shadow:
      inset 0 0 0 2px
      color-mix(
        in srgb,
        var(--accent, #d4af37) 75%,
        transparent
      );
  }

  .dashboard-account-sanction {
    border-color: var(--status-danger, var(--section-border));
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--surface-raised, var(--bg-elevated)) 88%, var(--status-danger, #a94442) 12%),
        var(--surface-raised, var(--bg-elevated))
      );
  }

  .dashboard-account-slot[data-account-status="pending"] [data-founder-offer],
  .dashboard-account-slot[data-account-status="suspended"] [data-founder-offer],
  .dashboard-account-slot[data-account-status="banned"] [data-founder-offer] {
    display: none !important;
  }

  .dashboard-account-sanction-body {
    gap: 1rem;
  }

  .dashboard-account-sanction-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 0.85rem;
    margin-bottom: 0.25rem;
  }

  .dashboard-account-sanction-meta span {
    display: inline-flex;
    align-items: center;
    line-height: var(--type-eyebrow-line, 1.35);
  }

  /* Community administration: entitlement editing and topic moderation. */
  .admin-entitlements-modal__card,
  .entitlement-card {
    border: 1px solid var(--section-border);
    border-radius: var(--border-radius-base);
    background: var(--card-soft-bg);
  }

  .admin-entitlements-modal__card,
  .entitlement-card {
    padding: 1rem;
  }

  .admin-entitlements-row,
  .admin-entitlements-stack {
    display: grid;
    gap: 0.75rem;
  }

  .admin-entitlements-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .admin-entitlements-row--actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entitlement-card h3,
  .entitlement-card p {
    margin-top: 0;
  }

  .admin-entitlements-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0,0,0,0.55);
  }

  .admin-entitlements-modal[hidden] {
    display: none;
  }

  .admin-entitlements-modal__card {
    width: min(32rem, 100%);
  }

  .admin-entitlements-form .tgk-input,
  .admin-entitlements-modal .tgk-input,
  .admin-entitlements-modal .tgk-select {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-soft, rgba(255,255,255,0.14));
    border-radius: 0.8rem;
    background: var(--input-bg, var(--bg-primary));
    color: var(--text-primary, inherit);
  }

  @media (max-width: 720px) {
    .admin-entitlements-row,
    .admin-entitlements-row--actions {
      grid-template-columns: 1fr;
    }
  }

  .admin-topic-table {
    width: 100%;
    border-collapse: collapse;
  }

  .admin-topic-table th,
  .admin-topic-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.12));
    text-align: left;
    vertical-align: top;
  }

  .admin-topic-table th {
    font-size: 0.82rem;
    letter-spacing: var(--type-tracking-heading, 0.04em);
    text-transform: uppercase;
  }

  /* Admin Centre card surfaces and overflow containment. */
  :is(
    #admin-ops-dashboard,
    #admin-moderation-console,
    #reports-list,
    .forge-review-surface,
    #vault-rights-app,
    .admin-wrap
  )
  :where(
    .gnostic-card,
    .report-card,
    .admin-card,
    .admin-topic-card,
    .admin-user-post,
    .admin-user-history-block,
    .admin-user-action-form,
    .admin-user-search-wrap,
    .admin-ops-table tr,
    .report-empty-state,
    .entitlement-card,
    .admin-entitlements-modal__card
  ) {
    --admin-card-radius: 8px;
    --admin-card-border: color-mix(in srgb, var(--section-border) 78%, var(--highlight) 22%);
    --admin-card-shadow: 0 18px 40px color-mix(in srgb, var(--bg-primary) 84%, transparent);
    --admin-card-surface: color-mix(in srgb, var(--card-soft-bg) 42%, transparent);

    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    color: var(--text-primary);
    background: var(--admin-card-surface);
    border: 1px solid var(--admin-card-border);
    border-radius: var(--admin-card-radius);
    box-shadow: var(--admin-card-shadow);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  :is(
    #admin-ops-dashboard,
    #admin-moderation-console,
    .forge-review-surface
  )
  .gnostic-card:not(:has(.card-media)) {
    --card-radius: 8px;
    --card-bg: var(--admin-card-surface);
    background: var(--card-bg);
    border-color: var(--admin-card-border);
    box-shadow: var(--admin-card-shadow);
  }

  :is(
    #admin-ops-dashboard,
    #admin-moderation-console,
    #reports-list,
    .forge-review-surface,
    #vault-rights-app,
    .admin-wrap
  )
  :where(
    .gnostic-card *,
    .report-card *,
    .admin-card *,
    .admin-topic-card *,
    .admin-user-post *,
    .admin-user-history-block *,
    .admin-user-action-form *,
    .admin-user-search-wrap *,
    .report-empty-state *
  ) {
    min-width: 0;
    max-width: 100%;
  }

  :is(
    #admin-ops-dashboard,
    #admin-moderation-console,
    .forge-review-surface
  )
  .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;
  }

  :is(
    #admin-ops-dashboard,
    #admin-moderation-console,
    .forge-review-surface
  )
  .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;
    overflow-wrap: break-word;
  }

  :is(
    #admin-ops-dashboard,
    #admin-moderation-console,
    .forge-review-surface
  )
  .gnostic-card:not(:has(.card-media)) .card-desc,
  :is(
    #admin-ops-dashboard,
    #admin-moderation-console,
    .forge-review-surface
  )
  .gnostic-card:not(:has(.card-media)) .small.muted {
    max-width: 62ch;
    margin: 0.7rem 0 0;
    color: var(--text-secondary);
    line-height: var(--type-card-desc-line-editorial, 1.65);
  }

  :is(
    #admin-ops-dashboard,
    #admin-moderation-console,
    .forge-review-surface
  )
  .gnostic-card:not(:has(.card-media)) .card-body::after {
    content: none;
    display: none;
  }

  :is(
    #reports-list,
    #admin-ops-dashboard,
    .forge-review-surface
  )
  :where(.report-card, .admin-user-post, .admin-user-history-block, .admin-user-action-form, .report-empty-state) {
    --admin-card-shadow: 0 12px 28px color-mix(in srgb, var(--bg-primary) 88%, transparent);
  }

  :is(
    #admin-ops-dashboard,
    #reports-list,
    .forge-review-surface,
    #vault-rights-app
  )
  :where(pre, code, .mono, .admin-ops-card-copy, .card-desc, .small, td, th) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(#admin-ops-dashboard, #reports-list, .forge-review-surface, #vault-rights-app) :where(img, video, iframe) {
    max-width: 100%;
    height: auto;
  }

  .flag-queue-header {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
  }

  .flag-queue-header :where(h2, p) {
    margin-bottom: 0;
  }

  #reports-list.portal-grid.dashboard-portal-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: start;
  }

  .report-card,
  .report-empty-state {
    display: grid;
    gap: 0.85rem;
    width: 100%;
    padding: clamp(0.95rem, 2.6vw, 1.2rem);
  }

  .report-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
  }

  .report-meta-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
  }

  .report-body {
    display: grid;
    gap: 0.45rem;
  }

  .report-body p,
  .report-footer {
    margin: 0;
  }

  .report-body p {
    display: grid;
    gap: 0.15rem;
    color: var(--text-secondary);
    line-height: var(--type-copy-line, 1.6);
  }

  .report-body strong,
  .report-meta strong {
    color: var(--text-primary);
  }

  .report-triage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dashboard-rule);
  }

  .report-triage .btn {
    flex: 1 1 9rem;
    min-width: 0;
    white-space: normal;
  }

  .report-empty-state {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .report-empty-state p {
    margin: 0;
  }

  @media (max-width: 430px) {
    #reports-list.portal-grid.dashboard-portal-grid {
      padding-inline: 0;
    }

    .flag-queue-header,
    .report-meta,
    .report-triage {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .report-triage .btn {
      width: 100%;
    }
  }

  /* Dashboard glass activity cards: final cascade guard. */
  #page-dashboard #section-signals .gnostic-card,
  #page-dashboard #dashboard-top-contributions .dashboard-keys-contribution-card,
  #page-dashboard #dashboard-the-read .gnostic-card,
  #page-dashboard #dashboard-most-active .gnostic-card,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card,
  #page-dashboard-keys .dashboard-keys-timeline-card,
  #page-dashboard-keys .dashboard-keys-contribution-card,
  #page-dashboard-progress .progress-history-card,
  #page-dashboard-progress .dashboard-progress-graph-card {
    --card-bg: transparent;
    --card-soft-backdrop: blur(2px);
    background: transparent !important;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
    border:
      2px
      solid
      color-mix(
        in srgb,
        var(--section-border) 78%,
        var(--highlight) 22%
      ) !important;
    box-shadow: none !important;
  }

  body.requires-auth:not(.admin) #page-dashboard #section-bookmarks .dashboard-bookmark-card,
  body.requires-auth:not(.admin) #page-dashboard #section-bookmarks .bookmark-grid > .gnostic-card,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card,
  #page-dashboard #section-bookmarks .bookmark-grid > .gnostic-card {
    --card-bg: transparent;
    --card-soft-backdrop: blur(2px);
    background: transparent !important;
    backdrop-filter: var(--card-soft-backdrop);
    -webkit-backdrop-filter: var(--card-soft-backdrop);
    border:
      2px
      solid
      color-mix(
        in srgb,
        var(--section-border) 78%,
        var(--highlight) 22%
      ) !important;
    box-shadow: none !important;
  }

  #page-dashboard #section-signals .gnostic-card::before,
  #page-dashboard #section-signals .gnostic-card::after,
  #page-dashboard #dashboard-top-contributions .dashboard-keys-contribution-card::before,
  #page-dashboard #dashboard-top-contributions .dashboard-keys-contribution-card::after,
  #page-dashboard #dashboard-the-read .gnostic-card::before,
  #page-dashboard #dashboard-the-read .gnostic-card::after,
  #page-dashboard #dashboard-most-active .gnostic-card::before,
  #page-dashboard #dashboard-most-active .gnostic-card::after,
  body.requires-auth:not(.admin) #page-dashboard #section-bookmarks .dashboard-bookmark-card::before,
  body.requires-auth:not(.admin) #page-dashboard #section-bookmarks .dashboard-bookmark-card::after,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card::before,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card::after,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card::before,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card::after,
  #page-dashboard-keys .dashboard-keys-timeline-card::before,
  #page-dashboard-keys .dashboard-keys-timeline-card::after,
  #page-dashboard-keys .dashboard-keys-contribution-card::before,
  #page-dashboard-keys .dashboard-keys-contribution-card::after,
  #page-dashboard-progress .progress-history-card::before,
  #page-dashboard-progress .progress-history-card::after,
  #page-dashboard-progress .dashboard-progress-graph-card::before,
  #page-dashboard-progress .dashboard-progress-graph-card::after {
    content: none !important;
    display: none !important;
  }

  #page-dashboard #section-signals .gnostic-card .card-link,
  #page-dashboard #section-signals .gnostic-card .card-body,
  #page-dashboard #dashboard-top-contributions .dashboard-keys-contribution-card .card-link,
  #page-dashboard #dashboard-top-contributions .dashboard-keys-contribution-card .card-body,
  #page-dashboard #dashboard-the-read .gnostic-card .card-link,
  #page-dashboard #dashboard-the-read .gnostic-card .card-body,
  #page-dashboard #dashboard-most-active .gnostic-card .card-link,
  #page-dashboard #dashboard-most-active .gnostic-card .card-body,
  body.requires-auth:not(.admin) #page-dashboard #section-bookmarks .dashboard-bookmark-card .card-link,
  body.requires-auth:not(.admin) #page-dashboard #section-bookmarks .dashboard-bookmark-card .card-body,
  body.requires-auth:not(.admin) #page-dashboard #section-bookmarks .dashboard-bookmark-card .card-media,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card .card-link,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card .card-body,
  #page-dashboard #section-bookmarks .dashboard-bookmark-card .card-media,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card .card-link,
  #page-dashboard #steelman-pending-list > .dashboard-steelman-review-card .card-body,
  #page-dashboard-keys .dashboard-keys-timeline-card .card-link,
  #page-dashboard-keys .dashboard-keys-timeline-card .card-body,
  #page-dashboard-keys .dashboard-keys-contribution-card .card-link,
  #page-dashboard-keys .dashboard-keys-contribution-card .card-body,
  #page-dashboard-progress .progress-history-card .card-link,
  #page-dashboard-progress .progress-history-card .card-body {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}