/* Design v2 on Home and Records (design.md "Design system v2"). Page layout only;
   components come from vault-tokens.css. Loaded after the older vault CSS. */

html:has(body.ds-canvas), body.ds-canvas { background: var(--ds-canvas); }

.ds-canvas .vault-main { padding-top: var(--ds-s5); padding-left: var(--ds-inset); padding-right: var(--ds-inset); }
.ds-section { margin: var(--ds-s6) 0 var(--ds-s3); }
.ds-lede { margin: var(--ds-s2) 0 var(--ds-s4); }
.ds-btn--block { display: flex; width: 100%; box-sizing: border-box; }
.ds-note { margin-top: var(--ds-s4); }
.ds-note a { display: inline-flex; align-items: center; min-height: var(--ds-target); color: var(--ds-deep); font-weight: 600; }
.ds-check { display: flex; flex-direction: column; gap: var(--ds-s4); background: var(--ds-soft); border-color: var(--ds-soft); }
.ds-card .ds-lede:first-of-type { margin-top: var(--ds-s2); }

/* Rows that are buttons (switch person) look like link rows */
button.ds-list__row { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.ds-row__add {
  flex: none; display: inline-flex; align-items: center; min-height: var(--ds-target);
  padding: 0 var(--ds-s4); border: 2px solid var(--ds-deep); border-radius: var(--ds-radius);
  color: var(--ds-deep); font: 600 16px/24px var(--ds-font);
}
.ds-tile__icon--text { font: 600 18px/24px var(--ds-font); }
.ds-list__row .ds-tile__icon { width: 48px; height: 48px; }
form.ds-form-row { margin: 0; }