/* View: Ustawienia (js/views/settings.js). Narrow column of plain sections: kicker head + one caption line,
   .setting-row = label block with the control under it (phone) or beside it (desktop). */
@layer views {
.set-head { margin-bottom: 10px; }
.set-head .section-title { margin-bottom: 4px; min-height: 0; }
.set-head .cap { margin: 0; }
.settings-card > .field-hint { display: block; margin: 0 0 4px; }

/* plan banner: the one boxed role surface on this page */
.plan-banner .setting-row { padding: 0; }
.plan-banner .btn { justify-self: start; }

/* label + control */
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0; }
.setting-row > div:first-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.setting-row b { font-weight: 600; }
.setting-row > div:first-child > .muted { font-size: var(--fs-caption); color: var(--ink-2); }
.setting-row .set-aside { font-size: inherit; font-weight: 500; }
.settings-card .segmented { justify-self: start; flex-wrap: nowrap; }
.set-money { margin-top: 8px; }

/* accent swatches: exact accent colour per theme */
.swatch-btn span { background: var(--c-l, var(--hue)); }
:root[data-theme="dark"] .swatch-btn span, :root[data-theme="oled"] .swatch-btn span { background: var(--c-d, var(--hue)); }

/* message templates */
.msg-block { margin-top: 14px; }
.msg-block + .msg-block { margin-top: 22px; }
.msg-block .field { margin-bottom: 0; }
.token-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.token-chip { min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
@media (hover: hover) { .token-chip:hover { background: var(--accent-soft); color: var(--accent); } }
.msg-preview { margin: 10px 0 0; padding: 12px 14px; background: var(--paper-2); border-radius: var(--r-ctl); font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.4; }
.msg-preview b { display: block; margin-top: 4px; color: var(--ink); font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }

/* creator code: field + button on one line */
.set-inline { display: flex; gap: 10px; align-items: flex-end; }
.set-inline .field { flex: 1; min-width: 0; margin-bottom: 0; }
.set-inline .btn { flex: none; }

/* one column on every screen: the cards follow each other in order, in a comfortable width, centred in the window */
.page-narrow:has(.settings-cols) { max-width: 880px; margin-inline: auto; }
.settings-card { container-type: inline-size; }

/* shortcuts sheet */
.kbd-list { display: grid; }
.kbd-list > div { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--rule); }
.kbd-list > div:first-child { border-top: 0; }
.kbd-list kbd { min-width: 64px; text-align: center; }
.kbd-list span { color: var(--ink); }

@media (max-width: 760px) {
  .token-chip { min-height: 44px; }
  .settings-card .segmented { justify-self: stretch; }
  /* Motyw: five options do not fit one row at 360–390 px — "Jak w telefonie" on its own row, then a 2 × 2 grid */
  .settings-card .seg-theme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .seg-theme button:first-child { grid-column: 1 / -1; }
}
/* label beside its control only when the card itself is wide enough (container query, not the screen width) */
@container (min-width: 600px) {
  .setting-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; }
}
/* the theme picker is the widest control: below its label unless the card is really wide */
@container (max-width: 879px) {
  .setting-row:has(.seg-theme) { grid-template-columns: minmax(0, 1fr); }
}
}