/* Settings (Figma page 07 · More & Settings): two-pane layout (settings nav + panel) on laptop, desktop and tablet;
   on phones the panel stands alone under a back bar. Shared by /settings and every /settings/* panel
   (sub-pages link this file from their partial). */

/* Header action: borderless rust-ink button */
.set-policy { background: transparent; color: var(--rust-ink); }
.set-policy:hover { background: var(--surface-raised); }

.set-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }

/* Settings sub-navigation */
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.set-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; line-height: 18px; color: var(--ink-soft); white-space: nowrap; }
.set-nav a:hover { background: var(--surface-raised); }
.set-nav a[aria-current="page"] { background: var(--rust-wash); color: var(--rust-ink); font-weight: 600; }

/* Panel */
.set-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-head { display: flex; flex-direction: column; gap: 4px; }
.set-card .card-header { flex-wrap: wrap; }
.set-card button.link { padding: 0; border: 0; background: none; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--rust-ink); }
.set-card .input { padding: 11px 12px; color: var(--muted); }

/* Setting rows: label (+ hint) on the left, control on the right, hairline between rows */
.set-row { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.set-row:last-child { padding-bottom: 0; border-bottom: 0; }
.set-label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.set-label > p:first-child { font-weight: 600; color: var(--ink); }
.set-value { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; line-height: 18px; color: var(--ink-soft); white-space: nowrap; }
.set-value:hover { color: var(--ink); }
.set-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.set-row > .btn, .set-row > .chip { flex: none; }
.set-meter { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.set-meter > div:first-child { display: flex; align-items: center; gap: 8px; }

.settings-index { display: flex; flex-direction: column; gap: 16px; }

/* Mobile back bar (replaces the shell's mobile top bar on settings screens) */
.back-bar { display: flex; align-items: center; gap: 6px; padding: 14px 12px; color: var(--rust-ink); font-weight: 600; }

@media (max-width: 1399px) { .set-layout { grid-template-columns: 220px minmax(0, 1fr); } }
@media (max-width: 1199px) {
  .set-layout { grid-template-columns: 208px minmax(0, 1fr); }
  .set-policy { display: none; }
}
@media (max-width: 767px) {
  .topbar-m { display: none; }
  .content { gap: 16px; }
  .back-bar {
    position: sticky; top: 0; z-index: 5; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .set-layout { grid-template-columns: minmax(0, 1fr); }
  .set-nav { display: none; }
  .set-row.wrap-m { flex-direction: column; align-items: flex-start; gap: 10px; }
  .set-row.wrap-m > .set-label { flex: none; width: 100%; }
  .set-row.seg-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .seg-row > .set-label { flex: none; }
  .seg-row > .seg { display: flex; }
  .seg-row > .seg > button { flex: 1 1 0; min-width: 0; }
}