/* SP-IN · Tab "Società" (SocietiesTab). Markup generato da societies-tab.js.
   Un solo markup per telefono e PC; il layout cambia con la larghezza del contenitore .stx (container query):
     < 900px   schede una sotto l'altra, "Crea" corto, accanto a "Le tue società" solo il numero
     ≥ 900px   schede su due colonne, "Crea una società", accanto al titolo di sezione "n · ne fai parte come staff"
   Colore della società: --c (primo colore) nel filo a sinistra della scheda, nel monogramma e nell'etichetta del ruolo.
   Tutto il resto usa i token di tokens.css. */

.stx{
  --stx-skew:var(--skew);--stx-unskew:var(--unskew);
  container-type:inline-size;container-name:stx;
  display:flex;flex-direction:column;gap:var(--space-16);
  color:var(--ink);font-family:var(--font-body);
}
:where(.stx) button{font:inherit}
.stx :is(h1,h2,.stx-create b,.stx-tag b,.stx-open b,.stx-mono b,.stx-todo-t,.stx-crest b){font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;text-transform:uppercase}
.stx :is(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.stx-grow{flex:1;min-width:0}
.stx-mut{color:var(--muted)}
.stx-s{display:inline}.stx-l{display:none}

/* intestazione */
.stx-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}
.stx-title h1{margin:0;font-size:44px;line-height:.9}
.stx-title:not(:has(h1)){justify-content:flex-end}
.stx-create{flex:none;height:40px;padding:0 var(--space-12);border:0;background:var(--primary-fill);color:var(--on-fill);transform:skewX(var(--stx-skew));cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.stx-create>span{display:inline-flex;align-items:center;gap:6px;transform:skewX(var(--stx-unskew));font-size:var(--fs-15);white-space:nowrap}
.stx-create svg{width:18px;height:18px}
.stx-create .stx-l{display:none}

.stx-sec{display:flex;align-items:center;gap:10px}
.stx-tag{flex:none;padding:5px 14px;background:var(--scorebox);color:var(--on-stage);transform:skewX(var(--stx-skew))}
.stx-tag b{display:block;transform:skewX(var(--stx-unskew));font-size:var(--fs-13);letter-spacing:.06em;white-space:nowrap}
.stx-rule{flex:1;height:2px;background:var(--line)}
.stx-sec-x{font-size:var(--fs-11);font-weight:700;color:var(--muted);white-space:nowrap}

/* schede */
.stx-grid{display:flex;flex-direction:column;gap:var(--space-16)}
.stx-card{display:flex;flex-direction:column;gap:14px;padding:16px 16px 16px 20px;background:var(--surface);border-radius:4px;box-shadow:inset 6px 0 0 var(--c),0 1px 2px rgba(20,32,43,.06),0 8px 20px rgba(20,32,43,.07)}
.stx-ch{display:flex;align-items:center;gap:12px}
.stx-mono{flex:none;width:52px;height:52px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--c);display:grid;place-items:center;color:var(--c)}
.stx-mono b{font-size:20px}
.stx-ch-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.stx-ch-t h2{margin:0;font-size:28px;line-height:.9;overflow-wrap:anywhere}
.stx-role{display:inline-flex;padding:3px 10px;background:color-mix(in srgb,var(--c) 10%,var(--surface));color:var(--c);transform:skewX(var(--stx-skew))}
.stx-role>span{display:inline-flex;align-items:center;gap:6px;transform:skewX(var(--stx-unskew));font-size:var(--fs-11);font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.stx-role svg{width:15px;height:15px}
.stx-city{display:flex;align-items:center;gap:5px;font-size:var(--fs-12);color:var(--muted)}
.stx-city svg{width:15px;height:15px}

.stx-todo{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;background:var(--warn-soft,color-mix(in srgb,var(--warn) 8%,var(--surface)));color:var(--ink);text-decoration:none;text-align:left;font-size:var(--fs-13);cursor:pointer;width:100%;box-sizing:border-box}
.stx-todo small{font-size:var(--fs-12)}
.stx-todo-t{font-size:16px;color:var(--warn)}
.stx-todo--ok{background:var(--ok-soft);cursor:default}
/* SP-IN (2026-10-21): stato della società in lettura */
.stx-todo--wait{background:var(--sunk);cursor:default}
.stx-chev{flex:none;color:var(--muted);display:grid}
.stx-chev svg{width:18px;height:18px}

.stx-facts{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.stx-facts--one{grid-template-columns:1fr}
.stx-fact{display:flex;flex-direction:column;gap:5px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.stx-lab{font-size:var(--fs-11);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stx-fv{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stx-fact small{font-size:var(--fs-11)}
.stx-frac{font-family:var(--font-mono);font-size:20px}
.stx-frac small{font-size:var(--fs-12);color:var(--muted)}
.stx-n{font-family:var(--font-mono);font-size:16px}
.stx-txt{font-size:var(--fs-13)}
.stx-crests{display:inline-flex;align-items:center}
.stx-crests .stx-crest+.stx-crest{margin-left:-6px}
.stx-crest{position:relative;flex:none;width:26px;height:26px;border-radius:999px;background:var(--c-bg);box-shadow:0 0 0 2px var(--c-ring);overflow:hidden;display:grid;place-items:center}
.stx-crest img{width:86%;height:86%;object-fit:contain}
.stx-crest b{font-size:11px;color:var(--c-ring)}
.stx-my{display:inline-flex;align-items:center;gap:8px;margin-right:12px}
.stx-my .stx-crest{width:30px;height:30px}
.stx-my b{font-size:var(--fs-15)}
.stx-bar{display:block;height:4px;background:var(--line)}
.stx-bar>span{display:block;height:100%;background:var(--ok-fill)}

.stx-st{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);font-weight:700;white-space:nowrap}
.stx-st svg{flex:none;width:13px;height:13px}
.stx-st--ok{color:var(--ok)}.stx-st--warn{color:var(--warn)}.stx-st--crit{color:var(--crit)}.stx-st--mut{color:var(--muted)}

.stx-open{align-self:stretch;height:44px;display:grid;place-items:center;border:0;background:var(--scorebox);color:var(--on-stage);text-decoration:none;transform:skewX(var(--stx-skew));cursor:pointer}
.stx-open b{transform:skewX(var(--stx-unskew));font-size:var(--fs-17)}
.stx-note{margin:0;font-size:var(--fs-12);color:var(--muted);line-height:1.5}
.stx-empty{padding:var(--space-24);text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line-strong);line-height:1.5}

/* ---------- PC ---------- */
@container stx (min-width:900px){
  .stx{gap:18px}
  .stx-title h1{font-size:64px}
  .stx-create{height:44px;padding:0 var(--space-16)}
  .stx-create>span{font-size:var(--fs-17)}
  .stx .stx-l{display:inline}.stx .stx-s{display:none}
  .stx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
  .stx-card{padding:22px 22px 22px 28px}
  .stx-ch{gap:16px}
  .stx-mono{width:64px;height:64px}
  .stx-mono b{font-size:24px}
  .stx-ch-t h2{font-size:34px}
}