/* SQUADS (2026-11-02, the value update's slice 6 -- HANDOFF_sq_v2,
   screens/squads.js): find, create, a squad's profile, my squad, its
   settings, requests and members. Drawn over the kit's rows and badges
   (squad.css); every class here is `sqg-`.

   2026-11-09, THE 1C LOOK (the owner's handoff "Rankings tab, 1c look (9
   Nov 2026, FINAL)", boards D1-D27, F1-F16, F21): onec.css's parts --
   raised tiles and chips, solid blue chosen, sunken fields, the one bright
   button -- placed and sized here off the reference boards. RED TEXT only
   where §1 allows it, and only in the three rules marked so below: Leave
   squad and Remove from squad (`.sqg-red`), and a field the server refused
   (`.sqg-ferr`, the box's edge). WAS: no red at all, a refused word amber. */

.c-page.sqg { gap: 14px; }
.sqg .c-title { font-size: 28px; letter-spacing: -.02em; }
.sqg .c-titlerow + * { margin-top: -4px; }
.sqg-ico { width: 20px; height: 20px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.sqg-line { margin: 0; color: var(--c1-sub); font-size: 15px;
  line-height: 1.45; }
.sqg-line.c { text-align: center; }
.sqg-line.hint { color: var(--c1-hint); font-size: 13px; }
.sqg-line.sub { color: var(--c1-sub); font-size: 15px; }
.sqg-line.lead { margin-top: -6px; }
.sqg-h.c1-lab { margin: 6px 0 -4px; }
/* ⚠ `width: auto`: the shell sizes a bare `button` to the column. */
button.sqg-fbtn, button.sqg-pill, button.sqg-chip, button.sqg-segb,
button.sqg-kudos, button.sqg-bpick, button.sqg-dots, button.sqg-reset,
button.sqg-copy { width: auto; }

/* ───────── the parts: a raised tile, its words, value, count, chevron */
.sqg-tiles { display: flex; flex-direction: column; gap: 10px; }
button.sqg-tile { margin: 0; cursor: pointer; font-weight: 800; }
.sqg-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sqg-tt { font-size: 16px; font-weight: 800; line-height: 1.25;
  overflow-wrap: anywhere; }
.sqg-ts { margin-top: 2px; font-size: 13.5px; font-weight: 400;
  line-height: 1.35; color: var(--c1-sub); }
.sqg-tile.on .sqg-ts { color: rgba(255, 255, 255, .92); }
.sqg-tv { flex: none; margin-right: 2px; font-size: 15.5px; font-weight: 700;
  color: var(--c1-sub); }
.sqg-tile.mid { justify-content: center; }
.sqg-tile.mid .sqg-tx { flex: none; text-align: center; }
.sqg-go svg { width: 14px; height: 14px; stroke-width: 2.6; }
.sqg-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; }
/* RED (§1): Leave squad, Remove from squad -- words only, never a fill */
.sqg-tt.sqg-red { color: var(--c1-red); }

