/**/
/* THIS FILE AUTOGENERATED FROM CSS in ./web/css/ */ 
/**/
/* Page shell visuals. Container geometry is grouped at the bottom of this file. */

body.redsquare-body {
  /*
   * Quiet workspace canvas — keep Saito warmth, drop the branded radial “explosion”.
   * Only --saito-canvas-wash is overridden; --saito-background stays the warm base.
   */
  --saito-canvas-wash:
    radial-gradient(
      90vw 42vw at 50% -8%,
      color-mix(in srgb, var(--saito-primary) 5%, transparent),
      transparent 68%
    ),
    var(--saito-background);

  /*
   * Typography — Twitter/X hierarchy on the shared Saito root (12px).
   * Body/author inherit 1.25rem (15px). Meta / titles are the only scale steps.
   * Colors stay on Saito theme tokens.
   */
  font-size: 1.25rem;
}

/* Undo Saito `p { font-size: medium }` so prose inherits the RS body step. */
body.redsquare-body p {
  font-size: inherit;
}

/* Page / modal titles — ~20px */
body.redsquare-body .manager > .header .title,
body.redsquare-body .settings > .header .title {
  font-size: 1.67rem;
}

/*
 * Desktop hierarchy (first pass) — sizes only; cuts stay on components.
 * Steps: page/nav/section 1.67rem (~20px) → profile name 1.4rem → body 1.25rem → meta 1.083rem.
 * Tweet author/body/meta unchanged. Mobile keeps the inherited body band.
 */
@media (min-width: 601px) {
  body.redsquare-body .menu .label {
    font-size: 1.67rem;
  }

  body.redsquare-body .redsquare-profile .name {
    font-size: 1.45rem;
  }
}

/* Settings section labels — body size, medium weight (weight from component). */
body.redsquare-body .settings .section > .title {
  font-size: inherit;
}

/* Metadata — ~13px (timestamps, handles, counts, keys, legal, counters) */
body.redsquare-body .tweet .time,
body.redsquare-body .tweet .sep,
body.redsquare-body .tweet .handle,
body.redsquare-body .tweet .controls .count,
body.redsquare-body .notification .time,
body.redsquare-body .redsquare-profile .public-key,
body.redsquare-body .sidebar .footer,
body.redsquare-body .sidebar .suggestion .handle,
body.redsquare-body .compose .char-count,
body.redsquare-body .compose .header.compose .secondary {
  font-size: 1.083rem;
}

/* Quoted / embedded tweet body — one step below feed body (~14px) */
body.redsquare-body .tweet.embedded .body {
  font-size: 1.167rem;
}

/* Link previews — must not dominate the tweet (Saito defaults are larger) */
body.redsquare-body .saito-link-preview-title {
  font-size: 1.25rem;
}

body.redsquare-body .saito-link-preview-info,
body.redsquare-body .saito-link-preview-display-url {
  font-size: 1.083rem;
}

/* Compose field — X uses a larger writing surface than feed body (~20px) */
body.redsquare-body .compose .input {
  font-size: 1.67rem;
}

/*
 * Container sizing
 *
 * Desktop: full left rail + feed + right rail.
 * 1200px: compact left rail.
 * 820px: remove the right rail.
 * 600px: feed-only mobile layout above the bottom navigation.
 */
body.redsquare-body {
  --saito-width: 1200px;
}

@media (min-width: 769px) {
  body.redsquare-body .saito-overlay.redsquare-compose-overlay-host {
    top: 25%;
  }
}

body.redsquare-body #saito-container {
  grid-template-columns: 265px 600px 300px;
  padding: 0 max(10px, calc((100vw - var(--saito-width)) / 2));
  overflow: hidden;
}

body.redsquare-body #saito-container > * {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}

body.redsquare-body #saito-container > .main {
  justify-self: start;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Keep the shared publish control pinned to the feed when its rail action is unavailable. */
body.redsquare-body .saito-floating-menu .saito-floating-plus-btn {
  display: none;
}

body.redsquare-body .saito-floating-menu.redsquare-post-offscreen {
  right: calc(var(--redsquare-feed-right-inset, 0px) + 1rem);
  bottom: calc(var(--redsquare-feed-bottom-inset, 0px) + 1rem);
  z-index: 45;
}

body.redsquare-body .saito-floating-menu.redsquare-post-offscreen .saito-floating-plus-btn {
  display: flex;
}

@media (max-width: 1200px) {
  body.redsquare-body {
    --saito-width: 1000px;
  }

  body.redsquare-body #saito-container {
    grid-template-columns: 80px minmax(0, 1fr) 300px;
  }
}

@media (max-width: 820px) {
  body.redsquare-body {
    --saito-width: 700px;
  }

  body.redsquare-body #saito-container {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  body.redsquare-body {
    --redsquare-mobile-nav-height: 5.2rem;
  }

  body.redsquare-body #saito-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 0;
    padding: 0;
    padding-bottom: calc(var(--redsquare-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  body.redsquare-body #saito-container > .main {
    width: 100%;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    justify-self: stretch;
  }

  body.redsquare-body #saito-container > .main > [data-mobile-view][hidden] {
    display: none !important;
  }

  body.redsquare-body[data-redsquare-mobile-view='settings'] .saito-floating-menu {
    display: none;
  }

  /* Float above the mobile nav with the same inset used at the right edge. */
  body.redsquare-body .saito-floating-menu {
    bottom: calc(var(--redsquare-mobile-nav-height) + 1.5rem + env(safe-area-inset-bottom, 0px));
    right: max(1.5rem, env(safe-area-inset-right, 0px));
    z-index: 45;
  }
}
/* Namespace: .manager — feed chrome only (not tweet content)
 *
 * Column ownership:
 *   .manager  → flex column shell (fills .main)
 *   .header   → pinned chrome (never scrolls)
 *   .body     → sole scrollport for feed panels
 */

