/* Clans (#/clans) — «КЛАНЫ», drawn from the Claude Design console mock.
   Every number below is copied from the mock's inline styles, not eyeballed:
   the mock writes exact pixels, so a port that guesses is a port that drifts.
   Scoped under .cl-host / .cl-* so the file is inert elsewhere.

   THE LADDER, and why it is not the mock's. The mock has two readings — a wide
   one (four panels) and a compact one (a single scrolling column) — and it
   never drew the width this console actually has at a 1280 window. The mock's
   laptop gives the scene 900px because its context column is 300; ours is 344
   at 1280, so the scene is 858. The thresholds below are therefore the shell's
   own documented budget (shell.css, «WINDOW CLASSES»): three or more columns
   need >= 900 scene pixels, two need >= 620. Four columns at 858 would be
   204px each, which clips the roster's names and the board's clan names.

   Read narrow-first: the base rules are the one-column phone reading and the
   two @container blocks add the wide ones. */

#view.cl-host,
#scene.shell-scene #view.cl-host {
  max-width: none;
  padding: 12px 12px 16px;
  overflow-x: hidden;
}
.cl-screen { display: grid; grid-template-rows: auto auto; gap: 11px; min-width: 0; }

/* === head strip ===
   mock: padding 16px 20px, r18, 1px rgba(167,139,250,.26), a 115deg gradient
   and an 80px sheen that crosses it every 7s. */
.cl-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(167, 139, 250, 0.26);
  background: linear-gradient(115deg, rgba(40, 24, 74, 0.8), rgba(18, 12, 34, 0.6));
}
/* No clan yet: the mock swaps the violet rim for a dashed gold one — the strip
   is an invitation, not a status. */
.cl-hero.is-none {
  border-style: dashed;
  border-color: rgba(241, 193, 82, 0.34);
  background: linear-gradient(115deg, rgba(40, 28, 12, 0.6), rgba(18, 12, 34, 0.6));
}
.cl-hero-skel { width: 100%; height: 62px; margin: 0; }
.cl-hero-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: cl-sheen 7s ease-in-out infinite;
}
@keyframes cl-sheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(320%) skewX(-18deg); }
}
.cl-hero-tag {
  position: relative;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(241, 193, 82, 0.5);
}
.cl-none-glyph { position: relative; flex: 0 0 auto; font-size: 30px; line-height: 1; }
/* On a phone the head is two rows and not four: the tag and the name share the
   first, the two numbers and the invite share the second. `flex: 1 1 60%` on
   the name column is what forces that break — the mock's phone head is the
   same shape at 86px tall, and a 236px one costs the roster three rows. */
.cl-hero-col { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 55%; }
.cl-hero-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-hero.is-none .cl-hero-name { font-size: 19px; font-weight: 800; }
.cl-hero-sub { font-size: 11px; color: var(--text-soft); }
.cl-gap { flex: 1 1 auto; }

/* stat tiles — mock: 9px 15px, r11, mono 19/700 over a 9px .1em uppercase label */
.cl-hero-stats { position: relative; display: flex; gap: 9px; flex: 1 1 auto; }
.cl-stat {
  flex: 1 1 auto;
  padding: 9px 12px;
  border-radius: var(--r-md);
  text-align: center;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.24);
}
.cl-stat.is-gold { background: rgba(241, 193, 82, 0.1); border-color: rgba(241, 193, 82, 0.3); }
.cl-stat-num { font-size: 19px; font-weight: 700; line-height: 1.15; }
.cl-stat.is-gold .cl-stat-num { color: var(--gold); }
.cl-stat-lbl {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.cl-hero-act {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
  padding: 9px 17px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-strong);
  background: rgba(20, 13, 38, 0.6);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
@media (hover: hover) {
  .cl-hero-act:hover { border-color: rgba(167, 139, 250, 0.6); }
}
.cl-hero-act:active { transform: scale(0.96); }

/* === the board of panels ===
   One column and a scrolling scene until 620; the frame readings arrive below. */
.cl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; min-width: 0; }

