/* PONTIMUS — the clan half: /clans, /clans/:id, /traders/:id, /chats, /world,
   /activity, and the Pledge control on /positions.

   Prefixes: .cl- shared + leaderboard, .pf- profile, .ch- chats, .wd- world,
   .ac- activity, .pl- the pledge control. Everything sits on the tokens in
   tokens.css and the panel / btn / stat / notice vocabulary from app.css.

   Layout rules that matter on a phone: no fixed widths wider than 320px, every
   row is a flex line whose text column has min-width:0, tables scroll inside
   .cl-tablewrap, and tap targets are 44px from 720px down. */

/* ------------------------------------------------------------- shared */

/* TRAP: the UA's [hidden] { display: none } loses to any class rule that sets
   display - so a `hidden` button styled inline-flex stayed on screen. The
   attribute wins here, unconditionally, for every clan surface. */
.cl-page [hidden],
.pf-page [hidden],
.ch-page [hidden],
.wd-page [hidden],
.ac-page [hidden],
.pos-page [hidden],
.sheet [hidden] {
  display: none !important;
}

.cl-page,
.pf-page,
.ch-page,
.wd-page,
.ac-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.cl-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cl-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.cl-title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}
.cl-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.cl-head-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* The Activity opener only exists where the right column does not. */
.cl-pulse {
  display: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}

.cl-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 2px;
}
.cl-tab,
.cl-mode,
.ac-chip {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: var(--r-full);
  padding: 7px 14px;
  min-height: 32px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cl-tab:hover,
.cl-mode:hover,
.ac-chip:hover {
  color: var(--ink-bright);
}
.cl-tab.on,
.cl-mode.on,
.ac-chip.on {
  background: var(--green);
  color: var(--on-green);
}

.cl-filters {
  gap: 10px;
}
.cl-win .win-btn,
.pf-win .win-btn {
  min-height: 28px;
}
.cl-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 360px;
  padding: 0 12px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--ink-3);
}
.cl-search:focus-within {
  border-color: var(--green-line);
}
.cl-search input {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink-bright);
  font-family: var(--f-mono);
  font-size: 12px;
}
.cl-search input::placeholder {
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.cl-sortbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.cl-sort-k {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-3);
}
.cl-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-bright);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 0 30px 0 12px;
  min-height: 36px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.cl-select:focus-visible {
  border-color: var(--green-line);
}