.manager {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.manager > .header {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--saito-space-md);
  flex: 0 0 auto;
  min-height: 5.2rem;
  padding: 0.8rem var(--saito-space-md);
  background: var(--saito-card-wash);
  border-bottom: 1px solid var(--saito-border);
}

/*
 * Desktop Option A — page title anchors the feed chrome.
 * Content-sized height (no empty min-height), title-weighted.
 */
@media (min-width: 601px) {
  .manager > .header {
    min-height: 0;
    padding: 0.7rem var(--saito-space-md) 0.55rem;
  }
}

/* Header is omitted from the DOM when the view does not require chrome. */

.manager > .body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.manager > .header .start {
  display: flex;
  align-items: center;
  gap: var(--saito-space-md);
  min-width: 0;
  flex: 1 1 auto;
}

/* Shared .saito-button-square owns appearance; keep [hidden] from being overridden. */
.manager > .header .back[hidden] {
  display: none;
}

.manager > .header .title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Visuelt Medium — page-title for conversation / profile navigation chrome */
  font-family: var(--saito-font-heavy);
  line-height: 1.2;
}

.manager > .header .actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--saito-space-sm);
}

.manager > .header .new-post {
  margin: 0;
}

.manager .new-posts-banner {
  display: block;
  width: 100%;
  padding: var(--saito-space-sm) var(--saito-space-lg);
  border: none;
  background: var(--saito-card-wash);
  color: var(--saito-foreground);
  text-align: center;
  cursor: pointer;
}

.manager .thread-context {
  padding: var(--saito-space-md) var(--saito-space-lg);
  color: var(--saito-primary);
  cursor: pointer;
}

.manager .feed-status {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.manager .feed-status .loader,
.manager .feed-status .message {
  display: none;
}

.manager .feed-status .message {
  max-width: 24rem;
  margin: 0;
  text-align: center;
  color: var(--saito-muted-foreground);
}

.manager .feed-status[data-status='content'] {
  min-height: 2.4rem;
  padding: var(--saito-space-md) var(--saito-space-lg);
}

.manager .feed-status[data-status='loading'],
.manager .feed-status[data-status='empty'],
.manager .feed-status[data-status='end'] {
  padding: 7rem var(--saito-space-lg) 5rem;
}

.manager .feed-status[data-status='loading'] .loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
}

.manager .feed-status[data-status='empty'] .message,
.manager .feed-status[data-status='end'] .message {
  display: block;
}

@media (max-width: 600px) {
  .manager > .header {
    padding: 0.8rem var(--saito-space-sm);
  }

  /* Floating + is the only compose affordance on mobile */
  .manager > .header .new-post {
    display: none;
  }

  .manager .thread-context,
  .manager .new-posts-banner,
  .manager .feed-status[data-status='content'],
  .manager .feed-status[data-status='loading'],
  .manager .feed-status[data-status='empty'],
  .manager .feed-status[data-status='end'] {
    padding-left: var(--saito-space-sm);
    padding-right: var(--saito-space-sm);
  }
}
/* Namespace: .redsquare-create — publishing action dropdown. */

.redsquare-create {
  min-width: 0;
}

.redsquare-create .actions {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xs);
  padding: var(--saito-space-xs);
}

.redsquare-create .primary-action,
.redsquare-create .options {
  display: flex;
  width: 100%;
}

.redsquare-create .primary-action {
  gap: 0;
}

.redsquare-create .options {
  flex-direction: column;
  gap: var(--saito-space-xs);
}

.redsquare-create .options[hidden] {
  display: none;
}

.redsquare-create .action {
  justify-content: flex-start;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.redsquare-create .primary-action .action {
  flex: 1 1 auto;
  border-radius: var(--saito-radius) 0 0 var(--saito-radius);
}

.redsquare-create .primary-action .action:only-child {
  border-radius: var(--saito-radius);
}

.redsquare-create .toggle {
  flex: 0 0 4rem;
  margin: 0;
  min-width: 0;
  padding: 0;
  border-left: 0;
  border-radius: 0 var(--saito-radius) var(--saito-radius) 0;
}

.redsquare-create .toggle i {
  margin: 0;
}

.redsquare-create .logo {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  margin-right: var(--saito-space-xs);
  background: currentcolor;
  -webkit-mask: var(--redsquare-create-logo) center / contain no-repeat;
  mask: var(--redsquare-create-logo) center / contain no-repeat;
}
/* Column shells — scrollports and rail insets. */

.redsquare-mobile-view {
  display: none;
}

.sidebar-left,
.sidebar-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /*
   * Shared top baseline with the feed: `.tweet` uses padding-top
   * `--saito-space-md`, which is the visible gap above the first tweet.
   * Side rails use the same column inset so Home / tweet / Profile align.
   */
  padding-top: var(--saito-space-md);
  padding-bottom: var(--saito-space-sm);
}

.sidebar-left {
  gap: var(--saito-space-md);
  padding-inline: var(--saito-space-md) var(--saito-space-sm);
}

