/* Clans roster: members table, join/create, overview cards, emblem picker, role bar, member popover, announcements, feed, members window, invites. */
.cl-table { width: 100%; table-layout: auto; }
.cl-table td, .cl-table th { padding: 7px 8px; }
.cl-td-name { font-weight: 600; color: var(--ink); }
/* Shrink-wrap the trailing cells rather than putting width:100% on the name: in an auto-layout
   table a 100% cell plus nowrap siblings pushes the table PAST its container, which put the
   buttons off-screen. `width: 1%` + nowrap is the shrink-to-fit idiom and always fits. */
/* Name then stars, both hard left; the STARS cell absorbs the row's slack so the two stay
   adjacent instead of the name stretching and pushing the rating across the card. */
.cl-table .cl-td-name { width: 1%; white-space: nowrap; text-align: left; }
.cl-table .cl-td-elo  { width: auto; text-align: left; padding-left: 14px; }
.cl-table .cl-td-act  { width: 1%; white-space: nowrap; text-align: right; }
.cl-td-act .btn + .btn { margin-left: 6px; }
/* Approve and Reject read as one decision pair, so they get one width. */
.cl-td-act .btn { min-width: 7.5rem; justify-content: center; }
/* Icon-only at ≤640 (DataCard.actionBtn swaps .nl-act-lbl for .nl-act-ico there). The pair
   width has to go with the labels, or two 7.5rem buttons push the row off a 375px screen. */
@media (max-width: 640px) {
  .cl-td-act .btn { min-width: 0; padding-left: 10px; padding-right: 10px; }
  .cl-td-act .btn + .btn { margin-left: 4px; }
}
/* A pending request needs answering. The BORDER carries that, not a fill: the card keeps
   .cl-card's background so it sits level with every other panel on the page. box-sizing is
   border-box, so the extra 2px of left border must come back out of the padding or every line
   of text sits 2px right of the cards stacked around it. */
.cl-card-attn {
  border-color: var(--bronze);
  border-left-width: 3px;
  padding-left: 18px;
  box-shadow: var(--shadow-1);
}
.cl-role-select { font-size: 0.78rem; padding: 4px 8px; }

/* The join prompt is the whole screen, not one panel among several: no border and no fill of
   its own, just the shadow carrying its edge — the .create-card treatment (create-form.css). */
.cl-card.cl-empty {
  background: transparent;
  border-color: transparent;
  box-shadow: var(--shadow-2);
  padding: 26px 24px;
}
.cl-empty { text-align: center; }
.cl-empty .cl-card-title { justify-content: center; }
.cl-empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
/* The join request sits under the copy with the cancel on its own line — it used to be a btn-xs
   inline in the sentence, too small to find and too small to hit on a phone. Its own name, NOT
   .cl-pending: that one is the pending clan-war CARD and carries a dashed edge. No box of its
   own — it is already inside .cl-card, and a card inside a card reads as two panels. */
.cl-join-pending {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin: 22px auto; max-width: 44ch;
}
.cl-join-pending-note { color: var(--ink-2); font-size: 0.9rem; margin: 0; }
.cl-join-pending-cancel { min-width: 168px; }
/* One field per row — a create screen is a FORM, not a browse surface. */
.cl-create {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); text-align: left;
}
.cl-create > .cl-field { max-width: 420px; }
.cl-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--ink-3); }
.cl-field input, .cl-field select {
  padding: 8px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--border); background: var(--bg-0); color: var(--ink);
  font: inherit; font-size: 0.88rem;
}
.cl-create-actions { display: flex; gap: 10px; justify-content: flex-start; }
/* The routed /clans/overview/new view: a form, so it reads left-aligned, not centred like the
   join prompt it replaces. */
.cl-create-view { text-align: left; }
.cl-create-view .cl-card-title { justify-content: flex-start; }

/* Overview cards: radius-l/shadow shape, distinct from the flatter .cl-card above. */
.cl-headcard,
.cl-overview,
.cl-ann-card,
.cl-notifs {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  padding: 20px;
}
/* overflow visible: popovers + emblem picker escape the header card. */
.cl-headcard { padding: 0; overflow: visible; margin-bottom: 22px; }

/* .cl-av sizes only; fill and glyph colour come from .avatar-chip/.avatar-<color> in layout.css. */
.cl-av {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-display); font-size: 0.82rem;
}

