/* =========================================================================
   Settings area: tabs, settings forms, organization branding card.
   Uses tokens from theme.css only — no raw colors.
   ========================================================================= */

/* ---- page frame ------------------------------------------------------- */
.settings .set-tabs { margin-bottom: var(--space-4); }
.set-panel { display: flex; flex-direction: column; gap: var(--space-4); max-width: 880px; }
.set-panel:focus-visible { outline: none; }
#panel-system { max-width: 1120px; }
#set-form > .set-panel + .set-panel { margin-top: 0; }
.set-sub { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-sm); }
.set-narrow { max-width: 420px; }

/* ---- form controls specific to settings ------------------------------- */
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .form-grid.three { grid-template-columns: 1fr; } }
.input-unit { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; box-shadow: var(--shadow-xs); }
.input-unit:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.input-unit input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; }
.input-unit span { padding: 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; background: var(--bg-surface-subtle); align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--border-default); margin: 0; }
#set-form .switch > span { margin: 0; font-weight: 400; color: var(--text-primary); font-size: var(--fs-md); }
.savebar { position: sticky; bottom: 0; background: var(--bg-overlay-soft); backdrop-filter: blur(4px); padding: var(--space-3) 0; z-index: 5; flex-wrap: wrap; max-width: 880px; }
#set-form > .form-error { max-width: 880px; }

/* ---- users link card -------------------------------------------------- */
.set-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); color: var(--text-primary); }
.set-link:hover { text-decoration: none; background: var(--bg-surface-hover); border-color: var(--border-strong); }
.set-link .grow { display: flex; flex-direction: column; gap: 2px; }
.set-link-sub { display: block; }
.set-link .link-arrow { color: var(--text-link); }
@media (max-width: 520px) { .set-link .link-arrow { display: none; } }

/* ---- system tab ------------------------------------------------------- */
.set-sys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.set-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (max-width: 1000px) { .set-sys-grid { grid-template-columns: 1fr; } }
.set-migrations { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.set-migrations li { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); word-break: break-all; }
.set-migrations li:last-child { border-bottom: 0; }
.tool-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.tool-list li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) 12px; border-bottom: 1px solid var(--border-subtle); }
.tool-list li:last-child { border-bottom: 0; }
.tool-list .cell-sub { word-break: break-all; }
@media (max-width: 520px) { .settings .kv { grid-template-columns: 1fr; gap: 2px; } .settings .kv dd { margin-bottom: var(--space-2); } }

/* ---- branding card ---------------------------------------------------- */
.brand-body { display: flex; flex-direction: column; gap: var(--space-4); }
.brand-lede { margin: 0; color: var(--text-secondary); font-size: var(--fs-md); }
.brand-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); border-radius: var(--radius-xl); transition: box-shadow var(--dur-fast); }
.brand-previews.single { grid-template-columns: minmax(0, 1fr); }
.brand-previews.over { box-shadow: 0 0 0 2px var(--accent-primary), 0 0 0 6px var(--focus-ring); }
.brand-previews.over .brand-tile { border-color: var(--accent-primary); }
@media (max-width: 640px) { .brand-previews { grid-template-columns: 1fr; } }
.brand-fig { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.brand-fig figcaption { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
.brand-tile { display: flex; align-items: center; justify-content: center; min-height: 112px; padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-default); overflow: hidden; min-width: 0; }
.brand-tile.light { background: var(--bg-surface); }
.brand-tile.dark {
  /* same recipe as .sidebar in app.css, so logos are previewed on the real brand surface */
  background: var(--glow-sidebar), var(--wave-sidebar) left bottom / 100% 62% no-repeat, var(--gradient-sidebar);
  background-color: var(--bg-sidebar);
  border-color: var(--bg-sidebar);
}
.brand-tile[data-sidebar-preview] { justify-content: flex-start; padding: var(--space-4) var(--space-3); }
/* Mirrors the real sidebar brand box (240px sidebar, 12px padding + 4px inset, clipped at its edge) so overflow is visible here too. */
.brand-tile[data-sidebar-preview] .lockup { width: 216px; max-width: 100%; padding: 0 var(--space-1); overflow: hidden; }
.brand-tile-img { display: block; max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.brand-tile-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.brand-tile-empty .ic { width: 22px; height: 22px; margin-bottom: 4px; }
.brand-tile-empty span { font-weight: 600; color: var(--text-secondary); }
.brand-tile-empty small { font-size: var(--fs-xs); color: var(--text-faint); }
.brand-tile.dark .brand-tile-empty, .brand-tile.dark .brand-tile-empty span { color: var(--text-sidebar); }
.brand-tile.dark .brand-tile-empty small { color: var(--text-sidebar-muted); }
.brand-meta { margin: 0; }
.brand-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.brand-formats { margin: 0; }
.brand-error { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) 12px; border-radius: var(--radius-md); background: var(--status-danger-soft); color: var(--status-danger-strong); border: 1px solid var(--status-danger-border); font-size: var(--fs-sm); line-height: 1.5; }
.brand-error .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.brand-pending { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--status-info-soft); border: 1px solid var(--status-info-border); color: var(--text-primary); }
.brand-pending b { font-size: var(--fs-sm); }
.brand-pending .grow { min-width: 160px; }
.brand-pending-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
.brand-progress { display: flex; align-items: center; gap: var(--space-3); }
.brand-progress .progress { flex: 1; }
.brand-progress-text { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* optional second row: logo for dark backgrounds */
.brand-dark { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface-subtle); }
.brand-dark > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); border-radius: var(--radius-lg); }
.brand-dark > summary::-webkit-details-marker { display: none; }
.brand-dark > summary:hover { color: var(--text-primary); }
.brand-dark > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.brand-dark-title { flex: 1; min-width: 0; }
.brand-dark-chev { display: inline-flex; color: var(--text-muted); transition: transform var(--dur-fast); }
.brand-dark[open] .brand-dark-chev { transform: rotate(180deg); }
.brand-dark-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.brand-dark-body > p { margin: 0; }
@media (max-width: 520px) {
  .brand-pending-actions { width: 100%; margin-left: 0; }
  .brand-pending-actions .btn { flex: 1; }
}

/* The sidebar preview must always show the full lockup, even when the real sidebar is collapsed to an icon rail (761–1199px). */
.brand-tile[data-sidebar-preview] .lockup .brand-word { display: block; }
.brand-tile[data-sidebar-preview] .lockup .lockup-divider { display: block; }
.brand-tile[data-sidebar-preview] .lockup .org-logo { display: inline-flex; }