.sidebar-right {
  /* Same rhythm as `.sidebar` module stack (Profile → Leaderboard → …). */
  gap: var(--saito-space-lg);
  padding-inline: var(--saito-space-sm) var(--saito-space-md);
}

.sidebar-right > .redsquare-profile,
.sidebar-right > .redsquare-create,
.sidebar-right > .sidebar {
  flex-shrink: 0;
}

/*
 * Quieter section titles — same treatment for right-rail panels and left Chat.
 * Casing from markup (not uppercase). Zero margin for h5 defaults in .sidebar.
 */
body.redsquare-body .sidebar-left .saito-sidebar-header,
body.redsquare-body .sidebar .saito-sidebar-header,
body.redsquare-body .sidebar .sidebar-header {
  margin: 0;
  margin-block: 0;
  min-height: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: normal;
  line-height: 1.3;
  text-transform: none;
  color: inherit;
}

/* Desktop: section titles one step above body (Chats / Leaderboard / Who to Follow) */
@media (min-width: 601px) {
  body.redsquare-body .sidebar-left .saito-sidebar-header,
  body.redsquare-body .sidebar .saito-sidebar-header,
  body.redsquare-body .sidebar .sidebar-header {
    font-size: 1.67rem;
    font-family: var(--saito-font-medium);
  }
}

@media (max-width: 1200px) {
  .sidebar-left {
    padding-inline: var(--saito-space-xs);
  }
}

@media (max-width: 820px) {
  .sidebar-right {
    display: none;
  }
}

@media (max-width: 600px) {
  /* Out of grid flow — only `.main` should size the mobile column. */
  .sidebar-left {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
    padding: 0;
    border: none;
    background: transparent;
  }

  .sidebar-left > .chat-manager {
    display: none;
  }

  .redsquare-mobile-view:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
}
/* Namespace: .notification — feed list rhythm inherited from tweets */

.notification {
  cursor: pointer;
  border-bottom: 1px solid var(--saito-border);
}

.notification .meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--saito-space-sm);
  align-items: start;
  padding: var(--saito-space-md) var(--saito-space-lg) var(--saito-space-xs);
}

.notification .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--saito-muted-foreground);
}

.notification .summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  line-height: 1.35;
}

.notification .actor {
  font-family: var(--saito-font-medium);
}

.notification .text {
  color: var(--saito-muted-foreground);
}

.notification .time {
  color: var(--saito-muted-foreground);
}

.notification .slot {
  padding: 0 var(--saito-space-lg) var(--saito-space-md);
}

/* Nested tweet is content, not a second chrome panel */
.notification .slot > .tweet {
  padding: var(--saito-space-sm) 0 0;
  border-bottom: none;
  cursor: inherit;
}

@media (max-width: 600px) {
  .notification .meta,
  .notification .slot {
    padding-left: var(--saito-space-sm);
    padding-right: var(--saito-space-sm);
  }
}
/* Namespace: .sidebar — stack + Who to Follow / legal footer.
 * Right-rail section rhythm: title → panel → next section (gap --saito-space-lg).
 */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-lg);
  min-width: 0;
}

.sidebar > .redsquare-sidebar:empty {
  display: none;
}

/* Limbo tightens Spaces for the RS slot — neutralize extra vertical margins. */
.sidebar .redsquare-sidebar .spaces-list .saito-profile-header-row {
  margin-bottom: 0;
}

.sidebar .redsquare-sidebar .spaces-list .saito-profile-header-row .saito-identicon-box {
  margin-top: 0;
}

.sidebar .suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-sm);
  min-width: 0;
}

.sidebar .suggestion-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}

.sidebar .suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--saito-space-sm);
  align-items: center;
  padding-block: var(--saito-space-xs);
}

.sidebar .suggestion .avatar {
  grid-row: 1 / -1;
  object-fit: cover;
}

.sidebar .suggestion .name {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-family: var(--saito-font-medium);
}

.sidebar .suggestion .handle {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--saito-muted-foreground);
}

.sidebar .suggestion .follow {
  grid-column: 3;
  grid-row: 1 / -1;
  margin: 0;
}

.sidebar .more {
  align-self: flex-start;
  color: var(--saito-muted-foreground);
}

.sidebar .footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--saito-space-xs) var(--saito-space-sm);
  color: var(--saito-muted-foreground);
}

.sidebar .footer a {
  color: inherit;
}
/* Namespace: .tweet — internal layout + hierarchy */

.tweet {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--saito-space-md);
  align-items: start;
  padding: var(--saito-space-md);
  border-bottom: 1px solid var(--saito-border);
  cursor: pointer;
}

/* Connector continues into the next tweet — no divider between them. */
.tweet.chain-next {
  border-bottom: none;
}

.tweet.slot {
  padding-top: 0;
  cursor: inherit;
}

.tweet .avatar {
  align-self: start;
  z-index: 1;
}

/* Thread connector — centered on the avatar column */
.tweet .chain {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--saito-space-md);
  width: 3.5rem;
  pointer-events: none;
}

.tweet .chain::before,
.tweet .chain::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--saito-border);
  opacity: 0;
}

.tweet.chain-prev .chain::before {
  top: 0;
  bottom: calc(100% - var(--saito-space-md));
  opacity: 1;
}

.tweet.chain-next .chain::after {
  top: calc(var(--saito-space-md) + 3.5rem);
  bottom: 0;
  opacity: 1;
}