/* The leaderboard plus the Activity column from 1024px up. */
.cl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.cl-board {
  min-width: 0;
}
.cl-side {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  max-height: calc(100vh - var(--topbar-h) - 24px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cl-side .panel-head {
  flex: 0 0 auto;
}
.cl-side-all {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cl-side .cl-feed {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.cl-refresh-note {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 16px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cl-side-note {
  padding: 12px 16px;
}

.cl-rows {
  display: flex;
  flex-direction: column;
}
.cl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 62px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  transition: background var(--dur) var(--ease);
}
.cl-row:last-child {
  border-bottom: 0;
}
.cl-row:hover {
  background: var(--green-tint);
  text-decoration: none;
}
.cl-rank {
  flex: 0 0 26px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cl-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  overflow: hidden;
  width: 36px;
  height: 36px;
  background: var(--raised);
}
.cl-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cl-mono {
  display: block;
}
.cl-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cl-row-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.cl-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-bright);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cl-owner {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.cl-owner-k {
  font-size: 8.5px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-3);
}
/* The founding-window marker. It rides the name line, which wraps, so a long
   name and the marker never fight for the same row of pixels. */
.cl-fd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Shrinkable, with the label clipping rather than pushing: at 320px the name
     column is about 126px wide and a rigid nowrap chip spilled over the price
     on the right. The phone rules below keep it inside that on its own. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid var(--green-line);
  border-radius: var(--r-full);
  padding: 3px 9px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: help;
}
.cl-fd svg {
  flex: 0 0 auto;
  color: var(--green);
}
.cl-fd span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sits above the rows, under the head: what the order is before it is read. */
.cl-fd-note {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.cl-row-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-row-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
.cl-price {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cl-chg {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cl-chg.up {
  color: var(--pos);
}
.cl-chg.down {
  color: var(--neg);
}
.cl-chg-k {
  color: var(--ink-3);
  font-size: 8.5px;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.cl-dash {
  color: var(--ink-3);
  cursor: help;
  border-bottom: 1px dotted var(--line-3);
}
.cl-more {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.cl-card .empty h3 {
  color: var(--ink-bright);
}
.cl-measure {
  max-width: 52ch;
}
.cl-notice {
  margin: 12px 16px 0;
  align-items: flex-start;
}
.cl-notice span {
  min-width: 0;
}
.cl-card > .cl-notice,
.cl-page > .cl-notice,
.pf-page > .cl-notice,
.wd-page > .cl-notice {
  margin: 0;
}
.cl-skel-line {
  display: block;
  height: 10px;
  margin: 4px 0;
}
.cl-row--skel .cl-rank {
  color: transparent;
}

/* ------------------------------------------------------- activity feed */

.cl-feed {
  display: flex;
  flex-direction: column;
}
.cl-ev {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  min-width: 0;
}
.cl-ev:last-child {
  border-bottom: 0;
}
.cl-feed--page .cl-ev {
  padding: 12px 16px;
  font-size: 13px;
}
.cl-ev-ico {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--ink-2);
  margin-top: 1px;
}
.cl-ev--trades .cl-ev-ico {
  color: var(--green);
}
.cl-ev--posts .cl-ev-ico {
  color: var(--ink-bright);
}
.cl-ev--revenue .cl-ev-ico {
  color: var(--warn);
}
.cl-ev-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cl-ev-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
  padding-top: 2px;
}
.cl-tx {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--ink-3);
}
.cl-tx:hover {
  color: var(--green);
  background: var(--raised);
}
.cl-actor,
.cl-subj {
  font-family: var(--f-mono);
  font-size: 11.5px;
}
.cl-subj {
  color: var(--ink-bright);
  font-weight: 600;
  font-family: var(--f-sans);
  font-size: 12.5px;
}
.cl-mono-num {
  font-family: var(--f-mono);
  color: var(--ink-bright);
  font-variant-numeric: tabular-nums;
}
.cl-post-text {
  color: var(--ink);
}
.cl-feed-empty {
  padding: 2rem 1rem;
}
.cl-ev--skel {
  display: block;
}

/* ------------------------------------------------------------- forms */

.cl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cl-modes {
  display: flex;
  gap: 3px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3px;
}
.cl-mode {
  flex: 1 1 0;
  border-radius: var(--r-sm);
  min-height: 38px;
}
.cl-form-lede {
  color: var(--ink-2);
  font-size: 13px;
}
.cl-form-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--green);
  padding: 8px 12px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-md);
  background: var(--green-tint);
}
.cl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cl-field-k {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-3);
}
.cl-count {
  margin-left: auto;
  letter-spacing: 0.04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.cl-count.over {
  color: var(--neg);
}
.cl-opt {
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0.04em;
}
.cl-input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  background: var(--raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink-bright);
  font-family: var(--f-mono);
  font-size: 13px;
  outline: 0;
}
.cl-input:focus {
  border-color: var(--green);
}
.cl-form-fine,
.pf-fine {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.cl-form-cta {
  min-height: 44px;
  align-self: stretch;
}
.cl-form-h {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cl-form-h:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ----------------------------------------------------------- profile */

.pf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pf-back:hover {
  color: var(--green);
  text-decoration: none;
}
.pf-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex-wrap: wrap;
}
.pf-head-main {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.pf-k {
  font-size: 8.5px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-3);
}
.pf-share {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}
.pf-kind,
.pf-tag {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  white-space: nowrap;
}
.pf-name {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-bright);
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.pf-facts {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pf-head-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.pf-liq-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 90ch;
  margin-top: -4px;
}
.pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.pf-main,
.pf-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.pf-aside {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
}
.pf-keypanel {
  background-image: var(--signature-bg);
  box-shadow: var(--signature-shadow);
}
.pf-keypanel .panel-head {
  border-bottom-color: var(--line-2);
}
.pf-win {
  margin-left: auto;
}
.pf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pf-stat {
  padding: 12px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.pf-stat .v {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-stat-note {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-stats--rev {
  border-bottom: 0;
}
.pf-chart {
  padding: 12px 16px 14px;
}
.pf-spark svg {
  width: 100%;
  height: 110px;
  display: block;
}
.pf-chart-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding-top: 6px;
}
.pf-chart-empty {
  padding: 4px 0;
}
/* A value priced on one leg of its pair only (the other token has no
   reference price). The tooltip on the cell says why. */
.pf-leg {
  font-size: 0.7em;
  margin-left: 2px;
  color: var(--ink-3);
  cursor: help;
}

.pf-n {
  color: var(--ink-3);
  margin-left: 4px;
}
.pf-pad {
  padding: 12px 16px;
}
.pf-rev-you {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 0;
}
.pf-yours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  padding: 10px 12px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-md);
  background: var(--green-tint);
}
.pf-yours strong {
  color: var(--ink-bright);
}
.pf-mini {
  padding: 7px 12px;
  font-size: 10px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pf-chat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
  min-height: 44px;
}
.pf-chat:hover {
  text-decoration: none;
  border-color: var(--green-line);
}
.pf-chat strong {
  color: var(--ink-bright);
}
.pf-chat-ico {
  flex: 0 0 auto;
  color: var(--green);
  display: inline-flex;
}
.pf-chat-body {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-members {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.pf-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
}
.pf-member:last-child {
  border-bottom: 0;
}
.pf-member .pf-mini {
  margin-left: auto;
}
.pf-crown {
  flex: 0 0 18px;
  width: 18px;
  display: inline-flex;
  justify-content: center;
  color: var(--warn);
}
.pf-addr {
  color: var(--ink);
}
.pf-mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.cl-tablewrap {
  overflow-x: auto;
  max-width: 100%;
}
.pf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: 11.5px;
  min-width: 0;
}
.pf-table th,
.pf-table td {
  padding: 9px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pf-table th {
  font-size: 8.5px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.pf-table tbody tr:last-child td {
  border-bottom: 0;
}
.pf-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pf-pledges {
  min-width: 640px;
}
.pf-actions {
  text-align: right;
}

/* ------------------------------------------------- the founding panel

   What the deployed contract already gives an early address: the fixed curve,
   the seats a clan's five percent divides over, and the block a member's
   revenue clock started. Every block here stacks on its own; nothing is
   positioned, so the 320px column is the same column as the 1600px one, only
   narrower. The two tables sit in .cl-tablewrap and scroll themselves rather
   than pushing the page sideways. */

.pf-fd-state {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  white-space: nowrap;
}
.pf-fd-state.is-open {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-tint);
}
.pf-fd-sub {
  padding: 12px 16px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 78ch;
}
.pf-founding .pf-stats {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
/* TRAP: .pf-stat-note is nowrap with an ellipsis, which suits the one-word
   notes everywhere else ("63 seats free", "key #2"). This panel's notes are
   sentences - "of the clan's five percent" ran to 145px against the 133px a
   four-column grid leaves at 768px and lost its last two words to the
   ellipsis. A note that says what a number is cannot be the part that gets
   cut, so here it wraps instead. The grid row grows for all four cells, which
   is why the rule is scoped to this panel. */
.pf-founding .pf-stat-note {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}
.pf-fd-seats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}
.pf-fd-meter {
  height: 6px;
  border-radius: 999px;
  background: var(--raised-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pf-fd-meter > span {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--green);
}
.pf-fd-p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 78ch;
  overflow-wrap: anywhere;
}
/* The curve, the members and the holders are all narrow tables of mono
   figures; a minimum width keeps the columns from collapsing into each other
   and hands the overflow to .cl-tablewrap instead of the page. */
.pf-fd-curve {
  min-width: 320px;
}
.pf-fd-members {
  min-width: 520px;
}
.pf-fd-holders {
  min-width: 460px;
}
.pf-fd-curve tr.is-now td {
  color: var(--ink-bright);
}
.pf-fd-now {
  color: var(--green);
}
.pf-table tr.is-you td {
  background: var(--green-tint);
}
.pf-table tr.is-you td:first-child {
  box-shadow: inset 2px 0 0 var(--green);
}

/* your standing */
.pf-fd-you {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
}
.pf-fd-you-h {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-2);
}
.pf-fd-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-fd-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
  min-width: 0;
}
.pf-fd-row:last-child {
  border-bottom: 0;
}
.pf-fd-row .k {
  color: var(--ink-3);
  flex: 0 1 auto;
  min-width: 0;
}
.pf-fd-row .v {
  color: var(--ink-bright);
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pf-fd-rownote {
  color: var(--ink-3);
  font-size: 10px;
}
.pf-fd-cta {
  display: flex;
}

/* the key swap */
.pf-swap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.pf-sides {
  display: flex;
  gap: 3px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3px;
}
.pf-side {
  flex: 1 1 0;
  min-height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.pf-side.on {
  background: var(--green);
  color: var(--on-green);
}
.pf-stepper {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.pf-step {
  flex: 0 0 44px;
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--ink-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pf-step:hover {
  border-color: var(--green);
  color: var(--green);
}
.pf-amount {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-bright);
  background: var(--raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  outline: 0;
  font-variant-numeric: tabular-nums;
}
.pf-amount:focus {
  border-color: var(--green);
}
.pf-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.pf-preset {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pf-preset.on {
  border-color: var(--green);
  color: var(--green);
}
.pf-line,
.pf-hold {
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.pf-line strong,
.pf-hold strong {
  font-family: var(--f-mono);
  color: var(--ink-bright);
  font-size: 15px;
}
.pf-line.is-estimate strong {
  color: var(--ink);
}
.pf-est {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pf-fees {
  font-size: 11px;
  color: var(--ink-3);
}
.pf-block {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--warn);
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius: var(--r-md);
}
.pf-go {
  min-height: 46px;
  width: 100%;
}

/* ------------------------------------------------------------- chats */

.ch-lede {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 78ch;
  flex: 1 1 100%;
}
.ch-rows {
  display: flex;
  flex-direction: column;
}
.ch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.ch-row:last-child {
  border-bottom: 0;
}
.ch-row:hover {
  background: var(--green-tint);
  text-decoration: none;
}
.ch-prev {
  font-size: 12px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-prev-author {
  font-family: var(--f-mono);
  color: var(--ink-3);
  font-size: 11px;
}
.ch-prev-none {
  color: var(--ink-3);
}
.ch-row-right {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}
.ch-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ch-head-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ch-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ch-head-name {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-head-sub {
  font-size: 12px;
  color: var(--ink-3);
}
.ch-panel {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.ch-feed {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(60vh, 640px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.ch-post {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ch-post.is-me .ch-text {
  border-color: var(--green-line);
  background: var(--green-tint);
}
.ch-post-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.ch-author {
  color: var(--ink-2);
}
.ch-when {
  margin-left: auto;
}
.ch-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 12px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ch-empty {
  padding: 2rem 1rem;
}
.ch-compose {
  border-top: 1px solid var(--line);
  padding: 12px 16px 14px;
  flex: 0 0 auto;
}
.ch-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  min-height: 32px;
}
.ch-locked span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ch-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ch-textarea {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  padding: 10px 12px;
  background: var(--raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink-bright);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.5;
  outline: 0;
}
.ch-textarea:focus {
  border-color: var(--green);
}
.ch-textarea:disabled {
  opacity: 0.6;
}
.ch-compose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ch-compose-row .cl-count {
  margin-left: 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.ch-compose-row .btn {
  min-height: 44px;
  min-width: 96px;
}
.ch-gas {
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.ch-gas-err {
  color: var(--warn);
}

/* ------------------------------------------------------------- world */

.wd-mapwrap {
  padding: 0;
}
.wd-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
}
/* The poster still, at 8%. The video itself is the landing's alone. */
.wd-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/video/poster.jpg') center / cover no-repeat;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
.wd-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}
.wd-map--skel {
  border-radius: 0;
}
.wd-tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  max-width: min(280px, calc(100% - 8px));
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--ink-2);
}
.wd-tip strong {
  color: var(--ink-bright);
  font-size: 13px;
}
.wd-tip span {
  font-family: var(--f-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.wd-tip em {
  font-style: normal;
  color: var(--green);
  font-family: var(--f-mono);
  font-size: 10.5px;
}
.wd-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 0 4px;
}
.wd-legend-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.wd-legend .live-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim);
}
.wd-legend-block {
  color: var(--ink-3);
}
.wd-legend-soon {
  color: var(--ink-3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-full);
  padding: 5px 12px;
}
.wd-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.wd-li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  min-width: 0;
}
.wd-list li:last-child .wd-li {
  border-bottom: 0;
}
.wd-li:hover {
  background: var(--green-tint);
  text-decoration: none;
}
.wd-li-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink-bright);
}
/* TRAP: flex-shrink is proportional to the item's base size, so a 64-byte
   clan name (huge base) and the dollar figure (small base) both gave up room
   and "$1.25M" painted out of a 17px box at 320. Only the name may shrink;
   the rank, share and value are what the row is for. */
.wd-li .cl-rank,
.wd-li-share,
.wd-li-usd {
  flex: 0 0 auto;
}
.wd-li-share {
  font-family: var(--f-mono);
  color: var(--green);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wd-li-usd {
  font-family: var(--f-mono);
  color: var(--ink-2);
  min-width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- activity */

.ac-note {
  padding: 0;
  margin-left: auto;
}
.ac-chips {
  display: inline-flex;
  gap: 2px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 2px;
  max-width: 100%;
  overflow-x: auto;
}
.ac-window {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}

/* ------------------------------------------------- positions: pledge */

.pl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.pl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
}
.pl-tag a {
  color: var(--green);
  font-weight: 700;
}
.pl-row .btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 10px;
  margin-left: auto;
}
.pl-note {
  align-items: flex-start;
}
.pl-note a {
  margin-left: auto;
  white-space: nowrap;
}
.pl-pick {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pl-pick button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--ink-bright);
  font-family: var(--f-sans);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.pl-pick button:hover {
  border-color: var(--green);
}

/* -------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  .cl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cl-side {
    display: none;
  }
  .cl-pulse {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  .pf-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The key swap comes first on a stacked page: it is what the page is for. */
  .pf-aside {
    order: -1;
    position: static;
  }
  .pf-pledges {
    min-width: 560px;
  }
}

@media (max-width: 720px) {
  .cl-head-actions {
    width: 100%;
    margin-left: 0;
  }
  .cl-head-actions .btn {
    min-height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .cl-head-actions .cl-pulse {
    flex: 0 0 44px;
  }
  /* Every CTA inside a state card - deploy, empty, error - is a thumb target. */
  .cl-card .pos-cta .btn,
  .cl-empty .pos-cta .btn,
  .cl-feed-empty .btn,
  .ch-locked .btn,
  .pf-yours .btn {
    min-height: 44px;
  }
  .cl-tab,
  .cl-mode,
  .ac-chip,
  .pf-side,
  .pf-preset,
  .pf-mini,
  .cl-select,
  .cl-search,
  .cl-win .win-btn,
  .pf-win .win-btn {
    min-height: 44px;
  }
  .cl-filters {
    gap: 8px;
  }
  .cl-search {
    flex: 1 1 100%;
    max-width: none;
    order: -1;
  }
  .cl-sortbox {
    margin-left: auto;
  }
  .cl-select {
    padding-right: 30px;
  }
  .pf-head-actions {
    margin-left: 0;
    width: 100%;
  }
  .pf-head-actions .btn {
    min-height: 44px;
    flex: 1 1 auto;
  }
  .pf-win {
    margin-left: 0;
  }
  .pf-keypanel .panel-head {
    flex-wrap: wrap;
  }
  .pf-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pf-stat:nth-child(2n) {
    border-right: 0;
  }
  .pf-chat {
    flex-wrap: wrap;
  }
  .wd-map {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  .wd-legend {
    flex-direction: column;
    align-items: flex-start;
  }
  .ch-feed {
    max-height: min(56vh, 560px);
  }
  .ch-compose-row .btn {
    min-width: 80px;
  }
  .pl-row .btn {
    min-height: 44px;
    flex: 1 1 100%;
    margin-left: 0;
  }
  .pf-fd-cta .btn {
    min-height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }
  /* A label and a mono ETH figure will not share a 320px line without one of
     them overprinting the other; below the phone breakpoint they stack. */
  .pf-fd-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding: 7px 0;
  }
  .pf-fd-row .v {
    text-align: left;
  }
}

@media (max-width: 430px) {
  .cl-row {
    gap: 10px;
    padding: 12px 12px;
  }
  .cl-rank {
    flex-basis: 18px;
  }
  .cl-avatar {
    width: 32px;
    height: 32px;
  }
  .cl-row-name .cl-owner {
    display: none;
  }
  /* The name column measures about 85px at 320px, so the marker drops its icon
     and its second word rather than ellipsising: a clipped marker says nothing.
     What is left, "founding", is what the tooltip and the manual explain. */
  .cl-fd {
    font-size: 8px;
    padding: 2px 7px;
    gap: 0;
  }
  .cl-fd svg,
  .cl-fd-w {
    display: none;
  }
  .cl-row-sub {
    white-space: normal;
    line-height: 1.4;
  }
  .cl-chg-k {
    display: none;
  }
  .cl-ev {
    padding: 10px 12px;
  }
  .cl-ev-meta {
    gap: 4px;
  }
  .pf-stat,
  .pf-pad,
  .pf-swap,
  .pf-chart,
  .pf-member,
  .pf-fd-sub,
  .pf-fd-seats,
  .pf-fd-you,
  .ch-post,
  .ch-compose,
  .wd-li,
  .ch-row {
    padding-left: 12px;
    padding-right: 12px;
  }
  .pf-table th,
  .pf-table td {
    padding: 8px 10px;
  }
  .pf-facts {
    gap: 10px;
  }
  .pf-eyebrow {
    gap: 6px;
  }
  .wd-li-usd {
    min-width: 0;
  }
}

/* ------------------------------------- the unclaimed board on the Traders tab */

/* The empty-state card sits directly above the board, so it loses its tall
   standalone padding: the two read as one surface. */
.cl-empty--tight {
  padding-bottom: 1.2rem;
  margin-bottom: 1rem;
}

.cl-lp .ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cl-lp-table {
  width: 100%;
}
.cl-lp-you {
  background: var(--green-tint);
}
.cl-you {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--green-line);
  border-radius: var(--r-full);
  padding: 1px 7px;
  margin-left: 6px;
}
.cl-lp-claim {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .cl-hide-sm {
    display: none;
  }
  .cl-lp-claim {
    min-height: 44px;
  }
}