/* The account pages (studio, 17 Oct 2026): Your logo, Settings, Staff &
 * logins, Subscription. Every rule starts .sta-; colours only from the
 * studio's variables. Buttons in a set are one size; cards in a grid are one size. */

.sta-page { max-width: 960px; }
.sta-page .st-group { margin-top: 0; }
.sta-stack { display: grid; gap: 18px; }
.sta-card { padding: 22px; border-radius: 20px; background: var(--surface); }
.sta-card h3 { font-size: 20px; letter-spacing: -.01em; }
.sta-h { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.sta-hint { margin-top: 2px; }
.sta-ask { margin: 0; font-size: 17px; }
.sta-section { display: grid; gap: 12px; }

/* A heading with what goes with it on the right; stacked on a phone. */
.sta-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sta-head > div:first-child { flex: 1 1 320px; min-width: 0; display: grid; gap: 6px; }
.sta-head h3 { margin: 0; }
.sta-head-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sta-head .st-btn.big { min-width: 220px; }

/* A set of buttons: every one the same width and height. */
.sta-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.sta-acts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
.sta-acts.one { grid-template-columns: minmax(0, 1fr); max-width: 300px; }
.sta-acts .st-btn { width: 100%; }

/* Tabs: one row of equal chips. */
.sta-tabs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.sta-tabs .st-chip { width: 100%; padding: 0 12px; font-size: 15px; }
.sta-body { display: grid; gap: 18px; }
.sta-narrow { display: none; }
.sta-note .st-btn { min-width: 200px; }

/* Fields two by two. */
.sta-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.sta-fields .st-q, .sta-card .st-q { margin-top: 0; }
.sta-card .st-q input, .sta-card .st-q select { min-height: 48px; background: var(--surface-2); }
.sta-card .st-q input[readonly] { color: var(--muted); }
.sta-form { display: grid; gap: 14px; }
.sta-form .st-q input { min-height: 48px; }

/* Pills. */
.sta-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.sta-pill.ok { color: var(--green); border-color: rgba(46, 212, 122, .45); background: rgba(46, 212, 122, .1); }
.sta-pill.gold { color: var(--gold); border-color: rgba(245, 194, 27, .45); background: rgba(245, 194, 27, .1); }
.sta-pill.warn { color: var(--gold); border-color: rgba(245, 194, 27, .45); background: rgba(245, 194, 27, .08); }
.sta-pill.big { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* A quiet note, and one that wants doing. */
.sta-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 15px; }
.sta-note b { display: block; }
.sta-note > span { flex: 1 1 260px; }
.sta-note.warn, .sta-note.gold { border-color: rgba(245, 194, 27, .5); background: rgba(245, 194, 27, .07); }

/* ------------------------------------------------------------ Your logo */
.sta-logo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.sta-logo-frame { aspect-ratio: 4 / 3; border-radius: 18px; display: grid; place-items: center; padding: 28px; overflow: hidden;
  background-color: var(--surface-2); border: 1px solid var(--line);
  background-image: linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%),
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%);
  background-size: 24px 24px; background-position: 0 0, 12px 12px; }
.sta-logo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
.sta-logo-frame:not(.has) { border-style: dashed; background-image: none; }
.sta-logo-none { display: grid; gap: 6px; text-align: center; }
.sta-logo-none b { font-size: 20px; }
.sta-logo-none { justify-items: center; color: var(--muted); }
.sta-logo-none-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: var(--surface); border: 1px solid var(--line); }
.sta-logo-side { display: grid; gap: 14px; align-content: center; }
.sta-logo-side h2 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.sta-logo-side .sta-acts { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.sta-tile { display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.sta-tile b { font-size: 17px; }
.sta-tile > span:last-child { color: var(--muted); font-size: 14px; }
.sta-tile i { color: var(--text); }
.sta-tile-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: var(--green); background: rgba(46, 212, 122, .12); margin-bottom: 4px; }
.sta-pick-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: end; }
.sta-search { margin: 0; }
.sta-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sta-pic { display: grid; gap: 6px; padding: 8px; border-radius: 14px; border: 2px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
.sta-pic:hover { border-color: var(--green); }
.sta-pic[hidden] { display: none; }
.sta-pic-img { aspect-ratio: 1; border-radius: 10px; background: var(--bg); display: grid; place-items: center; overflow: hidden; }
.sta-pic-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sta-pic-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- Settings */
.sta-logo-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 200px; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.sta-logo-thumb { width: 96px; height: 64px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; overflow: hidden; }
.sta-logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sta-logo-thumb i { font-style: normal; color: var(--muted); font-size: 12px; }
.sta-logo-row-words { display: grid; gap: 2px; min-width: 0; }
.sta-logo-row-words i { font-style: normal; color: var(--muted); font-size: 14px; }
.sta-logo-row .st-btn { width: 100%; }

/* --------------------------------------------------------- Staff & logins */
.sta-people { display: grid; gap: 10px; }
.sta-person { display: grid; grid-template-columns: 48px minmax(0, 1fr) 130px 120px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.sta-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--green-ink); background: var(--green); }
.sta-person-words { display: grid; gap: 2px; min-width: 0; }
.sta-person-words .st-muted { overflow-wrap: anywhere; }
.sta-person-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.sta-can { font-size: 13px; }
.sta-role { justify-self: start; }
.sta-change { width: 100%; }
.sta-access { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.sta-access legend { padding: 0; margin: 0 0 10px; }
.sta-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sta-role-card { position: relative; display: grid; align-content: start; gap: 4px; padding: 14px 16px; min-height: 100px; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--line); cursor: pointer; }
.sta-role-card input { position: absolute; opacity: 0; pointer-events: none; }
.sta-role-card b { font-size: 16px; }
.sta-role-card span { color: var(--muted); font-size: 13px; }
.sta-role-card:has(input:checked) { border-color: var(--green); background: rgba(46, 212, 122, .08); }
.sta-role-card:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.sta-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: 6px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.sta-tick { border-bottom: 1px solid var(--line); padding: 6px 0; }
.sta-ticks.is-owner .sta-tick { opacity: .55; }
.sta-ticks .st-toggle input:disabled { cursor: not-allowed; }
.sta-remove { justify-self: start; min-width: 220px; }