.tweet .content {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* Identity — compact is one scan line; expanded is a two-row identity block */
.tweet .header {
  display: flex;
  align-items: baseline;
  min-width: 0;
  width: 100%;
  min-height: 0;
  padding: 0;
  line-height: 1.2;
  overflow: hidden;
}

.tweet .header.compact {
  gap: var(--saito-space-xs);
}

/*
 * Detail identity owns its own grid:
 *   [ Username .............. Timestamp ]
 *   [ Public key                        ]
 * Time is a grid cell on row 1 — not a flex sibling that can wrap under content.
 */
.tweet .header.expanded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--saito-space-sm);
  row-gap: 0;
  align-items: baseline;
}

.tweet .header.compose {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--saito-space-xs);
}

.tweet .primary {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--saito-font-medium);
}

.tweet .header.expanded .primary {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.tweet .handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--saito-muted-foreground);
}

.tweet .header.expanded .handle {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--saito-font);
  font-weight: normal;
  line-height: 1.2;
}

.tweet .header.compose .primary,
.tweet .header.compose .secondary {
  flex: none;
  max-width: 100%;
}

.tweet .header.compose .secondary {
  color: var(--saito-muted-foreground);
}

.tweet .sep,
.tweet .time {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--saito-muted-foreground);
}

.tweet .header.expanded .time {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

/* Body starts immediately under the identity block */
.tweet .header + .body {
  margin-top: var(--saito-space-xs);
}

.tweet .body {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.45;
}

.tweet .body + .gallery,
.tweet .body + .embed,
.tweet .gallery + .embed {
  margin-top: var(--saito-space-sm);
}

.tweet .footer {
  margin-top: var(--saito-space-sm);
}

/* Defensive body typography — Tweet owns rendering context; semantics stay, size abuse does not */
.tweet .body :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: inherit;
  font-family: var(--saito-font-medium);
  font-weight: normal;
  line-height: inherit;
}

.tweet .body :is(strong, b) {
  font-family: var(--saito-font-medium);
  font-weight: normal;
}

.tweet .body :is(p, blockquote, pre) {
  margin: 0;
}

.tweet .body blockquote {
  padding-left: var(--saito-space-sm);
  border-left: 2px solid var(--saito-border);
  color: var(--saito-muted-foreground);
}

.tweet .body :is(ul, ol) {
  margin: 0;
  padding-left: 1.4em;
}

.tweet .body :is(pre, code) {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.tweet .body pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}

.tweet .body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  line-height: inherit;
}

.tweet .body :is(th, td) {
  padding: var(--saito-space-xs) var(--saito-space-sm);
  border-bottom: 1px solid var(--saito-border);
  text-align: left;
  vertical-align: top;
}

.tweet .body th {
  font-family: var(--saito-font-medium);
  font-weight: normal;
}

.tweet .body a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.tweet .body img {
  max-width: 100%;
  height: auto;
}

.tweet .controls {
  display: flex;
  justify-content: space-between;
  user-select: none;
}

.tweet .controls .tool {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--saito-space-xs) 0;
  cursor: pointer;
  color: var(--saito-muted-foreground);
}

.tweet .controls .count {
  margin-right: var(--saito-space-xs);
}

.tweet .show-more {
  display: none;
}

.tweet.focused {
  cursor: default;
}

.tweet .gallery {
  min-width: 0;
}

.tweet .grid {
  display: grid;
  gap: 0.2rem;
  overflow: hidden;
}

.tweet .item {
  min-width: 0;
  overflow: hidden;
}

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

.tweet .gallery.count-1 .grid {
  display: block;
}

.tweet .gallery.count-1 .item {
  aspect-ratio: 16 / 9;
  max-height: 30rem;
}

.tweet .gallery.count-2 .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 24rem;
}

.tweet .gallery.count-3 .grid,
.tweet .gallery.count-4 .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  max-height: 26rem;
}

.tweet .gallery.count-3 .item:first-child {
  grid-row: 1 / 3;
}

.tweet.focused .gallery.count-1 .item {
  max-height: 36rem;
}

.tweet.focused .gallery.count-2 .grid,
.tweet.focused .gallery.count-3 .grid,
.tweet.focused .gallery.count-4 .grid {
  max-height: 32rem;
}

.tweet .embed {
  min-width: 0;
}

.tweet .embed > .tweet.embedded {
  column-gap: var(--saito-space-sm);
  padding: var(--saito-space-md);
  border: 1px solid var(--saito-border);
  border-radius: var(--saito-radius);
}

.tweet.embedded {
  border-bottom: none;
}

.tweet.embedded .chain,
.tweet.embedded .footer,
.tweet.embedded .embed {
  display: none;
}

.tweet.embedded .body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.tweet.embedded .gallery.count-1 .item {
  max-height: 18rem;
}

.tweet.embedded .gallery.count-2 .grid,
.tweet.embedded .gallery.count-3 .grid,
.tweet.embedded .gallery.count-4 .grid {
  max-height: 16rem;
}

@media (max-width: 600px) {
  .tweet {
    padding: var(--saito-space-sm);
    column-gap: var(--saito-space-sm);
  }

  .tweet .chain {
    left: var(--saito-space-sm);
  }

  .tweet.chain-prev .chain::before {
    bottom: calc(100% - var(--saito-space-sm));
  }

  .tweet.chain-next .chain::after {
    top: calc(var(--saito-space-sm) + 3.5rem);
  }
}
/* Namespace: .menu — left nav hierarchy on Saito menu tokens */

