/* account page — Direction 3: white paper page, softly tinted panels with hairlines,
   no colour bands, no shadows, 2px corners. Loaded after styles.css and app-d3.css.
   Every handler, API call and state stays exactly as it was. */

/* Page head */
.hj-account .hj-h1{margin-bottom:24px}

/* Panels: .hj-card already gives the tinted panel + hairline + 2px in app-d3.css. */
.hj-account__section{padding:24px 28px;margin-bottom:16px}
.hj-account__title{font-size:22px;margin-bottom:6px}
.hj-account__intro{margin:0 0 4px}

/* Rows: label / field grid on desktop, hairline between rows, values left-aligned
   in the second column so inputs, chips and buttons all start on the same line. */
.hj-account__row{
  display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 24px;
  align-items:start;padding:16px 0;border-top:1px solid var(--hj-edge);
}
.hj-account__title + .hj-account__row,
.hj-account__title + form > .hj-account__row:first-child,
.hj-account__intro + .hj-account__row{border-top:0}
.hj-account__label{font-size:14px;font-weight:600;color:var(--hj-muted);line-height:44px}
.hj-account__value{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--hj-fg);min-width:0}
.hj-account__input{flex:1 1 240px;min-width:0}
.hj-account__err{font-size:14px;color:var(--hj-warn)}
.hj-account__notice{margin-top:14px;border-radius:2px}
.hj-account__legal{gap:20px}

/* Chips inside rows are flat tags. */
.hj-account__section .hj-chip{border-radius:2px}

/* Delete dialog: square inputs and actions, same frame as the page. */
.hj-account__confirm-label{display:block;margin:14px 0 6px;line-height:1.4}
.hj-account__confirm-input{width:100%}

/* Phones: rows stack, label above the field. */
@media (max-width: 760px) {
  .hj-account__section{padding:18px}
  .hj-account__row{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0}
  .hj-account__label{line-height:1.4}
}