.account-portal {
  --account-record-action-width: 12rem;
  display: grid;
  gap: var(--aldelo-space-600);
  min-inline-size: 0;
  margin-block-start: var(--aldelo-space-600);
  overflow-wrap: anywhere;
}
.account-context, .account-heading, .account-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--aldelo-space-400);
}
.account-context {
  padding: var(--aldelo-space-400) var(--aldelo-space-600);
  align-items: center;
  background: var(--aldelo-color-surface);
  border: var(--aldelo-border-width) solid var(--aldelo-color-border);
  border-radius: var(--aldelo-component-panel-radius);
}
.account-context strong { display: block; }
.account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aldelo-space-200);
  padding-block-end: var(--aldelo-space-200);
  border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border);
}
.account-nav .ac-button {
  justify-content: flex-start;
  background: transparent;
  border-color: transparent;
  padding-inline: var(--aldelo-space-300);
}
.account-nav .ac-button:hover { background: var(--aldelo-color-surface-hover); }
.account-nav .ac-button:active { background: var(--aldelo-color-action-soft); }
.account-nav [aria-current="page"], .account-toolbar [aria-pressed="true"] {
  border-color: var(--aldelo-color-action);
  color: var(--aldelo-color-link);
}
.account-nav .ac-button[aria-current="page"] {
  border-color: transparent;
  box-shadow: inset 0 -2px var(--aldelo-color-action);
}
.account-context .account-badge { margin-block-start: var(--aldelo-space-100); }

.account-body, .account-panel, .account-form, .account-collection, .account-lane {
  display: grid;
  align-content: start;
  gap: var(--aldelo-space-400);
  min-inline-size: 0;
}
.account-body { gap: var(--aldelo-space-600); }
.account-panel, .account-record, .account-dialog { padding: var(--aldelo-space-600); }
.account-panel h3, .account-collection > h3, .account-lane h4 { margin: 0; font-size: var(--test-section-size); line-height: 1.25; }
.account-lane h4 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aldelo-space-200); }
.account-lane small { color: var(--aldelo-color-text-muted); }
.account-kicker, .account-board dt, .account-facts dt {
  color: var(--aldelo-color-text-muted);
  font-size: .8rem;
}
.account-panel h3 + p { margin: 0; }
.account-panel > .account-badge { justify-self: start; }
.account-panels, .account-fields, .account-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: start;
  gap: var(--aldelo-space-400);
}
.account-panels { align-items: stretch; }
.account-board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.account-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--aldelo-space-200);
}
.account-heading > .account-actions { flex: 0 1 22rem; }
.account-form > .account-actions { justify-self: start; min-inline-size: min(100%, 12rem); }
.account-fields > .test-field { grid-template-rows: subgrid; grid-row: span 3; }
.account-fields:not(:has(.account-field-hints > :not([hidden]))) > .test-field { grid-row: span 2; }
.account-field-hints { display: grid; gap: var(--aldelo-space-100); }
.account-field-hints:not(:has(> :not([hidden]))) { display: none; }
.account-check { grid-column: 1 / -1; }
.account-check > div { display: flex; align-items: center; gap: var(--aldelo-space-200); min-block-size: 3rem; }
.account-check input { flex: none; }
.account-check label { display: flex; align-items: center; min-block-size: 3rem; }
.account-field-error { color: var(--aldelo-color-danger); }
.account-status:empty { display: none; }
.account-terms { white-space: pre-wrap; }
.account-dialog {
  color: var(--aldelo-color-text);
  background: var(--aldelo-color-surface);
  border: var(--aldelo-border-width) solid var(--aldelo-color-border);
  border-radius: var(--aldelo-component-panel-radius);
  inline-size: min(34rem, calc(100% - 2rem));
  max-block-size: calc(100% - 2rem);
  overflow: auto;
}
.account-dialog > * + * { margin-block-start: var(--aldelo-space-400); }
.account-dialog::backdrop { background: var(--aldelo-color-scrim); }
.account-grid { inline-size: 100%; table-layout: auto; }
.account-grid tr > * { white-space: normal; text-align: start; overflow-wrap: anywhere; }
.account-grid .account-action-cell {
  inline-size: calc(var(--account-record-action-width) + 2 * var(--aldelo-space-400));
  vertical-align: top;
}
.account-record-actions {
  grid-auto-flow: row;
  inline-size: min(100%, var(--account-record-action-width));
  justify-self: start;
}
.account-workspace-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-200); }
.account-lane {
  padding: var(--aldelo-space-400);
  border: var(--aldelo-border-width) solid var(--aldelo-color-border);
  border-radius: var(--aldelo-component-panel-radius);
}
.account-facts { display: grid; gap: var(--aldelo-space-200); margin: 0; }
.account-facts dd { margin: 0; }
.account-summary .account-facts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--aldelo-space-400);
}
.test-main:has(#account-portal:not([hidden])) { padding-block-start: var(--aldelo-space-800); }
.account-facts + .account-actions { margin-block-start: var(--aldelo-space-400); }
.account-badge { white-space: normal; }
.account-recovery { margin-block-start: var(--aldelo-space-400); }
.account-recovery summary {
  display: list-item;
  min-block-size: 3rem;
  align-content: center;
  color: var(--aldelo-color-link);
  cursor: pointer;
}
.account-recovery > div { display: grid; gap: var(--aldelo-space-400); }
.account-placeholder {
  padding: var(--aldelo-space-400);
  border-inline-start: var(--aldelo-border-width-emphasis) solid var(--aldelo-color-border);
  background: var(--aldelo-color-surface);
}
.account-loading {
  min-block-size: 8rem;
  align-content: start;
}
@media (max-width: 48rem) {
  .account-grid, .account-grid :is(tbody, tr, th, td) { display: block; inline-size: 100%; }
  .account-grid thead { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; }
  .account-grid tbody { display: grid; gap: var(--aldelo-space-400); }
  .account-grid tr { border: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .account-grid [data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--aldelo-color-text-muted);
    font-size: .8rem;
  }
  .account-grid .account-action-cell { inline-size: 100%; }
}
@media (max-width: 31rem) {
  .account-actions { grid-auto-flow: row; }
  .account-actions:not(.account-record-actions), .account-form > .account-actions { inline-size: 100%; }
  .account-context, .account-panel, .account-record { padding: var(--aldelo-space-400); }
}
.account-actions:empty, .account-actions:not(:has(> :not([hidden]))) { display: none; }
.account-toolbar > [role="group"] { flex: 0 1 15rem; }
.account-results { min-inline-size: 0; }
.account-collection .account-form { padding-block-end: var(--aldelo-space-200); }
.account-display-hidden { display: none; }
.account-capabilities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.account-terms-language { max-inline-size: 15rem; }
@media (max-width: 56rem) {
  .account-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 31rem) {
  .account-capabilities { grid-template-columns: minmax(0, 1fr); }
}