.menu .list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xs);
}

.menu .item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--saito-space-md);
  min-height: 4.8rem;
  padding: var(--saito-space-sm) var(--saito-space-md);
  border-radius: var(--saito-radius);
}

/* Persistent selection — Saito menu-select only defines :hover, not .active */
.menu .item.active {
  background-color: var(--saito-accent);
  color: var(--saito-accent-foreground);
}

.menu .icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
}

.menu .icon i {
  font-size: 2.4rem;
  line-height: 1;
}

/* Same outline treatment as .saito-menu icons */
.menu .icon i::before {
  -webkit-text-stroke: 1px var(--saito-muted-foreground);
  color: transparent;
}

.menu .item:hover .icon i::before,
.menu .item.active .icon i::before {
  -webkit-text-stroke-color: var(--saito-foreground);
}

.menu .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dot defaults to left: 3.5rem — pin to icon corner in this rail */
.menu .icon .saito-notification-dot {
  top: -0.25rem;
  right: -0.45rem;
  left: auto;
}

/* Chat is a mobile bottom-nav affordance only — desktop uses the Chat sidebar. */
.menu .item[data-nav='chat'] {
  display: none;
}

@media (max-width: 1200px) {
  .menu .item {
    grid-template-columns: 2.75rem;
    justify-content: center;
    justify-items: center;
    padding-inline: var(--saito-space-xs);
  }

  .menu .label {
    display: none;
  }
}

@media (max-width: 600px) {
  .menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 100%;
    background: var(--saito-background);
    border-top: 1px solid var(--saito-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .menu .list {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    margin: 0;
    padding: var(--saito-space-xs) var(--saito-space-sm);
    min-height: var(--redsquare-mobile-nav-height);
  }

  .menu .item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0;
    min-height: 4.4rem;
    padding: var(--saito-space-xs) 0.2rem;
    border-radius: var(--saito-radius);
  }

  .menu .item[data-nav='chat'] {
    display: flex;
  }

  .menu .icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  .menu .icon i {
    font-size: 2.1rem;
  }

  .menu .label {
    display: block;
    max-width: 100%;
    font-size: 1.083rem;
    line-height: 1.15;
    text-align: center;
  }

  .menu .icon .saito-notification-dot {
    top: -0.15rem;
    right: -0.35rem;
  }
}
/* Namespace: chat embed in .sidebar-left — same title→panel rhythm as right rail */

.sidebar-left > .chat-manager {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-sm);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.sidebar-left .chat-manager-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/*
 * Chat typography — match RS feed hierarchy (Saito chat defaults are larger).
 * Title inherits body on mobile; desktop section step lives in redsquare-main.css.
 * Names = body + medium; secondary line = metadata step.
 */
body.redsquare-body .chat-manager .saito-sidebar-header,
body.redsquare-body .redsquare-mobile-chat .saito-sidebar-header {
  font-size: inherit;
}

/* Desktop rail Chat title — same section step as Leaderboard / Who to Follow */
@media (min-width: 601px) {
  body.redsquare-body .sidebar-left .chat-manager .saito-sidebar-header {
    font-size: 1.67rem;
    font-family: var(--saito-font-medium);
  }
}

body.redsquare-body .chat-manager-list .saito-address,
body.redsquare-body .redsquare-mobile-chat .chat-manager-list .saito-address {
  font-size: inherit;
  font-family: var(--saito-font-medium);
  font-weight: 500;
  line-height: 1.35;
}

body.redsquare-body .chat-manager-list .saito-userline,
body.redsquare-body .redsquare-mobile-chat .chat-manager-list .saito-userline {
  font-size: 1.083rem;
  line-height: 1.35;
}

@media (max-width: 1200px) {
  .sidebar-left > .chat-manager {
    display: none;
  }
}

@media (max-width: 600px) {
  body.redsquare-body[data-redsquare-mobile-view='chat'] .saito-floating-menu {
    display: none;
  }

  .redsquare-mobile-chat {
    position: relative;
  }

  .redsquare-mobile-chat > .chat-manager {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(4.2rem, auto) minmax(0, 1fr);
  }

  .redsquare-mobile-chat .chat-manager-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  .redsquare-mobile-chat > .chat-static {
    position: absolute;
    inset: 0 0 var(--saito-space-xs);
    z-index: 1;
    min-width: 0;
    min-height: 0;
    background: var(--saito-background);
  }
}
/* Namespace: .redsquare-profile
 * Layout mirrors Saito profile hierarchy; HTML still uses RS-prefixed hooks.
 * Composition goal: identity-first (name → key → bio → nav); utilities recede.
 */

.redsquare-profile .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--saito-card-wash);
  border: 1px solid var(--saito-border);
  border-radius: var(--saito-radius);
}

.redsquare-profile-banner {
  position: relative;
  width: 100%;
  height: 7.2rem;
  overflow: hidden;
  background-color: var(--saito-card);
  background-image: url(/saito/img/dreamscape.png);
  background-size: cover;
  background-position: center;
}

.redsquare-profile-banner-edit {
  box-sizing: border-box;
  position: absolute;
  right: var(--saito-space-md);
  bottom: var(--saito-space-md);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--saito-black) 52%, transparent);
  color: var(--saito-foreground);
  font-size: 1.15rem;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
}

.redsquare-profile-banner-edit:hover,
.redsquare-profile-banner-edit:focus-visible {
  background: color-mix(in srgb, var(--saito-black) 68%, transparent);
  outline: none;
}