.cl-emblem-edit { position: relative; flex: none; }
.cl-emblem-editbtn {
  position: absolute; right: -4px; bottom: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--bg-1);
  background: var(--bronze-gradient); color: var(--on-bronze);
  display: grid; place-items: center;
  font-size: 0.78rem; cursor: pointer; box-shadow: var(--shadow-1);
}
.cl-icon-pick {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 10px;
  width: 232px; padding: 8px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-2);
}
/* Fixed 40px tracks, not 1fr: emoji-presentation glyphs would stretch a 1fr column. */
.cl-icon-grid {
  display: grid; grid-template-columns: repeat(5, 40px);
  gap: 4px; justify-content: center;
}
.cl-emblem-photo { border-top: 1px solid var(--divider); padding-top: 8px; }
.cl-emblem-photo-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.cl-emblem-hint { white-space: nowrap; }
.cl-emblem-photo-acts { display: flex; gap: 6px; }
/* Override layout.css .btn width:100% at <=640 so these two don't stack. */
.cl-emblem-photo-acts > .btn { flex: 1 1 auto; width: auto; }
.cl-icon-opt {
  all: unset; cursor: pointer;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 1.25rem; border-radius: var(--radius-m);
  transition: background 0.12s;
}
.cl-icon-opt:hover { background: var(--bg-3); }
.cl-icon-opt.is-active {
  background: color-mix(in srgb, var(--bronze) 22%, transparent);
  box-shadow: inset 0 0 0 1px var(--bronze);
}

.cl-role-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 24px; border-top: 1px solid var(--divider);
}
.cl-role-bar-lbl {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.cl-role-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-m);
}
.cl-role-opt {
  all: unset; cursor: pointer;
  padding: 5px 12px; border-radius: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-2);
  transition: background 0.12s, color 0.12s;
}
.cl-role-opt:hover { color: var(--ink); }
.cl-role-opt.is-active { background: var(--bronze-gradient); color: var(--on-bronze); }
.cl-role-opt:disabled { cursor: not-allowed; opacity: 0.4; color: var(--ink-3); }
.cl-role-opt:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: -2px; }
.cl-role-hint { flex: 1; min-width: 180px; }
.cl-role-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  padding: 1px 8px; border-radius: 100px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--border);
}
.cl-role-badge.bronze {
  background: color-mix(in srgb, var(--bronze) 18%, transparent);
  color: var(--bronze-2); border-color: color-mix(in srgb, var(--bronze) 40%, transparent);
}
.cl-role-badge.lapis {
  background: color-mix(in srgb, var(--lapis) 16%, transparent);
  color: var(--lapis-2); border-color: color-mix(in srgb, var(--lapis) 40%, transparent);
}

.cl-menu-wrap { position: relative; }
.cl-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  /* Desktop earns the space (owner ask); phones still clamp to the viewport. */
  width: 720px; max-width: 92vw; padding: 12px;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-m); box-shadow: var(--shadow-2);
  text-align: left;
}
/* Below desktop the ~147px .cl-menu-wrap must not be the panel's containing block — the
   panel is far wider than the button it hangs from. Each breakpoint picks its own anchor. */
@media (max-width: 1024px) {
  /* Tablet: the actions column is narrow here, so the CARD is the anchor — the panel drops
     under the header at card width and cannot overflow either edge. */
  .cl-head { position: relative; }
  .cl-head-actions > .cl-menu-wrap { position: static; }
  .cl-menu {
    position: absolute; z-index: 550;
    top: 100%; left: 0; right: 0;
    width: auto; max-width: none;
    transform: none;
    max-height: min(74vh, 560px); overflow-y: auto;
  }
}
@media (max-width: 640px) {
  /* Phones: the actions row is full width, so anchor tight under the buttons themselves. */
  .cl-head-actions { position: relative; }
  .cl-menu { top: calc(100% + 6px); max-height: 70vh; }
  .cl-menu-list { max-height: 42vh; }
}

