.account-section { padding-block: var(--space-8); }

.account-layout {
  display: grid;
  align-items: start;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}

.account-subnav {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  border-top: 1px solid var(--av-line);
}

.account-subnav a {
  position: relative;
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--av-line);
  color: var(--av-ink-soft);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.account-subnav a::after {
  position: absolute;
  top: 50%;
  right: .25rem;
  width: 0;
  height: 1px;
  background: var(--av-brass);
  content: "";
  transition: width var(--duration);
}

.account-subnav a:hover,
.account-subnav a.is-active { color: var(--av-forest); }

.account-subnav a.is-active::after { width: 2rem; }

.account-panel {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--av-line);
  background: var(--av-white);
  box-shadow: var(--av-shadow-sm);
}

.account-panel + .account-panel { margin-top: 1.25rem; }

.account-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--av-line);
  margin-bottom: 1.5rem;
}

.account-panel-head h2 {
  margin: 0;
  font-family: var(--font-subtitle);
  font-size: var(--type-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--type-subtitle-leading);
  color: var(--type-color-subtitle);
}
.account-panel-head p {
  margin: 0;
  color: var(--type-color-body);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--font-weight-body);
  line-height: var(--type-body-leading);
}

.account-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--av-line);
}

.account-metric {
  display: grid;
  min-height: 8rem;
  align-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem;
  background: var(--av-paper);
}

.account-metric-label {
  color: var(--av-ink-faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.account-metric-value {
  color: var(--av-forest);
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.account-metric-value--code {
  font-family: var(--font-body);
  font-size: .85rem;
  word-break: break-all;
}

.account-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.account-stay-note {
  padding: 1rem;
  border-left: 2px solid var(--av-brass);
  background: var(--av-paper);
  color: var(--av-ink-soft);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--type-body-leading);
  text-transform: none;
}

.nrc-field { display: grid; gap: .55rem; }
.nrc-field-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nrc-field-label em { color: var(--av-ink-faint); font-size: .68rem; font-style: normal; }
.nrc-row {
  display: grid;
  align-items: center;
  grid-template-columns: 4rem auto minmax(7rem, 1fr) 5.5rem minmax(7rem, 1fr);
  gap: .4rem;
}
.nrc-hint { margin: 0; color: var(--av-ink-faint); font-size: .72rem; }

.record-list,
.record-simple-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.record-list li + li,
.record-simple-list li + li { border-top: 1px solid var(--av-line); }

.record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem .25rem;
  text-decoration: none;
  transition: padding var(--duration), background var(--duration);
}

.record-row:hover {
  padding-inline: 1rem;
  background: var(--av-paper);
}

.record-main,
.record-meta { display: grid; gap: .2rem; }
.record-main span,
.record-meta { color: var(--av-ink-soft); font-size: .8rem; }
.record-meta { text-align: right; }

.record-badge {
  color: var(--av-forest);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.record-kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--av-line);
}

.record-kv > div {
  padding: 1rem;
  background: var(--av-paper);
}

.record-kv dt {
  color: var(--av-ink-faint);
  font-size: .68rem;
  text-transform: uppercase;
}

.record-kv dd { margin: .35rem 0 0; }

.account-back { grid-column: 2; }

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-subnav {
    position: static;
    display: flex;
    overflow-x: auto;
  }
  .account-subnav a { min-width: max-content; padding-inline: 1rem; }
  .account-subnav a::after { display: none; }
  .account-metrics { grid-template-columns: repeat(2, 1fr); }
  .account-back { grid-column: auto; }
}

@media (max-width: 600px) {
  .account-form-grid,
  .record-kv { grid-template-columns: 1fr; }
  .account-panel { padding: 1.15rem; }
  .record-row { align-items: flex-start; flex-direction: column; }
  .record-meta { text-align: left; }
  .nrc-row { grid-template-columns: 3.5rem auto 1fr; }
  .nrc-row .nrc-type,
  .nrc-row .nrc-id { grid-column: span 1; }
}