/* Settings · page layout only: the settings bands (heading beside the rows), the theme swatches and the locking strip. */
@layer page {
  .set { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 var(--s8); align-items: start; }
  .set__rows { min-width: 0; }

  /* Theme swatches depict the two themes themselves, so they use the fixed paper and navy values in either theme. */
  .set-sw { display: grid; grid-template-columns: 30% 1fr; height: 72px; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line); }
  .set-sw i { display: block; }
  .set-sw[data-sw="paper"] i:first-child { background: var(--ink-50); } .set-sw[data-sw="paper"] i:last-child { background: var(--sheet-2); }
  :root[data-theme="night"] .set-sw[data-sw="paper"] i:last-child { background: var(--ink-100); }
  .set-sw[data-sw="night"] i:first-child { background: var(--navy-990); } .set-sw[data-sw="night"] i:last-child { background: var(--navy-950); }
  .set-sw[data-sw="shift"] i:first-child { background: linear-gradient(180deg, var(--ink-50) 50%, var(--navy-990) 50%); }
  .set-sw[data-sw="shift"] i:last-child { background: linear-gradient(180deg, var(--ink-100) 50%, var(--navy-950) 50%); }

  /* Locking: signed in → locked → signed out, drawn to scale. */
  .set-lock, .set-lock-k { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 3px; }
  .set-lock { height: 36px; margin-top: var(--s3); }
  .set-lock i { border-radius: var(--r1); display: flex; align-items: center; padding: 0 var(--s3); font-style: normal; font-size: var(--t-cap); font-weight: 600; white-space: nowrap; overflow: hidden; }
  .set-lock i:nth-child(1) { background: var(--accent-soft); color: var(--accent-text); }
  .set-lock i:nth-child(2) { background: var(--sheet-sunk); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
  .set-lock i:nth-child(3) { color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-2); }
  .set-lock-k { margin-top: var(--s2); font-size: var(--t-cap); color: var(--text-3); }

  @media (max-width: 900px) {
    .set { grid-template-columns: minmax(0, 1fr); }
    .set-sw { height: 48px; }
    .set-lock i { padding: 0 var(--s2); }
  }
}