/* ----------------------------------------------------------- Subscription */
.sta-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sta-stat { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.sta-stat b { font-size: 28px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sta-stat span { color: var(--muted); font-size: 13px; }
.sta-stat.warn b { color: var(--gold); }
.sta-credits { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
/* A partner's or member's code, added after signing up (publish.js, 26 Oct 2026). */
.sta-code { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.sta-code .st-q { flex: 1 1 220px; margin: 0; }
.sta-code .st-q i { font-style: normal; color: var(--muted); font-weight: 500; }
.sta-credits > span { display: grid; gap: 2px; flex: 1 1 320px; }
.sta-credits i { font-style: normal; color: var(--muted); font-size: 14px; }
.sta-credits .st-btn { min-width: 200px; }
.sta-mark { padding: 12px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.sta-ref-link { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; }
.sta-tvs { display: grid; gap: 8px; }
.sta-tv { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 120px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.sta-tv-words { display: grid; gap: 2px; min-width: 0; }
.sta-tv-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sta-tv-seen { text-align: right; }

@media (max-width: 760px) {
  .sta-card { padding: 18px; }
  .sta-fields { grid-template-columns: minmax(0, 1fr); }
  .sta-logo { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sta-logo-side .sta-acts { max-width: none; }
  .sta-where { grid-template-columns: minmax(0, 1fr); }
  .sta-acts, .sta-acts.three, .sta-acts.one { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .sta-head .st-btn.big, .sta-head-side, .sta-head-side .st-btn { width: 100%; }
  .sta-head-side .sta-pill { justify-content: center; }
  .sta-logo-row { grid-template-columns: 72px minmax(0, 1fr); }
  .sta-logo-thumb { width: 72px; height: 52px; }
  .sta-logo-row .st-btn { grid-column: 1 / -1; }
  .sta-person { grid-template-columns: 44px minmax(0, 1fr); }
  .sta-avatar { width: 44px; height: 44px; }
  .sta-role, .sta-change { grid-column: 2; }
  .sta-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sta-ticks { grid-template-columns: minmax(0, 1fr); }
  .sta-remove { width: 100%; }
  .sta-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sta-stat { padding: 12px; }
  .sta-stat b { font-size: 22px; }
  .sta-credits .st-btn { width: 100%; }
  .sta-tv { grid-template-columns: 14px minmax(0, 1fr); }
  .sta-tv-pills, .sta-tv-seen { grid-column: 2; justify-content: flex-start; text-align: left; }
  .sta-pick-top { grid-template-columns: minmax(0, 1fr); }
  .sta-tabs .st-chip { font-size: 14px; padding: 0 6px; white-space: nowrap; }
  .sta-wide { display: none; }
  .sta-narrow { display: inline; }
  .sta-note .st-btn { width: 100%; }
  .sta-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Create my logo (logo.js createLogo, 25 Oct 2026). */
.sta-logo-draw { margin-top: 10px; max-width: 520px; width: 100%; border-style: dashed; }
.sta-logo-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.sta-logo-pick { aspect-ratio: 1; padding: 10px; border-radius: 14px; border: 2px solid var(--line); cursor: pointer;
  background: repeating-conic-gradient(rgba(230, 233, 239, 1) 0% 25%, rgba(255, 255, 255, 1) 0% 50%) 50% / 22px 22px; }
.sta-logo-pick:hover, .sta-logo-pick:focus-visible { border-color: var(--green); }
.sta-logo-pick img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sta-logo-wait { display: grid; justify-items: center; gap: 6px; padding: 30px 10px; text-align: center; }
@media (max-width: 600px) { .sta-logo-picks { grid-template-columns: minmax(0, 1fr); } }