/* Settings sheet styles (wave B2 owner: settings). js/v2/sheets/settings*.mjs.
   Inset grouped form on the sheet surface; every colour, type style, radius
   and duration comes from tokens.css. */

/* ---------------------------------------------------------------- page */
.st-page { padding-top: 20px; }
.st-page > .ui-sec:last-of-type { padding-bottom: 8px; }
.st-editor > .ui-actionbar { margin-top: var(--gap-group); }
.st-editor .ui-btn-primary { flex: 1; }
.st-editor .ui-actionbar-lead:empty { display: none; }
.st-slot:empty { display: none; }
.st-slot { margin: 0 var(--margin) var(--gap-group); }

/* a section with only a footer (delete-last explanation) */
.st-page .ui-sec > .ui-group:empty { display: none; }
.st-page .ui-sec > .ui-group:empty + .ui-sec-foot { margin-top: 0; }

/* hairlines between rows that sit inside a field wrapper */
.st-field-wrap + .st-field-wrap > .ui-row::before,
.st-field-wrap + .ui-row::before,
.ui-row + .st-field-wrap > .ui-row::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--sep-inset, 16px); height: 1px;
  background: var(--sep); transform: scaleY(0.5); transform-origin: 0 0;
}

/* ---------------------------------------------------------------- fields */
.st-field { gap: 12px; }
.st-field-label { flex: 1 1 auto; min-width: 0; color: var(--label); }
.st-field-ctl { flex: 0 1 58%; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.st-input {
  flex: 1; min-width: 0; width: 100%; min-height: var(--tap-min); margin: calc(-1 * var(--cell-pad-y)) 0;
  padding: 0; border: 0; outline: 0; background: none;
  color: var(--label-2); caret-color: var(--tint); text-align: right;
  font: var(--t-body); letter-spacing: var(--tr-body); font-variant-numeric: tabular-nums;
}
.st-input:focus { color: var(--label); }
.st-input::placeholder { color: var(--label-3); }
.st-input[aria-invalid="true"] { color: var(--neg); }
.st-suffix { flex: none; color: var(--label-2); font: var(--t-body); letter-spacing: var(--tr-body); }
.st-error {
  margin: 0; padding: 0 16px var(--cell-pad-y);
  color: var(--neg); font: var(--t-footnote); letter-spacing: var(--tr-footnote);
}
.st-error[hidden] { display: none; }
.ui-sec-foot .st-error { padding: 4px 0 0; }

/* label above a full-width segmented control */
.st-choice { flex-direction: column; align-items: stretch; gap: 8px; }
.st-choice .ui-seg { width: 100%; }
/* the options share the width, so four French labels fit at 393 px */
.st-choice .ui-seg-btn { flex: 1 1 auto; min-width: 0; padding: 0 8px; }
/* label and segmented control on one line */
.st-inline .ui-cell-label { flex: 1 1 auto; min-width: 0; }
.st-inline .ui-seg { flex: 0 0 auto; min-width: 168px; }

/* ---------------------------------------------------------------- action rows
   iOS 26 grouped settings: an action row is a white label (with an optional
   leading line icon); destructive actions are red and centred. Never blue. */
.st-action { justify-content: flex-start; color: var(--label); font: var(--t-body); letter-spacing: var(--tr-body); text-align: left; }
.st-action.is-destructive { color: var(--neg); justify-content: center; text-align: center; }
.st-action:disabled { color: var(--label-3); }
.st-action-label { min-width: 0; overflow-wrap: anywhere; }
.st-action-ico { width: var(--icon-glass); height: var(--icon-glass); flex: none; color: var(--label-2); stroke-width: var(--icon-stroke); }

/* ---------------------------------------------------------------- no truncation (N20)
   Settings labels, secondary lines and values wrap instead of ending in "…". */
.st-page .ui-cell-main { flex: 1 1 auto; min-width: 0; }
.st-page .ui-cell-label,
.st-page .ui-cell-sec { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.st-page .ui-cell-value { max-width: 55%; white-space: normal; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- group members */
.st-member { width: 100%; }
.st-member .st-check { width: 18px; height: 18px; flex: none; color: var(--tint); stroke-width: 2.4; opacity: 0; transform: scale(0.8);
  transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out); }
.st-member[aria-checked="true"] .st-check { opacity: 1; transform: none; }
.st-member:disabled .ui-cell-label { color: var(--label-3); }

/* ---------------------------------------------------------------- banner */
.st-banner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 16px 6px; border-radius: var(--radius);
  background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--warn);
}
.st-banner-text { margin: 0; color: var(--label); font: var(--t-subhead); letter-spacing: var(--tr-subhead); }
.st-banner-btn { padding: 0; }

