/* SQUAD (2026-11-02, the value update's slice 6 -- HANDOFF_sq_v2,
   screens/squad.js): the shared kit's rows, badges and bar, and the
   tab's own screens. The app's colours only; a fall is grey (call 8). */

/* ───────────────────────── Rankings' header button (A1, 2026-11-05)
   WAS the Squad · Boards · Friends bar (`.sq-tabs`): the hub's door. */
/* 2026-11-09: a 1c raised tile (the Rankings handoff v1, R1) */
.sq-hubbtn { display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 12px; border-radius: 14px;
  background: var(--c1-tile); border: 1px solid var(--c1-tile-line);
  box-shadow: var(--c1-tile-lift); color: var(--c1-ink); font: inherit;
  font-size: 15px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.sq-hubbtn svg { width: 20px; height: 20px; flex: none; fill: none;
  stroke: var(--c1-icon); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
/* A9: the requests waiting, on the Friends row */
/* 2026-11-09 (C9): solid blue, the 1c "chosen" -- WAS the accent */
.sq-count { flex: none; display: inline-flex; align-items: center;
  justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
  box-sizing: border-box; border-radius: 12px; background: var(--c1-on);
  border: 1px solid var(--c1-on-line); color: #fff; font-size: 13.5px;
  font-weight: 800; }

/* ───────────────────────── the kit: avatar, badge, T pill */
.sq-av { width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--line); display: inline-flex; align-items: center;
  justify-content: center; font-size: 15px; font-weight: 800;
  color: #c3c8d1; }
.sq-badge { width: 44px; height: 44px; flex: none; border-radius: 13px;
  box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bc) 13%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--bc) 53%, transparent); }
.sq-badge svg { width: 22px; height: 22px; fill: none; stroke: var(--bc);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sq-badge.sm { width: 30px; height: 30px; border-radius: 9px; }
.sq-badge.sm svg { width: 15px; height: 15px; }
/* the T chip (2026-11-09, R1: WAS a round pill) */
.sq-t { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 28px; padding: 0 6px; box-sizing: border-box;
  border-radius: 9px; background: #172536; border: 1px solid #2a3c58;
  font-size: 15px; font-weight: 800; color: var(--c1-icon);
  white-space: nowrap; }

/* ───────────────────────── the kit: a list's card and its heads */
.sq-list { padding: 4px 12px; border-radius: 22px; background: var(--c1-card);
  border: 1px solid var(--c1-card-line); }
.sq-head { display: flex; align-items: center; gap: 6px; padding: 0 6px 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c1-hint); white-space: nowrap; }

/* ───────────────────────── the kit: a player row (sqRow) */
/* 2026-11-09: the 1c row (R1): place, name over its move, the T chip */
.sq-row { display: flex; align-items: center; gap: 6px; min-height: 58px;
  width: 100%; box-sizing: border-box; padding: 8px 6px; margin: 0;
  border: 0; border-top: 1px solid #22324a; background: transparent;
  color: var(--c1-ink); font: inherit; text-align: left; }
