/* Settings (SettingsDesktop).  Designed for desktop: the settings cards sit left of the Admins and About panels.
   Below 1024px everything stacks, and each row's label sits above its control. */

.settings-admin-pill {
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-tag);
  background: var(--gold-50); color: var(--gold-900); white-space: nowrap;
}

.settings { display: flex; flex-direction: column; gap: var(--space-20); }
.settings-grid { display: flex; flex-direction: column; gap: var(--space-20); }
.settings-main, .settings-side { display: flex; flex-direction: column; gap: var(--space-20); min-width: 0; }
@media (min-width: 1024px) {
  .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
}

.settings-card-title {
  padding: 18px 24px 12px; font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-display);
  color: var(--walnut-900);
}
.settings-row {
  display: flex; flex-direction: column; gap: var(--space-12); padding: 18px 24px; border-top: 1px solid var(--border-row);
}
@media (min-width: 1024px) {
  .settings-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
}
@media (max-width: 1023px) {
  .settings-card-title { padding: 16px 16px 10px; }
  .settings-row { padding: 16px; }
}

.settings-label { display: flex; flex-direction: column; gap: var(--space-4); }
.settings-label-title { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.settings-hint { font-size: 12px; font-weight: 400; color: var(--ink-500); line-height: var(--leading-note); }
.settings-control { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.settings-input { max-width: 360px; padding: 0 14px; }
.settings-select { width: auto; max-width: 100%; padding-left: 14px; }
.settings-inline { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.settings-value { font-size: 15px; font-weight: 600; }
.settings-status { display: flex; align-items: center; gap: var(--space-8); }
.settings-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-800); flex-shrink: 0; }
.settings-dot-none { background: var(--paper-500); }
.settings-path { font-size: 13px; color: var(--ink-500); overflow-wrap: anywhere; }
.settings-body { font-size: 14px; color: var(--ink-700); line-height: var(--leading-body); }
.settings-body a, .settings-link { font-weight: 700; text-decoration: none; }

.settings-panel {
  background: #FFFFFF; border: 1px solid var(--paper-300); border-radius: var(--radius-card); padding: 18px 20px;
  display: flex; flex-direction: column; gap: var(--space-12);
}
.settings-panel-title {
  font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-display); color: var(--walnut-900);
}
.settings-admins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.settings-admin { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-10); font-size: 14px; }
.settings-admin-avatar { width: 30px; height: 30px; font-size: 12px; box-shadow: none; }
.settings-link { font-size: 14px; }

.settings-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-10); }
@media (max-width: 1023px) {
  .settings-actions .btn { flex: 1 1 140px; }
  .settings-inline .btn { flex: 1 1 200px; }
}