/* ---------------------------------------------------------------- diagnostics */
.st-code {
  display: inline-block; max-width: 14em; overflow-wrap: anywhere; vertical-align: bottom;
  color: var(--label-2); font: var(--t-footnote); font-family: var(--font-mono);
}
.st-log-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0 var(--margin) 6px; }
.st-log { max-height: none; }
.st-log-row { align-items: baseline; gap: 8px; min-height: 0; padding-top: 7px; padding-bottom: 7px; }
.st-log-ts, .st-log-lvl { flex: none; color: var(--label-2); font: var(--t-caption1); letter-spacing: var(--tr-caption1); font-variant-numeric: tabular-nums; }
.st-log-lvl { min-width: 3.4em; }
.st-log-row--warn .st-log-lvl { color: var(--warn); }
.st-log-row--error .st-log-lvl { color: var(--neg); }
.st-log-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--label); font: var(--t-caption1); letter-spacing: var(--tr-caption1); }
.st-log-empty { margin: 0; color: var(--label-2); }

@media (prefers-reduced-motion: reduce) {
  .st-member .st-check { transition: none; }
}

/* ---------------------------------------------------------------- update prompt
   (owner: platform, js/v2/sw-register.mjs installUpdatePrompt): "Update
   available · Reload" as one glass capsule floating above the tab bar, where
   the status toast sits. The capsule look comes from .glass; the Reload
   button is the foundation's small primary capsule. */
.v2-update {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--tabbar-inset) + 12px);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - var(--margin) * 2);
  box-sizing: border-box;
  padding: 6px 6px 6px 18px;
  border-radius: var(--radius-capsule);
  color: var(--label);
  font: var(--t-secondary); letter-spacing: var(--tr-secondary);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity var(--dur-fade) var(--ease-linear), transform var(--dur-tween) var(--ease-out);
}
.v2-update.is-shown { opacity: 1; transform: translate(-50%, 0); }
.v2-update__text { min-width: 0; white-space: nowrap; }
.v2-update .ui-capsule { flex: none; }
@media (min-width: 1024px) {
  .v2-update { left: calc(50% + var(--sidebar-w) / 2); bottom: var(--gap-group); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-update { transition: none; }
}

/* ---------------------------------------------------------------- account editor: monthly entry (one choice, a check on it) */
.st-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--row-min); padding-top: var(--cell-pad-y); padding-bottom: var(--cell-pad-y);
  text-align: left; color: var(--label);
}
.st-option-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-option-text .ui-cell-sec { white-space: normal; }
.st-option > .ui-ico { flex: none; color: var(--label); }
.st-option-blank { flex: none; width: var(--icon); height: var(--icon); }

/* ---------------------------------------------------------------- account editor: colour (Automatic + round swatches, a check on the chosen one) */
.st-swatch-dot {
  flex: none; width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--sw);
}
.st-swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tap-min), 1fr));
  gap: 4px; justify-items: center;
}
.st-swatch {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min); padding: 0;
  border-radius: var(--radius-full);
  background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.st-swatch::before {
  content: ""; position: absolute; width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--sw);
  transition: transform var(--dur-fade) var(--ease-out);
}
.st-swatch:active::before { transform: scale(0.9); }
.st-swatch[aria-checked="true"]::before { box-shadow: 0 0 0 2px var(--chart-halo, var(--cell)), 0 0 0 4px var(--label); }
.st-swatch .ui-ico { position: relative; width: 18px; height: 18px; color: var(--sw-ink); stroke-width: 2.4; }
.st-swatch:focus-visible { outline: 2px solid var(--tint); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  .st-swatch::before { transition: none; }
}

/* the small "Grouped" tag beside an account grouped in Other accounts */
.st-tag {
  display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 999px;
  background: var(--fill); color: var(--label-2);
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); vertical-align: 2px;
}