/* ============================================================
   SongMechanic dark skin — the real design system.
   Link it: <link rel="stylesheet" href="/static/sm-theme.css">
   Tokens + components shared by match_server pages, the SongCraft
   thin client, and the teardown/upload/library screens.
   Documented in DESIGN_SYSTEM.md.
   ============================================================ */

:root {
  /* surfaces */
  --sm-bg:      #09090d;   /* page canvas */
  --sm-card:    #13131b;   /* primary card */
  --sm-card-2:  #16161f;   /* nested / control surface */
  --sm-line:    rgba(255,255,255,.07);
  --sm-line-2:  rgba(255,255,255,.14);
  /* text */
  --sm-text:    #f4f4f6;
  --sm-muted:   #8a8a97;
  --sm-faint:   #5f5f6b;
  /* accent roles (see DESIGN_SYSTEM.md) */
  --sm-mint:    #79f2a8;   /* taste / positive / links / play  */
  --sm-yellow:  #f0e24a;   /* crowned / hit-likeness           */
  --sm-purple:  #b3a4f5;   /* scene / coach / identity         */
  --sm-coral:   #f2693c;   /* ease-off / warnings / energy     */
  --sm-amber:   #f2a83c;   /* secondary warm                   */
  /* accent text-on-fill (dark, same family) */
  --sm-on-mint:   #06311b;
  --sm-on-yellow: #332e06;
  --sm-on-purple: #241a52;
  --sm-on-coral:  #3a1207;
  /* shape + type */
  --sm-r-sm: 9px;  --sm-r-md: 12px;  --sm-r-lg: 16px;  --sm-r-xl: 22px;
  --sm-font: var(--font-sans, "Anthropic Sans", system-ui, -apple-system, sans-serif);
}

/* ---- base (thin-client / standalone pages) ---- */
.sm-app, body.sm {
  background: var(--sm-bg); color: var(--sm-text);
  font-family: var(--sm-font); margin: 0;
}
.sm-app h1, .sm-app h2, .sm-app h3 { font-weight: 500; letter-spacing:-.3px; }
.sm-hero { font-size: 40px; font-weight: 700; letter-spacing:-.6px; line-height: 1.05; }
.sm-sub  { color: var(--sm-muted); font-size: 14px; line-height: 1.6; }

/* ---- screen frame (a depicted app screen) ---- */
.sm-screen {
  background: var(--sm-bg); color: var(--sm-text);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--sm-r-xl);
  padding: 20px 22px 24px; font-family: var(--sm-font);
}

/* ---- cards ---- */
.sm-card  { background: var(--sm-card);   border: 1px solid var(--sm-line); border-radius: var(--sm-r-lg); padding: 15px 17px; }
.sm-card2 { background: var(--sm-card-2); border: 1px solid var(--sm-line); border-radius: var(--sm-r-md); }

/* ---- buttons ---- */
.sm-btn {
  display:inline-flex; align-items:center; gap:6px; font-size:12px;
  padding:8px 12px; border-radius:11px; cursor:pointer;
  background: var(--sm-card-2); border:1px solid rgba(255,255,255,.08); color:#cfcfd8;
}
.sm-btn:hover { background:#1d1d27; }
.sm-btn-primary { background: var(--sm-text); color: var(--sm-bg); border:none; font-weight:500; padding:11px 18px; border-radius:var(--sm-r-md); }
.sm-ic { width:34px; height:34px; border-radius:50%; background:var(--sm-card-2); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#b9b9c4; }

/* ---- pills (filled accent stats) ---- */
.sm-pill { display:inline-block; border-radius:13px; padding:11px 15px; }
.sm-pill .k { font-size:12px; opacity:.9; }
.sm-pill .v { font-size:22px; font-weight:700; }
.sm-pill.mint   { background:var(--sm-mint);   color:var(--sm-on-mint); }
.sm-pill.yellow { background:var(--sm-yellow); color:var(--sm-on-yellow); }
.sm-pill.purple { background:var(--sm-purple); color:var(--sm-on-purple); }
.sm-pill.coral  { background:var(--sm-coral);  color:var(--sm-on-coral); }
.sm-pill.dark   { background:var(--sm-card-2); color:#c9c9d2; border:1px solid var(--sm-line); }

/* ---- chips / tags ---- */
.sm-chip { font-size:12px; padding:5px 11px; border-radius:var(--sm-r-sm); background:var(--sm-card-2); border:1px solid var(--sm-line); color:#b9b9c4; }
.sm-chip.scene { background:#1c1733; border-color:#3a2f63; color:var(--sm-purple); }
.sm-chip.crown { background:#46400c; border-color:#5a4e1c; color:var(--sm-yellow); }

/* ---- filter chip (selectable) ---- */
.sm-fchip { font-size:12px; padding:6px 12px; border-radius:var(--sm-r-sm); background:var(--sm-card-2); border:1px solid var(--sm-line); color:var(--sm-muted); cursor:pointer; }
.sm-fchip.on { background:var(--sm-text); color:var(--sm-bg); border-color:var(--sm-text); }

/* ---- metric card ---- */
.sm-metric { background:var(--sm-card); border:1px solid var(--sm-line); border-radius:var(--sm-r-md); padding:10px 13px; }
.sm-metric .k { font-size:12px; color:var(--sm-muted); }
.sm-metric .v { font-size:22px; font-weight:700; }

/* ---- tabs ---- */
.sm-tab { font-size:12px; padding:7px 13px; border-radius:var(--sm-r-sm); color:var(--sm-muted); cursor:pointer; }
.sm-tab.on { background:#1f1f2a; color:var(--sm-text); }

/* ---- reversible toggle (treatment / move) ---- */
.sm-tx { font-size:12px; padding:7px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:var(--sm-card-2); color:var(--sm-muted); cursor:pointer; font-family:var(--sm-font); }
.sm-tx[data-on="1"] { background:#10331f; border-color:#1f6b40; color:var(--sm-mint); }

/* ---- diverging signature bar ---- */
.sm-bar     { position:relative; height:13px; background:#1d1d27; border-radius:7px; }
.sm-bar .mid{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--sm-line-2); }
.sm-bar .pos{ position:absolute; left:50%; top:2px; bottom:2px; background:var(--sm-mint); border-radius:0 5px 5px 0; }
.sm-bar .neg{ position:absolute; right:50%; top:2px; bottom:2px; background:var(--sm-coral); border-radius:5px 0 0 5px; }

/* ---- coach card (full-accent action) ---- */
.sm-coach { border-radius:14px; padding:12px 13px; cursor:pointer; }
.sm-coach.purple { background:var(--sm-purple); color:var(--sm-on-purple); }
.sm-coach.yellow { background:var(--sm-yellow); color:var(--sm-on-yellow); }
.sm-coach.coral  { background:var(--sm-coral);  color:var(--sm-on-coral); }

/* ---- inputs ---- */
.sm-input { background:var(--sm-card-2); border:1px solid rgba(255,255,255,.08); border-radius:11px; padding:8px 13px; color:var(--sm-text); font-size:13px; }
.sm-input::placeholder { color:var(--sm-faint); }