/* Account workspace: compact information density at the browser's normal zoom.
   Loaded only by account.html, after the shared storefront styles. */
body[data-nav="account.html"] { --maxw: 1360px; }
body[data-nav="account.html"] #main > .wrap {
  margin-top: 16px;
  padding-top: 20px;
  padding-bottom: 32px;
}
.acct-head { align-items: center; justify-content: space-between; gap: 12px 20px; padding: 0 0 20px; }
.acct-identity { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 320px; }
.acct-head h1 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; overflow-wrap: anywhere; }
.acct-head .eyebrow { font-size: 10px; letter-spacing: .14em; }
.acct-head [data-acct-sub] { font-size: 14px; overflow-wrap: anywhere; }
.acct-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.acct-actions .btn { min-height: 44px; padding: 8px 16px; font-size: 13px; }
body[data-nav="account.html"] #main .acct-staff-notice { padding: 10px 14px; margin-bottom: 16px; font-size: 13px; border-radius: var(--radius-sm); }
.acct-layout { grid-template-columns: 176px minmax(0, 1fr); gap: 20px; }
.acct-rail { top: calc(var(--staff-preview-height, 0px) + 88px); gap: 2px; }
.acct-navitem { padding: 0 12px; font-size: 13px; gap: 9px; }
.acct-navitem svg { width: 17px; height: 17px; }
.acct-section { gap: 16px; }
.acct-section-head h2 { font-size: 21px; }
/* Section gap owns vertical spacing; child margins used to add another 52px. */
.acct-section .dash-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.acct-section .dash-card { min-width: 0; padding: 18px; border-radius: 12px; }
.acct-section .dash-card h3 { font-size: 17px; }
.acct-section .fin-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
.acct-section .fin-tile { min-width: 0; padding: 14px; border-radius: 12px; }
.acct-section .fin-label { font-size: 10px; letter-spacing: .04em; }
.acct-section .fin-value { margin-top: 6px; font-size: 21px; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* HQ-1231: Credit limit / Remaining credit name their currency explicitly - same
   small, muted code-before-amount look store.css's .price .now .cur already uses. */
.acct-section .fin-value .cur { font-size: 11px; color: var(--text-mut); margin-right: 3px; }
/* Keep data tables inside their card, including populated mobile histories. */
.acct-section :is([data-panel-body], [data-full-list-body]),
.acct-section [data-account-pricing] .dash-card { position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.acct-section .specs-table td { padding: 10px 14px 10px 0; }
.acct-section .specs-table .sr-only { padding: 0; }
.acct-section .specs-table thead,
.acct-section .specs-table td:nth-child(2),
.acct-section .specs-table .cell-num { white-space: nowrap; }
.acct-section .specs-table td:first-child { width: auto; }
.acct-section :is([data-panel-body="orders"], [data-full-list-body="orders"], [data-panel-body="invoices"], [data-full-list-body="invoices"]) :is(td:first-child, td:nth-child(3)) { white-space: nowrap; }

@media (max-width: 1199px) {
  .acct-section .fin-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .acct-layout { grid-template-columns: minmax(0, 1fr); }
  /* Retain the existing floating bottom navigation and its touch targets. */
  .acct-rail { top: auto; gap: 1px; }
  .acct-navitem { padding: 4px 1px; font-size: 9px; gap: 3px; }
  body:has(.acct-rail) .sa-btn { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 920px) {
  .acct-section .dash-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body[data-nav="account.html"] #main > .wrap { margin-top: 0; padding-top: 16px; }
  .acct-head { padding-bottom: 16px; }
  .acct-section { gap: 12px; }
  .acct-section .dash-card { padding: 16px; }
  .acct-section .fin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-section .fin-tile { padding: 12px; }
  .acct-section .fin-value { font-size: 18px; }
}
@media (max-width: 374px) {
  .acct-section .fin-tiles { grid-template-columns: minmax(0, 1fr); }
}