/* ── Online (marketplace) ─────────────────────────────────────────────────
   Community browse, create form, target tester, people, leaderboard. Same
   language as the rest: one hairline, one accent, mono for every label and
   identifier. Nothing here invents a colour or a shadow.                     */

/* The async play wrapper must not exist in layout — its child (the game
   screen) has to be the direct flex item #app expects. */
.onl-wrap { display: contents; }

.screen.center { display: flex; align-items: center; justify-content: center; }

.onl-loading,
.onl-empty {
  padding: var(--space-10) var(--space-6);
  text-align: center; color: var(--dim);
  font-size: var(--text-base); line-height: var(--leading-prose);
  max-width: 440px; margin: 0 auto;
}
.onl-empty { color: var(--mute); }

/* ── top bar: tabs + actions ──────────────────────────────────────────── */

.onl-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-5) var(--space-6) 0;
  max-width: 940px; margin: 0 auto; width: 100%;
}
.onl-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.onl-tab {
  padding: var(--space-3) var(--space-5);
  border: var(--hairline) solid transparent; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--mute); transition: var(--t);
}
.onl-tab:hover { color: var(--dim); }
.onl-tab.active { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); }

.onl-actions { display: flex; gap: var(--space-3); }
.onl-actions .pill { display: inline-flex; align-items: center; gap: var(--space-3); }
.onl-actions .pill svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── level cards ──────────────────────────────────────────────────────── */

.mkt-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  max-width: 940px; margin: 0 auto; padding: var(--space-6) 0;
}
.mkt-card {
  position: relative;
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: var(--t);
}
.mkt-card:hover { border-color: var(--line-2); }
.mkt-open {
  display: block; width: 100%; text-align: left;
  padding: var(--space-6); background: none;
}
.mkt-head { display: flex; align-items: center; gap: var(--space-4); }
/* Reserve room for the absolutely-positioned delete button so a long title on
   one of your own cards can't slide underneath it. */
.mkt-card--own .mkt-head { padding-right: calc(var(--control-sm) + var(--space-2)); }
.mkt-title { flex: 1; font-size: var(--text-lg); font-weight: 500; color: var(--text); }
.mkt-lock { display: inline-flex; color: var(--mute); }
.mkt-lock svg { width: var(--icon-sm); height: var(--icon-sm); }

.mkt-problem {
  margin: var(--space-4) 0 var(--space-5);
  color: var(--dim); font-size: var(--text-base); line-height: var(--leading-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mkt-io { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.io-pill {
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-4);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-sm); color: var(--text);
}
.io-arrow { display: inline-flex; color: var(--mute); }
.io-arrow svg { width: var(--icon-sm); height: var(--icon-sm); }

.mkt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.mkt-author { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); color: var(--dim); min-width: 0; }
.mkt-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--mute); white-space: nowrap; }

.mkt-del {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: var(--control-sm); height: var(--control-sm); color: var(--mute);
}
.mkt-del:hover { color: var(--danger-text); }
.mkt-del svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── avatars ──────────────────────────────────────────────────────────── */

.ava {
  width: 24px; height: 24px; border-radius: var(--radius-full);
  object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center;
}
.ava--txt {
  background: var(--accent-dim); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
}
.ava--sm { width: 18px; height: 18px; font-size: var(--text-2xs); }

/* ── create form ──────────────────────────────────────────────────────── */

.onl-form { max-width: 560px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-10); }
.field label {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
}
.onl-input {
  width: 100%; padding: var(--space-4) var(--space-5);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-mono); font-size: var(--text-base);
}
select.onl-input { font-family: var(--font-mono); }
textarea.onl-input { resize: vertical; line-height: var(--leading-body); font-family: var(--font-sans); }
.onl-input:focus { outline: none; border-color: var(--accent-line); }
.onl-input::placeholder { color: var(--mute); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

.check {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6); font-size: var(--text-base); color: var(--dim); cursor: pointer;
}
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

.onl-vis { display: flex; gap: var(--space-4); }
.vis-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  font-size: var(--text-base); color: var(--dim); transition: var(--t);
}
.vis-opt svg { width: var(--icon-sm); height: var(--icon-sm); }
.vis-opt:hover { border-color: var(--line-2); }
.vis-opt.active { border-color: var(--accent-line); background: var(--accent-dim); color: var(--accent); }

.friend-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.friend-chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-full);
  font-size: var(--text-md); color: var(--dim); transition: var(--t);
}
.friend-chip.on { border-color: var(--accent-line); background: var(--accent-dim); color: var(--accent); }

.onl-err { color: var(--danger-text); font-size: var(--text-md); min-height: 1em; margin-top: var(--space-5); }
.onl-hint { display: block; color: var(--mute); font-size: var(--text-md); line-height: var(--leading-body); margin-top: var(--space-5); }
.onl-form .btn-row { justify-content: space-between; }
.onl-form .btn-row .pill { display: inline-flex; align-items: center; gap: var(--space-3); }
.onl-form .btn-row .pill svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

/* ── people sheet ─────────────────────────────────────────────────────── */

.people-list { margin-top: var(--space-6); display: grid; gap: var(--space-3); max-height: 46vh; overflow-y: auto; }
.people-head {
  font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--mute); margin: var(--space-3) 0;
}
.person-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
}
.person-id { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-base); color: var(--text); min-width: 0; }
.person-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-btn { padding: var(--space-2) var(--space-5); font-size: var(--text-xs); flex: none; }

/* ── leaderboard sheet ────────────────────────────────────────────────── */

.lb-list { margin-top: var(--space-6); display: grid; gap: var(--space-3); max-height: 50vh; overflow-y: auto; }
.lb-empty { color: var(--mute); font-size: var(--text-base); padding: var(--space-6) 0; text-align: center; }
.lb-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
}
.lb-rank { width: 18px; text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--mute); flex: none; }
.lb-ava {
  width: 24px; height: 24px; border-radius: var(--radius-full);
  object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center;
}
.lb-ava--txt {
  background: var(--accent-dim); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
}
.lb-name { flex: 1; font-size: var(--text-base); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name em { color: var(--mute); font-style: normal; font-size: var(--text-2xs); font-family: var(--font-mono); }
.lb-time { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); flex: none; }
.lb-row .stars { flex: none; }

/* ── profile setup (username + picture) ───────────────────────────────────── */

.setup-profile { display: flex; gap: var(--space-6); align-items: center; margin: var(--space-7) 0 var(--space-6); }
.setup-dp {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.setup-dp--txt {
  background: var(--accent-dim); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500;
}
.setup-field { flex: 1; min-width: 0; }
.setup-inputwrap {
  display: flex; align-items: center;
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); overflow: hidden; transition: var(--t);
}
.setup-inputwrap:focus-within { border-color: var(--accent-line); }
.setup-at { padding: 0 var(--space-2) 0 var(--space-5); color: var(--mute); font-family: var(--font-mono); }
.setup-inputwrap .onl-input { border: none; background: none; padding-left: 0; }
.setup-inputwrap .onl-input:focus { border: none; }
.setup-status { margin-top: var(--space-3); font-size: var(--text-md); color: var(--mute); min-height: 1.3em; }
.setup-status.good { color: var(--success-text); }
.setup-status.bad { color: var(--danger-text); }
.setup-status.checking { color: var(--dim); }