.cl-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: rgba(18, 12, 34, 0.56);
  overflow: hidden;
}
.cl-panel-war { border-color: rgba(255, 93, 108, 0.26); background: rgba(30, 14, 26, 0.5); }
.cl-panel-chat { border-color: rgba(241, 193, 82, 0.24); }
.cl-join-glow { border-color: rgba(241, 193, 82, 0.5); box-shadow: 0 0 34px rgba(241, 193, 82, 0.14); }

.cl-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
}
.cl-panel-war .cl-panel-head { border-bottom-color: rgba(255, 93, 108, 0.2); }
.cl-panel-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cl-panel-war .cl-panel-title { color: #ff8a94; }
.cl-panel-chat .cl-panel-title { color: var(--gold); }
.cl-panel-note { font-size: 9px; color: var(--text-faint); white-space: nowrap; }
/* The body sizes to its content; the scene scrolls the page. Inner scroll
   was the anti-pattern that stranded the «Создать клан» button below the
   fold of a box whose scroller is invisible on macOS. */
.cl-panel-body { flex: 1 1 auto; min-height: 0; padding: 7px 8px; }
.cl-panel-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px 11px;
  border-top: 1px solid var(--hairline);
}
.cl-panel-foot .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 12px; }
.cl-list { display: flex; flex-direction: column; gap: 3px; }

/* === war panel ===
   A LEAGUE week, not a duel: `chess_clan_war_points` scores every clan against
   the same week and there is no pairing table, so the two sides are this clan
   and the clan directly above it in the table. */
.cl-war-body { padding: 14px; display: flex; flex-direction: column; gap: 13px; }
.cl-war-clock { font-size: 11px; font-weight: 700; color: var(--danger); white-space: nowrap; }
.cl-war-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-war-side { text-align: center; min-width: 0; }
.cl-war-tag {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #67e8f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-war-tag.is-us { color: var(--gold); }
.cl-war-pts { font-size: 27px; font-weight: 700; line-height: 1.1; }
.cl-war-vs { font-family: var(--font-display); font-size: 12px; color: var(--text-faint); }
.cl-war-bar { height: 7px; border-radius: 4px; background: rgba(103, 232, 249, 0.22); overflow: hidden; }
.cl-war-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), #e0a23a);
  box-shadow: 0 0 14px rgba(241, 193, 82, 0.5);
  transition: width var(--dur-slow) var(--ease-out);
}
.cl-war-rule { font-size: 10px; line-height: 1.5; color: var(--text-soft); }
.cl-war-tiles { display: flex; gap: 9px; }
.cl-war-tile {
  flex: 1 1 0;
  padding: 9px 6px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 93, 108, 0.09);
}
.cl-war-tile-num { font-size: 19px; font-weight: 700; line-height: 1.1; }
.cl-war-tile-lbl { margin-top: 2px; font-size: 9px; color: var(--text-faint); }
.cl-war-cta {
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff5d6c, #c2334a);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: transform var(--dur-fast);
}
@media (hover: hover) {
  .cl-war-cta:hover { transform: translateY(-2px); }
}
.cl-war-cta:active { transform: scale(0.97); }
.cl-war-sub {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* === «Кто тянет войну» + «Твой вклад» ===
   The war panel's own roster, so it borrows the roster row's geometry (7px 9px,
   r9, 8px gap) rather than inventing a second one. Own row in gold, the same
   marker the member list uses, because it is the same claim. */
.cl-fighters { display: flex; flex-direction: column; gap: 4px; }
.cl-fighter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: rgba(255, 93, 108, 0.07);
  min-width: 0;
}
.cl-fighter.is-me { background: rgba(241, 193, 82, 0.11); border-color: rgba(241, 193, 82, 0.28); }
.cl-fighter-rank {
  flex: 0 0 auto;
  width: 16px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--text-faint);
}
.cl-fighter-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-fighter-pts { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--gold); }
/* The roll-call's quiet rows — a proven zero («ещё не приносил») or the
   honest «вне тройки» the top-three slice allows. The fighters' geometry
   with the fight colours stripped: a zero is a fact about the week, never a
   shame line. */