.cl-menu-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.cl-menu-search {
  width: 100%; box-sizing: border-box;
  padding: 6px 14px 6px 34px; border-radius: 100px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
  font: inherit; font-size: 0.84rem;
  margin-bottom: 10px;
  background-image: var(--search-icon);
  background-repeat: no-repeat;
  background-position: left 13px center;
  background-size: 13px 13px;
}
.cl-menu-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.cl-menu-row { display: flex; align-items: center; gap: 12px; }
.cl-menu-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px; }
/* display:block: .cl-player-link is `all: unset` so it would wrap a long handle instead of ellipsising. */
.cl-menu-name .cl-player {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-menu-name > .muted { flex: none; }
/* Override layout.css .btn width:100% at <=640 (else it overhangs the popover); two classes wins on specificity. */
.cl-menu-row > .btn { flex: none; width: auto; white-space: nowrap; }
.cl-menu-note { margin: 0; padding: 8px 2px; }
.cl-menu-sub {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider);
}
.cl-menu-subhead {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}

.cl-xbtn {
  appearance: none; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-3); font: inherit; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.cl-xbtn:hover { background: var(--bg-2); color: var(--ink); border-color: var(--divider); }

/* ONE card holding a chrome-less panel, so .cl-panel carries no border/bg/padding of its own. */
.cl-overview { margin-bottom: 20px; }
/* min-width:0 so long member names ellipsise instead of widening the track. */
.cl-panel { min-width: 0; }
.cl-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}

.cl-charter-text { margin: 4px 0 0; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* Charter/motto editing styles live in layout.css (.inline-ed-*, one skin for the shared editor). */

/* Scrolling lists whose rows OPEN with an avatar chip. The staff ring is a box-shadow drawn
   1.5px OUTSIDE the chip, and `overflow-y: auto` promotes overflow-x to auto — so a row flush
   against the content edge has that ring sliced flat, and the clip cannot be turned off without
   losing the scroll. Widen the BOX instead: negative margin then equal padding puts the clip
   edge outside the ring while the row stays visually flush. Plain padding would indent it.
   .cl-members-list carries its own copy at 6px. */
.cl-roster,
.cl-notif-list,
.cl-menu-list { margin-left: -3px; padding-left: 3px; }

.cl-roster {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 340px; overflow-y: auto; overflow-x: hidden; padding-right: 4px;
}
.cl-roster-row { display: flex; align-items: center; gap: 10px; }
.cl-roster-name { flex: 1; min-width: 0; }
.cl-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--bg-3); border: 1px solid var(--border);
}
.cl-dot.on { background: var(--laurel-2); border-color: var(--laurel-2); }

.cl-ann-card { margin-bottom: 20px; }
.cl-ann-compose { display: flex; gap: 8px; margin-bottom: 12px; }
.cl-ann-field {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 9px 12px; border-radius: var(--radius-s);
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
  font: inherit; font-size: 0.9rem;
}
.cl-ann-field::placeholder { color: var(--ink-4); }
.cl-ann-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 420px; overflow-y: auto; overflow-x: hidden;
}
.cl-ann {
  display: flex; gap: 10px; padding: 10px 12px;
  background: color-mix(in srgb, var(--bronze) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--bronze) 22%, transparent);
  border-radius: 10px;
}
.cl-ann-pin { flex: none; font-size: 0.95rem; line-height: 1.5; }
.cl-ann-body { flex: 1; min-width: 0; }
.cl-ann-text { font-size: 0.9rem; line-height: 1.45; text-wrap: pretty; }
.cl-ann-meta { margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-ann-del { width: 26px; height: 26px; font-size: 13px; align-self: flex-start; }

.cl-comms {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; margin-bottom: 28px; align-items: start;
}
@media (max-width: 768px) { .cl-comms { grid-template-columns: 1fr; } }
/* Fixed height so the two columns stay level and each list scrolls itself. */
.cl-notifs { display: flex; flex-direction: column; height: 460px; overflow: hidden; }
.cl-notifs > .cl-eyebrow { flex: none; }
.cl-notif-list {
  display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
}
/* Feed and notification rows are ONE rule so the two side-by-side lists match. */
.cl-notif,
.cl-feed-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-m);
}
.cl-notif-ico {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-m);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--lapis) 15%, transparent); font-size: 0.95rem;
}
.cl-feed-row > .cl-av { width: 30px; height: 30px; }
.cl-notif-body,
.cl-feed-row > div {
  flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.4;
  text-wrap: pretty; word-break: break-word; color: var(--ink-3);
}
.cl-notif-body b { color: var(--ink-2); }
.cl-notif-at,
.cl-feed-at { flex: none; font-size: 0.7rem; }