/* the round badge (D1 44, D12 52, D4 76, D14 84, its picker 38) */
.sq-badge.sqg-bdg { border-radius: 50%; border: 0; background: var(--bc); }
.sq-badge.sqg-bdg svg { stroke: #0c1420; stroke-width: 2.2; }
.sq-badge.sqg-b38 { width: 38px; height: 38px; }
.sq-badge.sqg-b38 svg { width: 20px; height: 20px; }
.sq-badge.sqg-b44 { width: 44px; height: 44px; }
.sq-badge.sqg-b44 svg { width: 24px; height: 24px; }
.sq-badge.sqg-b52 { width: 52px; height: 52px; }
.sq-badge.sqg-b52 svg { width: 28px; height: 28px; }
.sq-badge.sqg-b76 { width: 76px; height: 76px; }
.sq-badge.sqg-b76 svg { width: 40px; height: 40px; }
.sq-badge.sqg-b84 { width: 84px; height: 84px; }
.sq-badge.sqg-b84 svg { width: 44px; height: 44px; }

/* a squad's type, small: "Request", "Open", "Private", "Full" */
.sqg-pl { display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 10px; background: #172536; border: 1px solid #2a3c58;
  font-size: 12.5px; font-weight: 800; color: var(--c1-icon);
  white-space: nowrap; }

/* a flat note (D6-D10, D26, F7): nothing to tap */
.sqg-note { padding: 16px; border-radius: 18px; background: #0f1826;
  border: 1px solid #22324a; }
.sqg-note b { display: block; font-size: 17px; font-weight: 800;
  color: var(--c1-ink); }
.sqg-note span { display: block; margin-top: 4px; font-size: 14.5px;
  line-height: 1.45; color: var(--c1-sub); }

/* ───────── G1 (D1, D2, F11-F13): the box, Filters and its pills, rows */
label.sqg-search { display: flex; align-items: center; gap: 10px;
  color: var(--c1-hint); }
.sqg-search .sqg-ico { stroke: var(--c1-hint); }
.sqg-q { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0;
  background: transparent; color: var(--c1-ink); font: inherit;
  font-size: 17px; font-weight: 600; }
.sqg-q::placeholder { color: #8294ad; }
.sqg-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: -2px; }
button.sqg-fbtn.c1-tile { min-height: 44px; height: 44px; padding: 0 14px;
  gap: 8px; font-size: 15.5px; cursor: pointer; }
.sqg-fbtn .sqg-ico { width: 18px; height: 18px; stroke: var(--c1-icon);
  stroke-width: 2.2; }
.sqg-n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: 11px; background: var(--c1-icon); color: var(--c1-sheet);
  font-size: 13px; font-weight: 800; }
button.sqg-pill { display: inline-flex; align-items: center; gap: 6px;
  height: 40px; min-height: 40px; margin: 0; padding: 0 12px 0 14px;
  border-radius: 12px; background: var(--c1-on);
  border: 1px solid var(--c1-on-line); box-shadow: var(--c1-on-lift);
  color: #fff; font: inherit; font-size: 14.5px; font-weight: 800;
  cursor: pointer; }
button.sqg-pill .sqg-ico { width: 14px; height: 14px; stroke-width: 2.6; }
.sqg-res { display: flex; flex-direction: column; gap: 10px; }
.sqg-srow .sqg-tt { font-size: 16px; }
.sqg-srow .sqg-tv { font-size: 12.5px; font-weight: 800; color: var(--c1-hint); }
.sqg-ic { flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(140, 196, 245, .14); color: var(--c1-icon); }
.sqg-ic .sqg-ico { width: 23px; height: 23px; }

/* ───────── sheets (D3, D11, D19-D22, D27, F2, F3, F21) */
.sqg-sheet .sheet.c-sheet { background: var(--c1-sheet);
  border-top: 1px solid var(--c1-sheet-line); gap: 14px; }
.sqg-st.c-shtitle { margin: 0; font-size: 22px; font-weight: 800;
  overflow-wrap: anywhere; }
.sqg-shead { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; }
.sqg-shead .sqg-st { font-size: 24px; }
button.sqg-reset.c1-tile { min-height: 44px; height: 44px; padding: 0 16px;
  font-size: 15.5px; font-weight: 800; cursor: pointer; }
.sqg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.sqg-chip.c1-chip { flex: none; min-width: 62px; height: 44px;
  margin: 0; padding: 0 16px; font-size: 15.5px; text-align: center;
  cursor: pointer; }
/* "Only squads I can join": its words and the switch, in a flat card */
button.sqg-swr { display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 68px; margin: 0; padding: 2px 16px; box-sizing: border-box;
  border-radius: 18px; background: var(--c1-card);
  border: 1px solid var(--c1-card-line); color: var(--c1-ink); font: inherit;
  text-align: left; cursor: pointer; }
.sqg-swl { flex: 1; min-width: 0; }
.sqg-swl b { display: block; font-size: 16px; font-weight: 800; }
.sqg-swl span { display: block; margin-top: 2px; font-size: 13.5px;
  line-height: 1.35; color: #9aa6b6; }
.sqg-sw { flex: none; position: relative; width: 50px; height: 30px;
  box-sizing: border-box; border-radius: 15px; background: #0b1320;
  border: 1px solid var(--c1-tile-line); }
.sqg-sw::after { content: ""; position: absolute; left: 3px; top: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #6f86a6; }
.sqg-sw.on { background: #1f61a6; border-color: var(--c1-on-line); }
.sqg-sw.on::after { left: 23px; background: #fff; }
/* the countries (D3's step, F3): yours first, the chosen one ticked */
.sqg-clist { display: flex; flex-direction: column; max-height: 46vh;
  overflow-y: auto; }
button.sqg-crow { display: flex; align-items: center;
  justify-content: space-between; width: 100%; min-height: 52px; margin: 0;
  padding: 0 6px; border: 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; }
button.sqg-crow:first-child { border-top: 0; }
button.sqg-crow.on { font-weight: 800; }
.sqg-crow .sqg-ico { stroke: var(--c1-icon); stroke-width: 3; }

/* ───────── G3 (D4-D10, F14, F15): the profile */
.c-backbar:has(.sqg-dots) { display: flex; align-items: center; }
button.sqg-dots.c1-tile { flex: none; justify-content: center; width: 44px;
  height: 44px; min-height: 44px; margin: 0 0 0 auto; padding: 0;
  cursor: pointer; }
.sqg-dots .sqg-ico { width: 22px; height: 22px; fill: var(--c1-ink);
  stroke: none; }
.sqg-phero { display: flex; flex-direction: column; align-items: flex-start; }
.sqg-pname { margin: 14px 0 0; font-size: 28px; font-weight: 800;
  line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sqg-pmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 8px; color: var(--c1-sub); font-size: 15px; }
.sqg-pdesc { margin: 12px 0 0; color: #c9d3e0; font-size: 16px;
  line-height: 1.5; overflow-wrap: anywhere; }
.sqg-stats { padding: 2px 16px; border-radius: 18px; background: var(--c1-card);
  border: 1px solid var(--c1-card-line); }
.sqg-sr { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 54px; border-top: 1px solid #22324a;
  font-size: 15.5px; color: #c9d3e0; }
.sqg-sr:first-child { border-top: 0; }
.sqg-sr b { display: flex; align-items: center; gap: 8px; font-size: 16.5px;
  font-weight: 800; color: var(--c1-ink); }
.sqg-sr .sq-mv { margin-top: 0; font-size: 13.5px; }
.sqg-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* ───────── G4 (D12, D13, F10): the squad's card, Members / Activity */
button.sqg-card.c1-tile { align-items: center; gap: 14px; padding: 14px;
  cursor: pointer; }
.sqg-cm { flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: 2px; }
.sqg-cname { font-size: 20px; font-weight: 800; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sqg-cl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  color: var(--c1-sub); font-size: 13.5px; font-weight: 400; }
.sqg-cl .sq-up { color: #6fcf97; font-weight: 800; }
.sqg-cl .sq-mv { margin-top: 0; }
.sqg-cl .sqg-pl { padding: 1px 8px; }
.sqg-gear { flex: none; align-self: flex-start; width: 22px; height: 22px;
  color: var(--c1-hint); }
.sqg-gear svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 2; }
/* Members | Activity: two 1c chips (2026-11-09, D12; WAS round pills) */
.sqg-seg { display: flex; gap: 10px; }
button.sqg-segb.c1-chip { flex: 1 1 0; width: auto; height: 44px; margin: 0;
  padding: 0 8px; font-size: 15.5px; text-align: center; cursor: pointer; }

/* ───────── F1 (D13): the Activity card, one row an item */
.sqg-act { padding: 2px 16px; border-radius: 18px; background: var(--c1-card);
  border: 1px solid var(--c1-card-line); }
.sqg-item { display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid #22324a; }
.sqg-item:first-child { border-top: 0; }
.sqg-act .sq-av, .sqg-reqs .sq-av, .sqg-ahead .sq-av { width: 40px;
  height: 40px; background: var(--c1-tile);
  border: 1px solid var(--c1-tile-line); color: #c9d3e0; font-size: 16px; }
.sqg-im { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sqg-im b { font-size: 15.5px; font-weight: 700; line-height: 1.3;
  color: var(--c1-ink); }
.sqg-im b i { font-style: normal; font-weight: 400; color: var(--c1-sub); }
.sqg-iw { margin-top: 2px; font-size: 13.5px; color: #9aa6b6; }
button.sqg-kudos.c1-tile { flex: none; min-height: 40px; height: 40px;
  padding: 0 14px; border-radius: 12px; font-size: 13.5px; font-weight: 800;
  white-space: nowrap; cursor: pointer; }

/* ───────── G5a (D14, D15, F1, F4): the badge, its picker, the fields */
.sqg-mhero { display: flex; justify-content: center; }
.sqg-badges { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; }
button.sqg-bpick { display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0; padding: 0; box-sizing: border-box;
  border: 2px solid transparent; border-radius: 50%; background: transparent;
  cursor: pointer; }
button.sqg-bpick.on { border-color: var(--c1-on-line);
  box-shadow: 0 0 0 3px rgba(109, 180, 238, .28); }
.sqg-field { display: flex; flex-direction: column; }
.sqg-fl.c1-lab { margin: 6px 0 8px; }
.sqg-ta.c1-field { height: auto; min-height: 96px; padding: 14px 16px;
  line-height: 1.4; resize: vertical; }
/* RED (§1): the server's refusal under its field, and the box's edge */
.sqg-field.bad .c1-field { border-color: #b86a6a; }
.sqg-ferr { display: block; margin: 8px 4px 0; color: var(--c1-red);
  font-size: 14px; line-height: 1.4; }

/* ───────── G6 (D17-D22, F21): the invite code */
.sqg-code { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 10px 10px 18px; border-radius: 14px;
  background: var(--c1-field); border: 1px solid var(--c1-field-line);
  box-shadow: var(--c1-field-sink); }
.sqg-codev { font-size: 24px; font-weight: 800; letter-spacing: .14em;
  overflow-wrap: anywhere; }
button.sqg-copy.c1-tile { flex: none; min-height: 42px; height: 42px;
  padding: 0 14px; border-radius: 12px; font-size: 13.5px; font-weight: 800;
  cursor: pointer; }

/* ───────── G7 (D23, D24, F7): requests, one card */
.sqg-reqs { padding: 2px 16px; border-radius: 18px; background: var(--c1-card);
  border: 1px solid var(--c1-card-line); }
.sqg-req { padding: 14px 0; border-top: 1px solid #22324a; }
.sqg-req:first-child { border-top: 0; }
.sqg-rtop { display: flex; align-items: center; gap: 12px; }
.sqg-rtop .sq-nm b { font-size: 16px; font-weight: 800; }
.sqg-rtop .sq-meta { margin-top: 2px; font-size: 13.5px; color: #9aa6b6; }
.sqg-two { display: flex; gap: 10px; margin-top: 12px; }
.sqg-two button.c1-tile { flex: 1; justify-content: center; min-height: 44px;
  height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px;
  font-weight: 800; cursor: pointer; }

/* ───────── G8, G8b (D25-D27): a member row and its dots; the sheet's head */
.sqg-mems.sq-list { padding: 2px 16px; border-radius: 18px; }
.sqg-mrow { display: flex; align-items: center; gap: 8px; min-height: 64px;
  border-top: 1px solid #22324a; }
.sqg-mrow:first-child { border-top: 0; }
.sqg-mrow > .sq-row { flex: 1; min-width: 0; border-top: 0; }
.sqg-mrow .sq-av { width: 40px; height: 40px; background: var(--c1-tile);
  border: 1px solid var(--c1-tile-line); color: #c9d3e0; font-size: 16px; }
.sqg-mrow button.sqg-dots.c1-tile { width: 40px; height: 40px;
  min-height: 40px; margin: 0; }
.sqg-ahead { display: flex; align-items: center; gap: 12px; }

/* ───────── the bright button keeps clear of the content above it */
.sqg button.sqg-pri, .sqg-foot button.sqg-pri { margin-top: 10px; }