.cl-fighter-none { background: transparent; }
.cl-fighter-none .cl-fighter-name { color: var(--text-dim); font-weight: 600; }
.cl-fighter-note { flex: 0 0 auto; font-size: 10px; color: var(--text-faint); }
/* A fighter who left the clan mid-week: the membership row is gone, the
   points they earned are not. */
.cl-ex {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The player's own line, pulled out of the list so it is readable even when
   they are nowhere near the top three. */
.cl-mine {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(241, 193, 82, 0.24);
  background: rgba(241, 193, 82, 0.07);
}
.cl-mine-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.cl-mine-rank { font-size: 10px; color: var(--text-faint); }
.cl-mine-pts { font-size: 15px; font-weight: 700; color: var(--gold); }

/* === «сервер этого ещё не отдаёт» ===
   Not «не удалось загрузить»: the request succeeded and the field does not
   exist. The mock's own taxonomy calls this shape `wait` — it does not depend
   on the player — so it wears the violet, never the gold. */
.cl-absent {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 15px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(167, 139, 250, 0.36);
  background: rgba(167, 139, 250, 0.05);
}
.cl-absent-title { font-family: var(--font-display); font-size: 13px; font-weight: 800; line-height: 1.25; }
.cl-absent-sub { font-size: 11px; line-height: 1.55; color: var(--text-dim); }

/* === roster ===
   mock: 7px 9px, r9, 8px gap; the caller's own row is the gold one. */
.cl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  min-width: 0;
}
.cl-row.is-me { background: rgba(241, 193, 82, 0.11); border-color: rgba(241, 193, 82, 0.28); }
.cl-row-role { flex: 0 0 auto; width: 16px; font-size: 12px; text-align: center; }
.cl-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-you {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(241, 193, 82, 0.16);
  color: var(--gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cl-row-pts { flex: 0 0 auto; font-size: 10px; color: var(--text-faint); }
.cl-kick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 7px;
  border: 1px solid rgba(255, 93, 108, 0.28);
  background: rgba(255, 93, 108, 0.08);
  color: var(--danger);
  font-size: 11px;
  line-height: 1;
  transition: background var(--dur-fast);
}
/* base.css gives every button a 44px min-HEIGHT below 904px; a 22px-wide one
   would become a tall sliver rather than a target, so the width follows.
   STAYS AN @media, AND GAINS THE HEIGHT CLAUSE — for the same reason the twin
   in views/chat.css does. This is the width half of base.css's touch floor,
   which is `@media (max-width: 904px), (max-height: 500px)`: a question about
   the device, not about the scene. Converted to `@container scene` it would be
   true at a 1280px window (scene 858) and grow a header-row kick button to
   44px on a desktop that base.css leaves at 22.
   Without the height clause the sliver this comment describes was REAL, on the
   exact device base.css added its own clause for: measured at 932x430, the
   landscape size of an iPhone 14/15/16 Pro Max, `.cl-kick` rendered 22x44 —
   past 904 on width, so only the floor's height half applied. 500px is
   base.css's constant. */
@media (max-width: 904px), (max-height: 500px) {
  .cl-kick { width: 44px; height: auto; font-size: 13px; }
}
@media (hover: hover) {
  .cl-kick:hover { background: rgba(255, 93, 108, 0.2); }
}
.cl-kick:disabled { opacity: 0.4; cursor: not-allowed; }

/* === clan table === */
.cl-brow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  min-width: 0;
}
.cl-brow.is-me { background: rgba(241, 193, 82, 0.11); border-color: rgba(241, 193, 82, 0.3); }
.cl-brank { flex: 0 0 auto; width: 20px; font-size: 11px; color: var(--text-faint); text-align: center; }
.cl-brank.is-top { font-size: 12px; }
.cl-btag {
  flex: 0 0 auto;
  width: 56px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-bname {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-bpts { flex: 0 0 auto; font-size: 11px; font-weight: 700; }

/* === clan chat: the war room panel ===
   The room's look (clc-*) comes from shell.css via the `.l3-wall` wrapper —
   `:is(#ctx, .l3-wall)` was minted for exactly this second mount point. This
   block only owns the panel-side layout: the wrapper's flex column and the
   lines' scroller. The panel-scrolls-the-page law (see .cl-panel-body) is
   about ACTIONS stranded under an invisible fold; here the composer is
   pinned OUTSIDE the scroller, so only the lines fold. */
.cl-chat { display: flex; flex-direction: column; gap: 11px; padding: 14px; }
.cl-chat > .l3-wall {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}
.cl-chat .clc-list {
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* === no clan: create, join, and what a clan changes === */
.cl-none-col { display: flex; flex-direction: column; gap: 11px; min-height: 0; }
.cl-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; overflow: visible; }
.cl-card-sub { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.cl-field { display: flex; flex-direction: column; gap: 6px; }
.cl-field-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-dim); text-transform: uppercase; }
.cl-input {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--panel-soft);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.cl-input::placeholder { color: var(--text-faint); font-weight: 500; }
.cl-input:focus { border-color: rgba(241, 193, 82, 0.55); box-shadow: var(--shadow-glow-gold); background: var(--panel); }
/* 16px on touch or iOS zooms the page into the field on focus (chat.css states
   the full argument); desktop keeps the 14px above. */
@media (pointer: coarse) {
  .cl-input { font-size: 16px; }
}
.cl-tag-input { text-transform: uppercase; letter-spacing: 2.5px; }
.cl-hint { font-size: 11px; color: var(--text-faint); }
.cl-form-err {
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: rgba(255, 93, 108, 0.1);
  border: 1px solid rgba(255, 93, 108, 0.4);
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}
.cl-join-note { align-self: flex-start; }
.cl-explain { flex: 0 0 auto; }
.cl-explain-body { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-dim); text-wrap: pretty; }