.redsquare-profile .body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.redsquare-profile .identity {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  column-gap: var(--saito-space-md);
  align-items: start;
  min-width: 0;
  /* ~45% of avatar overlaps the banner */
  margin: -2.5rem 0 var(--saito-space-md);
  padding-inline: var(--saito-space-md);
}

.redsquare-profile .avatar {
  width: 5.6rem;
  height: 5.6rem;
  z-index: 1;
  object-fit: cover;
  border: 3px solid var(--saito-card-wash);
  border-radius: var(--saito-radius);
  background: var(--saito-card-wash);
}

.redsquare-profile .text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  /* Clear the banner overlap, then a little air before the name */
  padding-top: calc(2.5rem + 0.75rem);
  padding-right: 0.15rem;
}

.redsquare-profile .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--saito-font-medium);
  font-weight: 700;
  line-height: 1.25;
  color: var(--saito-foreground);
}

/* Name stays the primary signal — slightly above body, not oversized. */
@media (min-width: 601px) {
  body.redsquare-body .redsquare-profile .name {
    font-size: 1.45rem;
    line-height: 1.25;
  }
}

.redsquare-profile .key-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.redsquare-profile .public-key {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  color: var(--saito-muted-foreground);
}

.redsquare-profile .copy-key {
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: center;
  width: 1.6rem;
  height: 1.6rem;
  min-width: 1.6rem;
  min-height: 1.6rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--saito-radius-sm, 0.4rem);
  color: var(--saito-muted-foreground);
  opacity: 0.55;
}

.redsquare-profile .copy-key:hover,
.redsquare-profile .copy-key:focus-visible {
  background: transparent;
  border: none;
  color: var(--saito-foreground);
  opacity: 1;
}

.redsquare-profile .copy-key:active {
  transform: scale(0.94);
}

.redsquare-profile .copy-key i {
  font-size: 1rem;
}

.redsquare-profile-description {
  margin: 0;
  padding: 0 var(--saito-space-md) var(--saito-space-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
  color: var(--saito-foreground);
}

.redsquare-profile-description.empty:not(.can-edit) {
  display: none;
}

.redsquare-profile-description.can-edit {
  display: grid;
  grid-template-columns: 1fr min-content;
  gap: var(--saito-space-xs);
  cursor: pointer;
}

.redsquare-profile-description-edit {
  display: none;
  cursor: pointer;
  align-items: flex-end;
  justify-content: center;
  opacity: 0.45;
}

.redsquare-profile-description.can-edit .redsquare-profile-description-edit {
  display: flex;
}

.redsquare-profile-description.can-edit.empty .redsquare-profile-description-edit {
  display: block;
}

.redsquare-profile .nav {
  display: flex;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--saito-border);
}

.redsquare-profile .nav .item {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: var(--saito-space-md) var(--saito-space-xs);
  border: none;
  background: transparent;
  cursor: pointer;
  text-transform: capitalize;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--saito-muted-foreground);
}

.redsquare-profile .nav .item:hover,
.redsquare-profile .nav .item:focus-visible {
  color: var(--saito-foreground);
  outline: none;
}

.redsquare-profile .nav .item.active {
  color: var(--saito-foreground);
  text-decoration: none;
}

.redsquare-profile .nav .item.active::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 0.25rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background: var(--saito-primary);
}
/* Arcade embed mount — placement / visibility only; Invite appearance lives in Arcade */

.redsquare-arcade {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.redsquare-arcade .arcade-invites {
  min-width: 0;
}

.redsquare-arcade .saito-sidebar-header,
.redsquare-arcade .sidebar-header {
  text-transform: none;
}

.redsquare-arcade:empty,
.redsquare-arcade:not(:has(.saito-sidebar-header)):not(:has(.sidebar-header)):not(
    :has(.arcade-invite)
  ) {
  display: none;
}
/* Namespace: .tweet-menu — popover aligned with left nav language */

.tweet-menu {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xs);
  min-width: 22rem;
  padding: var(--saito-space-xs);
  opacity: 0;
  transform: translateY(-0.35rem) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
}

.tweet-menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tweet-menu .item {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--saito-space-md);
  min-height: 4.4rem;
  padding: var(--saito-space-sm) var(--saito-space-md);
  border-radius: var(--saito-radius-full);
  cursor: pointer;
}

.tweet-menu .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  color: var(--saito-muted-foreground);
}

.tweet-menu .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Namespace: .compose — overlay content layout (shell owned by SaitoOverlay).
 * Shared family: title/content/controls/footer — Compose, Reply, Retweet, Quote.
 */

.compose {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-sm);
  width: min(54rem, 92vw);
  height: 100%;
  max-height: min(88dvh, 72rem);
  overflow: hidden;
}

.compose.saito-overlay-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.compose .dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Flow only — Tweet owns its own inset; composer owns compose-area inset. */
.compose .body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* Placement + scroll cap. No padding — Tweet owns layout. */
.compose .reply-preview {
  max-height: min(32dvh, 26rem);
  overflow-y: auto;
  pointer-events: none;
}

.compose .composer {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--saito-space-md);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--saito-space-lg);
}

.compose .avatar {
  width: 3.5rem;
  height: 3.5rem;
}

.compose .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: var(--saito-space-xs);
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.compose .header.compose .secondary {
  color: var(--saito-muted-foreground);
}