.sq-list > .sq-row:first-child, .sq-head + .sq-row { border-top: 0; }
button.sq-row { cursor: pointer; }
.sq-rk { width: 26px; flex: none; font-size: 16px; font-weight: 800;
  color: #9aa6b6; }
.sq-nm { flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; }
.sq-nl { display: flex; align-items: center; gap: 6px; min-width: 0;
  white-space: nowrap; }
.sq-nl b { font-size: 16px; font-weight: 800; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; }
.sq-cty { font-size: 12px; font-weight: 700; color: var(--c1-hint); }
.sq-you, .sq-role { font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--c1-icon); }
.sq-rel { margin-top: 2px; font-size: 13px; font-weight: 700;
  color: #9aa6b6; }
/* the move (§2.3): green up, red down, or "steady" -- WAS no move line,
   and "call 8: a fall is grey, never red", ruled again by this handoff */
.sq-mv { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px;
  font-size: 13px; font-weight: 700; color: #9aa6b6; white-space: nowrap; }
.sq-mv b { font-weight: 700; }
.sq-mv svg { width: 10px; height: 10px; fill: currentColor; }
.sq-mv.up { color: #6fcf97; }
.sq-mv.down { color: var(--c1-red); }
.sq-tc { width: 48px; flex: none; display: flex; justify-content: center; }
.sq-up { color: var(--unlock-text); }
.sq-steady { color: #c3c8d1; font-size: 13.5px; font-weight: 700; }
/* call 8: a fall is grey, never red */
.sq-down { color: var(--quiet); font-size: 13.5px; font-weight: 700; }
/* your row: solid blue (1c "chosen") */
.sq-row.me, .sq-srow.me { margin: 6px -2px 2px; padding: 8px;
  width: calc(100% + 4px); border: 1px solid var(--c1-on-line);
  border-radius: 16px; background: var(--c1-on);
  box-shadow: var(--c1-on-lift); }
.sq-row.me + .sq-row, .sq-srow.me + .sq-srow { border-top-color: transparent; }
.sq-row.me .sq-rk, .sq-row.me .sq-nl b, .sq-srow.me .sq-rk,
.sq-srow.me .sq-nm b, .sq-row.me .sq-role, .sq-row.me .sq-cty { color: #fff; }
.sq-row.me .sq-you, .sq-row.me .sq-role { padding: 1px 5px; border-radius: 8px;
  background: rgba(255, 255, 255, .2); color: #fff; }
.sq-row.me .sq-mv.up, .sq-srow.me .sq-mv.up { color: #c9f5dc; }
.sq-row.me .sq-mv.steady, .sq-srow.me .sq-mv.steady,
.sq-srow.me .sq-meta { color: rgba(255, 255, 255, .85); }
.sq-row.me .sq-rel { color: rgba(255, 255, 255, .92); }
.sq-row.me .sq-t, .sq-srow.me .sq-t { background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .35); color: #fff; }
.sq-row.pin { position: sticky; bottom: calc(var(--tabspace, 90px) + 8px);
  z-index: 8; }
/* call 12: out of form, greyed, its reliability shown */
.sq-row.off .sq-rk, .sq-row.off .sq-nl b { color: #9aa6b6; }
.sq-row.off .sq-t { color: #9aa6b6; }
.sq-av + .sq-nm { margin-left: 4px; }

/* ───────────────────────── the kit: a squad row (sqSquadRow) */
.sq-srow { display: flex; align-items: center; gap: 12px; min-height: 66px;
  width: 100%; box-sizing: border-box; padding: 0; margin: 0; border: 0;
  border-top: 1px solid var(--grid); background: transparent;
  color: var(--ink); font: inherit; text-align: left; }
.sq-list > .sq-srow:first-child, .sq-head + .sq-srow { border-top: 0; }
button.sq-srow { cursor: pointer; }
.sq-srow .sq-nm b { font-size: 16px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sq-meta { font-size: 12.5px; color: var(--quiet); margin-top: 2px; }
.sq-srow.board { gap: 6px; min-height: 58px; padding: 8px 6px;
  border-top-color: #22324a; }
.sq-srow.board .sq-nm b { font-size: 16px; font-weight: 800; }
.sq-srow.board .sq-meta { display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: #9aa6b6; margin-top: 2px; }
.sq-srow.board .sq-meta .sq-mv { margin-top: 0; }
.sq-srow.board .sq-meta .sq-mv b { font-size: inherit; font-weight: 700;
  white-space: nowrap; }
.sq-srow.me .sq-meta > span { color: rgba(255, 255, 255, .85); }
.sq-srow.board .sq-badge.sm { margin-right: 4px; }
.sq-pill { flex: none; display: inline-flex; align-items: center;
  height: 22px; padding: 2px 9px; box-sizing: border-box; border-radius: 11px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
  background: rgba(47, 138, 224, .12); border: 1px solid rgba(47, 138, 224, .38);
  color: var(--accent-soft); }
.sq-pill.open { background: rgba(155, 231, 192, .10);
  border-color: rgba(155, 231, 192, .35); color: var(--unlock-text); }
.sq-pill.full, .sq-pill.private { background: rgba(255, 255, 255, .04);
  border-color: #2c4058; color: var(--quiet); }

/* ───────────────────────── the tab's own screens
   2026-11-09 (the Rankings handoff v1, C1-C10, E13-E17): the 1c look --
   the hero a card, every row a raised tile (`sqTile`, onec.css
   `.c1-tile`), the one action the bright button (`.c1-pri`), a field a
   sunken box. WAS the calm cards, boxed lists, outline pills. */
/* R1's header: the title, "Squad & friends" and the person button on
   one line (§2.14; the reference's 28 px title) */
.sq-page > .c-titlerow { align-items: center; gap: 8px; }
.sq-page > .c-titlerow .c-title { font-size: 28px; letter-spacing: -.02em;
  white-space: nowrap; }
.sq-page > .c-titlerow .c-right { display: flex; align-items: center;
  gap: 8px; }
/* the person button: a 44 px raised square, its glyph blue (R1) */
.sq-mebtn { flex: none; display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; min-height: 44px;
  margin: 0; padding: 0; border-radius: 14px; background: var(--c1-tile);
  border: 1px solid var(--c1-tile-line); box-shadow: var(--c1-tile-lift);
  cursor: pointer; }
.sq-mebtn svg { width: 22px; height: 22px; fill: none;
  stroke: var(--c1-icon); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.sq-h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.sq-h1 { margin: 0; font-size: 28px; line-height: 1.12; font-weight: 800;
  letter-spacing: -.02em; }
/* C1's card (and C7's): the 1c card, not the calm hero */
.c-hero.sq-hero { gap: 0; padding: 20px 18px 18px; border-radius: 22px;
  background: var(--c1-card); border: 1px solid var(--c1-card-line);
  box-shadow: none; }
.sq-hero .sq-h1 { margin-top: 16px; font-size: 22px; line-height: 1.25;
  letter-spacing: -.01em; }
.sq-hero .c-sub { margin-top: 8px; font-size: 15.5px; line-height: 1.5;
  color: var(--c1-sub); }
.sq-hero.sq-wait .sq-h1 { margin-top: 0; font-size: 24px; }
.sq-faces { display: flex; padding-left: 8px; }
.sq-face { width: 46px; height: 46px; margin-left: -8px; border-radius: 50%;
  box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center; font-size: 17px; font-weight: 800;
  color: #c9d3e0; background: var(--c1-tile); border: 2px solid var(--c1-card);
  box-shadow: 0 0 0 1px var(--c1-tile-line); }
.sq-face.me { color: #fff; background: var(--c1-on);
  box-shadow: 0 0 0 1px var(--c1-on-line); }
.sq-ticks { list-style: none; margin: 16px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.sq-ticks li, .sq-li { display: flex; gap: 12px; align-items: flex-start;
  margin: 0; font-size: 15.5px; color: var(--c1-ink); line-height: 1.4; }
/* a tick in its soft green ring; a lock grey */
.sq-tick, .sq-lock { flex: none; width: 22px; height: 22px; margin-top: -1px;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; }
.sq-tick { border-radius: 50%; padding: 4px; color: #6fcf97;
  background: rgba(111, 207, 151, .16); }
.sq-lock { padding: 2px; color: var(--c1-hint); }
.sq-ctick { flex: none; width: 20px; height: 20px; color: var(--c1-icon); }
.sq-tick svg, .sq-lock svg, .sq-ctick svg { width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  stroke-linejoin: round; }
.sq-foot { flex: 1; }
/* what is shared (C2, C3, C6): a flat card on the sheet */
.sq-shared { display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: 18px; background: var(--c1-card);
  border: 1px solid var(--c1-card-line); box-shadow: none; }
.sq-cap { margin: 6px 0 0; font-size: 12.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c1-lab); }
.sq-cap.ok { margin-top: 0; color: #6fcf97; }
.sq-stitle { margin: 0 0 4px; font-size: 24px; font-weight: 800;
  letter-spacing: -.01em; }
/* a sheet in the 1c look: its ground, its words, a sunken box */
.sq-sheet .sheet.c-sheet { background: var(--c1-sheet);
  border-top: 1px solid var(--c1-sheet-line); }
.sq-sheet .c-sheet > * + * { margin-top: 12px; }
.sq-sheet .c-sub { font-size: 15px; line-height: 1.45; color: var(--c1-sub); }
.sq-sheet .c-ofl { font-size: 13.5px; font-weight: 800; color: var(--c1-sub); }
/* E15's label is the 1c small capitals (the board's "DISPLAY NAME") */
.sq-sheet[data-sheet="name"] .c-ofl { font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c1-lab); }
.sq-sheet input.c-ofbox, .sq-csheet input[type="search"] { width: 100%;
  height: 56px; min-height: 56px; box-sizing: border-box; padding: 0 16px;
  border-radius: 14px; background: var(--c1-field);
  border: 1px solid var(--c1-field-line); box-shadow: var(--c1-field-sink);
  color: var(--c1-ink); font: inherit; font-size: 17px; font-weight: 600; }
.sq-sheet input.c-ofbox::placeholder,
.sq-csheet input[type="search"]::placeholder { color: #8294ad; }
.sq-help { margin: 0; font-size: 13px; color: var(--c1-hint); line-height: 1.45; }
.sq-center { text-align: center; }
.sq-ptitle { margin: 4px 0 8px; font-size: 28px; font-weight: 800;
  letter-spacing: -.02em; }
/* the bright button: the screen's one action (sheets: at the foot) */
.sq-pri.c1-pri { margin: 0; cursor: pointer; }
.sq-sheet .sq-pri.c1-pri { margin-top: 24px; }
/* raised rows (C9, C10, E13, E14): one tile a row, 10 px apart */
.sq-tiles { display: flex; flex-direction: column; gap: 10px; }
.sq-tile.c1-tile { margin: 0; cursor: pointer; }
div.sq-tile.c1-tile { cursor: default; }
div.sq-tile.c1-tile:active { transform: none;
  box-shadow: var(--c1-tile-lift); }
.sq-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sq-tx > b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.sq-ts { margin-top: 2px; font-size: 13.5px; font-weight: 400;
  line-height: 1.35; color: var(--c1-sub); }
.sq-tv { flex: none; margin-right: 2px; font-size: 15.5px; font-weight: 700;
  color: var(--c1-sub); }
.sq-tv.accent { color: var(--c1-icon); font-weight: 800; }
.sq-ic { flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(140, 196, 245, .14); }
.sq-ic svg { width: 23px; height: 23px; fill: none; stroke: var(--c1-icon);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sq-tile .c1-go svg { width: 14px; height: 14px; fill: none; stroke: #e1e8f2;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sq-sharedrow.c1-tile { min-height: 56px; }
/* C7: "Send the link again", a raised tile */
.sq-again.c1-tile, .sq-leave.c1-tile { justify-content: center; margin: 0;
  text-align: center; cursor: pointer; }
/* Leave Squad: red text on a raised tile (§1: "Leave (Leave squad / Leave
   Squad)" is red), the only red on these screens but a move down's */
.sq-leave.c1-tile { color: var(--c1-red); }
/* the country picker (C5): the server's list, the choice ticked blue */
.sq-clist { display: flex; flex-direction: column; max-height: 52vh;
  overflow-y: auto; margin-top: 8px; }
.sq-crow { display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; margin: 0; padding: 0 6px; border: 0; border-radius: 0;
  border-top: 1px solid #22324a; background: transparent;
  color: var(--c1-ink); font: inherit; font-size: 16.5px; font-weight: 600;
  text-align: left; cursor: pointer; }
.sq-crow:first-child { border-top: 0; }
.sq-crow.on { font-weight: 800; }