/* === confirm modal === */
.cl-modal { text-align: center; }
.cl-modal-emoji { font-size: 44px; line-height: 1; display: inline-block; }
.cl-modal-title { font-size: 20px; font-weight: 800; margin: 12px 0 8px; }
.cl-modal-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; }
.cl-modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* === Gold clan-tag chip (also: chess leaderboard rows, profile head) ===
   Not this screen's any more, but four other views set the class, so the rule
   stays here rather than becoming markup that reads as styled and is not. */
.clan-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(241, 193, 82, 0.45);
  background: rgba(241, 193, 82, 0.08);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  line-height: 1.7;
  white-space: nowrap;
  flex: 0 0 auto;
}
button.clan-tag-chip { cursor: pointer; transition: transform var(--dur-med) var(--spring), box-shadow var(--dur-fast); }
@media (hover: hover) {
  button.clan-tag-chip:hover { box-shadow: var(--shadow-glow-gold); transform: translateY(-1px); }
}

/* ---------- two columns: the scene can hold a pair, not a board ---------- */
@container scene (min-width: 620px) {
  .cl-hero { flex-wrap: nowrap; gap: 20px; padding: 16px 20px; }
  .cl-hero-tag { font-size: 32px; }
  /* Measured, not guessed: at a 858px scene the three tiles want 273px and the
     row leaves them 256, so a wrapping stats block made the head 157px tall —
     two rows of chrome above a board that has no spare height. They stay on
     one line and the clan NAME gives up the width instead; it already
     ellipsizes and the tag beside it carries the identity. */
  .cl-hero-stats { flex: 0 0 auto; }
  .cl-hero-col { flex: 0 1 auto; }
  .cl-stat { flex: 0 0 auto; padding: 9px 15px; }
  .cl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cl-grid.is-none { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ---------- the mock's frame: four columns, the page scrolls ----------
   `three columns need >= 900` (shell.css). At 1018 — a 1440 window, which is
   the width the mock itself was drawn at — that is four columns of 237px, the
   design's own arithmetic. The view grows to content and the scene scrolls:
   the old height-lock (height:100% + overflow:hidden on the host and screen,
   align-items:stretch on the grid) was the prison that stranded content below
   the fold of a box whose scroller is invisible on macOS. */
@container scene (min-width: 900px) {
  #view.cl-host,
  #scene.shell-scene #view.cl-host { padding: 16px 18px; }
  .cl-screen { gap: 13px; }
  .cl-grid {
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 0.94fr) minmax(0, 1.05fr) minmax(0, 0.92fr);
    align-items: start;
  }
  .cl-grid.is-none { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}