.compose .surface {
  position: relative;
  display: grid;
  grid-template-rows: minmax(8rem, 1fr) auto;
  row-gap: var(--saito-space-xs);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.compose .input {
  width: 100%;
  height: 100%;
  min-height: 8rem;
  padding: 0;
  resize: none;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: inherit;
  font: inherit;
  line-height: 1.45;
}

.compose .input:focus {
  outline: none;
}

.compose .image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.2rem;
}

.compose .image-preview:empty {
  display: none;
}

.compose .image-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--saito-radius);
}

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

.compose .image-remove {
  position: absolute;
  top: var(--saito-space-xs);
  right: var(--saito-space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--saito-radius);
  background: color-mix(in srgb, var(--saito-background) 72%, transparent);
  color: inherit;
  cursor: pointer;
}

.compose .compose-picker {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
}

.compose .compose-picker.visible {
  display: flex;
}

.compose .compose-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: var(--saito-space-xs) var(--saito-space-sm);
  border-bottom: 1px solid var(--saito-border);
  color: var(--saito-primary);
}

.compose .compose-picker-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--saito-muted-foreground);
}

.compose .emoji-picker-host,
.compose .gif-picker-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.compose .emoji-picker-host .compose-emoji-picker {
  display: flex;
  width: 100%;
  height: 100%;
  --emoji-size: 1.67rem;
  --emoji-vertical-offset: 0.08em;
  --background: var(--saito-popover);
  --border-color: var(--saito-border);
  --indicator-color: var(--saito-primary);
  --input-background: var(--saito-secondary);
  --input-border-color: var(--saito-border);
  --input-border-radius: var(--saito-radius);
  --input-font-color: var(--saito-foreground);
  --input-font-size: 1.6rem;
  --input-line-height: 1.5;
  --input-padding: 1rem;
  --input-placeholder-color: var(--saito-muted-foreground);
  --outline-color: var(--saito-primary);
  --category-font-color: var(--saito-foreground);
  --button-active-background: var(--saito-secondary);
  --button-hover-background: var(--saito-accent);
}

.compose .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--saito-space-sm);
  flex: 0 0 auto;
  padding: var(--saito-space-sm) var(--saito-space-lg) var(--saito-space-md);
  border-top: 1px solid var(--saito-border);
}

.compose .tools {
  display: flex;
  gap: var(--saito-space-xs);
}

.compose .tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--saito-radius);
  color: var(--saito-muted-foreground);
  cursor: pointer;
}

.compose .tool i {
  font-size: 2.4rem;
}

.compose .actions {
  display: flex;
  align-items: center;
  gap: var(--saito-space-md);
}

.compose .char-count {
  display: flex;
  gap: 0.1rem;
  color: var(--saito-muted-foreground);
}

.compose .char-count.warning {
  color: var(--saito-primary);
}

.compose .submit {
  position: relative;
  margin: 0;
  min-width: 11rem;
}

.compose .file-input,
.compose .file-input + label {
  display: none;
}

.compose .submit .spinner {
  display: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid color-mix(in srgb, var(--saito-button-primary-foreground) 35%, transparent);
  border-top-color: var(--saito-button-primary-foreground);
  border-radius: 50%;
  animation: compose-submit-spin 0.8s linear infinite;
}

.compose.posting .submit .label {
  opacity: 0;
}

.compose.posting .submit .spinner {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.compose .posting-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--saito-space-sm);
  background: color-mix(in srgb, var(--saito-popover) 88%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.compose.posting .posting-screen {
  opacity: 1;
  pointer-events: auto;
}

.compose .posting-message {
  margin: 0;
  color: var(--saito-muted-foreground);
}

.compose .posting-loader {
  width: 4rem;
  height: 4rem;
}

@keyframes compose-submit-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (min-width: 769px) {
  .compose .emoji-picker-host .compose-emoji-picker {
    --num-columns: 10;
  }

  .compose {
    height: auto;
    max-height: min(94dvh, 110rem);
    overflow: visible;
  }

  .compose .dialog {
    height: auto;
    max-height: min(88dvh, 72rem);
  }

  .compose .compose-picker {
    position: absolute;
    inset: calc(100% + var(--saito-space-sm)) 0 auto;
    height: min(40dvh, 38rem);
  }
}

@media (max-width: 768px) {
  body.redsquare-body .saito-overlay > .compose {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .compose .dialog {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .compose .compose-picker {
    box-shadow: none;
  }

  .compose .footer {
    padding-bottom: max(var(--saito-space-md), env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 600px) {
  body.redsquare-body .saito-floating-plus-btn {
    transition: none;
  }

  body.redsquare-body .saito-floating-menu.activated .saito-floating-plus-btn {
    transform: none;
  }

  body.redsquare-body .saito-floating-menu-mask {
    display: none;
  }

  body.redsquare-body .saito-floating-item-container {
    transition: opacity 120ms ease-out;
  }

  .compose {
    width: 100%;
    max-height: 100vdh;
  }

  .compose .composer,
  .compose .footer {
    padding-left: var(--saito-space-md);
    padding-right: var(--saito-space-md);
  }

  .compose .input {
    min-height: 12rem;
  }
}
/* Namespace: .settings — overlay content layout (shell owned by SaitoOverlay) */

.settings {
  display: flex;
  flex-direction: column;
  width: min(52rem, 92vw);
  max-height: min(88vh, 72rem);
  overflow: hidden;
}

.settings > .header {
  flex: 0 0 auto;
  padding: var(--saito-space-md) var(--saito-space-lg);
  border-bottom: 1px solid var(--saito-border);
}

.settings > .header .title {
  margin: 0;
  font-family: var(--saito-font-medium);
  line-height: 1.2;
}

.settings .body {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xl);
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--saito-space-lg);
  overflow-x: hidden;
  overflow-y: auto;
}

.settings .section {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-md);
}

.settings .section > .title {
  margin: 0;
  font-family: var(--saito-font-medium);
  line-height: 1.3;
}

.settings .description {
  margin: 0;
  color: var(--saito-muted-foreground);
  line-height: 1.45;
}

.preference-group {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xs);
}

.preference {
  display: flex;
  align-items: flex-start;
  gap: var(--saito-space-sm);
  padding: var(--saito-space-sm) var(--saito-space-md);
  border-radius: var(--saito-radius);
  cursor: pointer;
}

.preference input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.preference .indicator {
  position: relative;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0.15rem;
  border: 1px solid var(--saito-border);
  border-radius: 50%;
}

.preference .indicator::after {
  content: '';
  position: absolute;
  inset: 0.35rem;
  border-radius: 50%;
  background: var(--saito-foreground);
  opacity: 0;
  transform: scale(0.6);
}

.preference:has(input:checked) .indicator::after {
  opacity: 1;
  transform: scale(1);
}

.preference .text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.settings .list {
  display: flex;
  flex-direction: column;
  gap: var(--saito-space-xs);
}

.settings .row {
  display: flex;
  align-items: center;
  gap: var(--saito-space-md);
  min-height: 4.8rem;
  padding: 0 var(--saito-space-md);
  border-radius: var(--saito-radius);
  text-align: left;
}

.settings .row.action {
  cursor: pointer;
}

.settings .row.inline {
  min-height: auto;
  padding: var(--saito-space-xs) var(--saito-space-md) 0;
}

.settings .row .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  color: var(--saito-muted-foreground);
}