/* Scoped to the feed/notification lists so the no-clan card (.cl-card.cl-empty) keeps its block layout. */
.cl-notif-list > .cl-empty {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px 16px; color: var(--ink-2);
}
.cl-empty-ico {
  width: 46px; height: 46px; margin-bottom: 4px;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--bronze) 12%, transparent);
  color: var(--bronze); font-size: 1.15rem;
}
.cl-empty-title { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.cl-empty-sub { font-size: 0.82rem; max-width: 30ch; line-height: 1.45; text-wrap: pretty; }

/* pointer-events:none — the backdrop only positions the window and must not swallow clicks behind it. */
.cl-win-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: transparent; pointer-events: none;
}
.cl-members-win {
  pointer-events: auto;
  position: relative;
  width: 720px; max-width: calc(100vw - 40px); min-width: 340px;
  height: auto; max-height: 92vh; min-height: 420px;
  resize: both;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-l); box-shadow: var(--shadow-2);
  overflow: hidden; display: flex; flex-direction: column;
  animation: cl-win-in 180ms ease-out both;
}
/* Decorative drag grip; pointer-events:none so the header behind captures the drag. */
.cl-members-win::before {
  content: "\283F";
  position: absolute; top: 12px; left: 8px; z-index: 2;
  font-size: 0.8rem; line-height: 1;
  color: var(--ink-3); opacity: 0.55;
  pointer-events: none;
}
@keyframes cl-win-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cl-members-win { animation: none; } }
.cl-members-win.is-min { height: auto !important; min-height: 0 !important; resize: none; }
.cl-members-win.is-min .cl-members-body { display: none; }
/* Phones: full-width bottom sheet — a saved drag position must not apply (inline left/top). */
@media (max-width: 768px) {
  .cl-win-backdrop { padding: 0; align-items: flex-end; }
  .cl-members-win {
    width: 100vw; max-width: 100vw; min-width: 0;
    max-height: 88vh; min-height: 0;
    resize: none;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }
  .cl-members-win::before { display: none; }
  .cl-win-head { cursor: default; }
}

.cl-win-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--divider);
  cursor: move; user-select: none; touch-action: none;
}
.cl-win-idbox { display: flex; align-items: baseline; gap: 5px 10px; flex-wrap: wrap; min-width: 0; }
.cl-win-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); line-height: 1.1; }
.cl-win-sub { font-size: 0.74rem; color: var(--laurel-2); }
.cl-win-headbtns { display: flex; align-items: center; gap: 4px; flex: none; }
.cl-members-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 16px;
}
.cl-members-body .cl-menu-search { margin-bottom: 0; }
.cl-members-list {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0 -6px; padding: 0 6px;
}
.cl-member-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-m);
}
.cl-member-row:hover { background: var(--bg-2); }
.cl-member-row.me { background: color-mix(in srgb, var(--bronze) 10%, transparent); }
.cl-member-id { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cl-member-id > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-member-acts { display: flex; gap: 6px; flex: none; }
/* btn-xs is a 0.65rem chip; these are the row's only controls and need a real hit area. */
.cl-member-acts .btn { font-size: 0.75rem; padding: 5px 11px; }

.cl-inv-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--divider);
}
.cl-inv-card .cl-inv-row:first-of-type { border-top: 0; padding-top: 0; }
.cl-inv-text { flex: 1; min-width: 200px; color: var(--ink-2); font-size: 0.9rem; text-align: left; }
.cl-inv-acts { display: flex; gap: 8px; flex: none; }

/* Names that could not be resolved render as plain text, not a profile link. */
.cl-player { font-weight: 600; color: var(--ink); }

@media (max-width: 640px) {
  .cl-head { padding: 16px; gap: 14px; }
  .cl-role-bar { padding: 12px 16px; }
  .cl-overview, .cl-ann-card, .cl-notifs { padding: 16px; }
  .cl-notifs { height: 380px; }
  .cl-win-backdrop { padding: 8px; }
  .cl-members-win {
    width: 100%; min-width: 0; height: 92vh; min-height: 0; resize: none;
  }
  /* The actions are icon-only here (DataCard.actionBtn), so they fit beside the name. */
  .cl-member-row { gap: 8px; padding: 6px; }
  .cl-member-acts { gap: 4px; }
  .cl-member-acts .btn { padding: 5px 8px; }
}