/* Settings page layout. Tokens only, from public/css/sns.css. */

.sb-head { margin-bottom: var(--s-6); }
.sb-head .sns-type-lead { margin-top: var(--s-2); }

/* Topbar breadcrumb: Settings / <current tab>. */
.sb-crumb-sep { color: var(--sns-ink-4); margin: 0 var(--s-2); }
.sb-crumb-tab { color: var(--sns-ink-4); font-size: var(--fs-sm); }

/* Tabs */
.sb-tabs { margin-bottom: var(--s-6); }

/* Panels stack their cards. */
.sb-panel:not([hidden]) { display: flex; flex-direction: column; gap: var(--s-5); }
.sb-card-title { margin-bottom: var(--s-4); }
.sb-cardhead { padding: var(--s-6) var(--s-6) var(--s-4); }
.sb-cardhead h2 { margin: 0; }
.sb-card-note { margin: 0 0 var(--s-4); }
.sb-card-actions { margin-top: var(--s-4); }
.sb-card-actions .sns-btn[hidden] { display: none; }

/* Label/value rows. */
.sb-rows { display: flex; flex-direction: column; }
.sb-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--sns-line);
}
.sb-row:last-child { border-bottom: none; }
.sb-row-label { color: var(--sns-ink-4); font-size: var(--fs-sm); flex: 0 0 auto; }
.sb-row-value { color: var(--sns-ink-2); font-size: var(--fs-base); text-align: right; }

/* Domains list. */
.sb-domain-list { list-style: none; margin: 0; padding: 0; }
.sb-domain-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--sns-line);
}
.sb-domain-list li:last-child { border-bottom: none; }
.sb-domain-list .sb-domain-default { color: var(--sns-ink-4); font-size: var(--fs-xs); }

/* Developer tab. */
.sb-create-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.sb-create-row .sns-input { flex: 1 1 240px; min-width: 0; }
.sb-mono { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); }
.sb-reveal {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-md);
  background: var(--sns-success-tint);
  color: var(--sns-success);
  font-size: var(--fs-sm);
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}

/* display lives on the not-hidden rule so the hidden attribute still wins. */
.sb-reveal:not([hidden]) {
  display: flex;
}
.sb-reveal code {
  display: block;
  word-break: break-all;
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  color: var(--sns-ink-2);
  width: 100%;
  box-sizing: border-box;
}
.sb-empty { padding: var(--s-8) var(--s-6); }
.sb-note { color: var(--sns-ink-4); font-size: var(--fs-sm); margin: var(--s-4) 0 0; }

/* Row overflow menu (Regenerate + Delete). */
.sb-menu {
  position: absolute;
  z-index: 60;
  min-width: 150px;
  padding: var(--s-2);
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
}
.sb-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--sns-ink-2);
  cursor: pointer;
}
.sb-menu button:hover { background: var(--sns-surface-2); }
.sb-menu button.sb-menu-danger { color: var(--sns-danger); }

@media (max-width: 520px) {
  .sb-row { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .sb-row-value { text-align: left; }
}