.settings .row .label {
  flex: 1;
  min-width: 0;
}

.settings .row .chevron {
  color: var(--saito-muted-foreground);
}

@media (max-width: 600px) {
  .settings {
    width: 100%;
    max-height: 100vh;
  }

  .redsquare-mobile-settings .settings {
    height: 100%;
    max-height: none;
  }

  .settings > .header,
  .settings .body {
    padding-left: var(--saito-space-md);
    padding-right: var(--saito-space-md);
  }
}
/*
 * .redsquare-splash-overlay — first-visit onboarding host.
 * Card chrome comes from shared .saito-cta; this file owns fullscreen layout only.
 */

.redsquare-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--saito-white, #fff);
  background:
    radial-gradient(60vw 60vw at 50% -20%, rgba(255, 145, 77, 0.12), transparent), #0d0e11;
}

.redsquare-splash-logo {
  --saito-cta-logo-mask: url('/saito/icons/saito-redsquare-icon-outline-label-horizontal.svg');
  display: block;
  position: relative;
  width: min(560px, 84vw);
  aspect-ratio: 381 / 134;
  max-width: 100%;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
}

.saito-cta:hover .redsquare-splash-logo {
  --saito-cta-logo-mask: url('/saito/icons/saito-redsquare-icon-solid-label-horizontal.svg');
}

.redsquare-splash-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: var(--saito-cta-logo-mask) center / contain no-repeat;
  mask: var(--saito-cta-logo-mask) center / contain no-repeat;
}

.redsquare-splash-subtitle {
  color: var(--saito-muted-foreground, #abaaae);
  font-size: 1.25rem;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.redsquare-splash-join {
  width: 100%;
  height: 4.5rem;
  min-height: 4.5rem;
  padding: 0 2rem;
  border: none;
  border-radius: var(--saito-radius);
  color: #fff;
  background: var(--saito-cta-action-background, linear-gradient(90deg, #ff8a3d, #f54900));
  box-shadow: var(--saito-cta-action-shadow, 0 0 32px -10px rgba(245, 73, 0, 0.48));
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.redsquare-splash-join:hover {
  transform: translateY(-1px);
  background: var(--saito-cta-action-background, linear-gradient(90deg, #ff8a3d, #f54900));
  box-shadow: 0 0 36px -10px rgba(255, 145, 77, 0.55);
  filter: brightness(1.03);
}

.redsquare-splash-join:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
/* Namespace: .redsquare-leaderboard — row layout only.
 * Title (.saito-sidebar-header / legacy .sidebar-header) and surface
 * (.saito-sidebar-element / league table) stay in Saito/League.
 */

.redsquare-leaderboard {
  display: flex;
  flex-direction: column;
  /* Spacing owned by .league-rankings. */
  gap: 0;
  min-width: 0;
}

.redsquare-leaderboard:empty {
  display: none;
}

.redsquare-leaderboard .league-rankings {
  gap: var(--saito-space-sm);
}

.redsquare-leaderboard .saito-table-body {
  max-height: none;
  overflow: visible;
}

.redsquare-leaderboard .league-leaderboard-ranking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--saito-space-sm);
  align-items: center;
  padding-block: var(--saito-space-xs);
}

.redsquare-leaderboard .saito-table-gamename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redsquare-leaderboard .saito-table-rank {
  text-align: right;
}

/* Inherit RS body scale — Saito table defaults to 1.5rem. */
.redsquare-leaderboard .saito-table-body,
.redsquare-leaderboard .saito-table-rank {
  font-size: inherit;
}