/* Web-only additions on top of player.css: the settings dialog (standing in
   for the extension's options page), the sign-in panel's extra copy, and the
   small bits of site chrome. Everything here targets what site/studio/
   web-studio.js builds; the studio's own styling is untouched. */

.brand-home {
  display: inline-flex;
  border-radius: 8px;
}
.brand-home:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Where the site-wide profile button lives in a layout with no header row:
   pushed to the end of the sidebar's brand line, so the account control sits
   beside the name of the app it belongs to. */
.studio-profile-slot {
  margin-inline-start: auto;
  flex: none;
}

/* ---------------- the sign-in panel on the Mode step ---------------- */

/* The padlock note belongs to the cards above it, so it reads as the panel's
   closing line rather than as another thing to do. */
#signInCard .gate-locked-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

#signInCard .btn-row {
  margin-top: 14px;
}

/* ---------------- settings dialog ---------------- */

.web-settings {
  width: min(480px, 92vw);
  border: 1px solid var(--border);
  border-radius: var(--r-panel, 14px);
  background: #12282d;
  color: var(--ink);
  padding: 22px 24px 20px;
  font-family: inherit;
}

.web-settings::backdrop {
  background: rgba(5, 15, 17, 0.7);
}

.web-settings h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.web-settings .settings-field {
  margin: 0 0 16px;
}

.web-settings select,
.web-settings textarea {
  background: var(--input);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-control, 7px);
  padding: 8px 10px;
  font: inherit;
  width: 100%;
}

.web-settings textarea {
  resize: vertical;
  min-height: 84px;
  font-size: 13px;
}

.web-settings select:focus-visible,
.web-settings textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.web-settings .settings-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* The store link replaces the "Setup guide" button in the sidebar. player.css
   styles `.linky` on buttons only, so an anchor there would render as a raw
   blue link beside its sibling — mirror the button's look instead. */
.side-links a.linky {
  padding: 0;
  color: var(--muted);
  font-size: 11.5px;
  text-align: left;
  text-decoration: none;
}

.side-links a.linky:hover {
  color: var(--ink);
  text-decoration: underline;
}