/*
 * Account page (app/views/account/shell.php + assets/js/account/*). Loaded on that page only; uses the app.css
 * tokens and components (.c-btn, .c-input, .c-field, .c-alert). Logical properties only (RTL by dir="rtl").
 * States on #lh-account[data-state]: auth (forms) · loading (hint lh:acct present, before /api/auth/me) · dash.
 */
.lh-acct {
  --ac-danger-ink: #FFFFFF;
  margin-bottom: var(--s-7);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lh-acct { --ac-danger-ink: #0E0F13; } }
:root[data-theme="dark"] .lh-acct { --ac-danger-ink: #0E0F13; }

.lh-acct__auth { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) { .lh-acct__auth { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--s-6); } }
.lh-acct__dash { display: none; }
.lh-acct[data-state="loading"] .lh-acct__auth, .lh-acct[data-state="dash"] .lh-acct__auth { display: none; }
.lh-acct[data-state="loading"] .lh-acct__dash, .lh-acct[data-state="dash"] .lh-acct__dash { display: block; }
html:not(.js) .lh-acct__card { display: none; }

/* ───── Auth card ───── */
.lh-acct__card {
  padding: var(--s-5) var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm);
}
@media (min-width: 480px) { .lh-acct__card { padding: var(--s-5); } }
.lh-acct__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: var(--s-5); padding: 4px;
  background: var(--surface-2); border-radius: var(--r-btn);
}
.lh-acct__tab {
  min-height: 44px; padding: 0 var(--s-2); border: 0; border-radius: 10px; background: none;
  color: var(--text-muted); font-weight: 700; line-height: 1.2; transition: background-color var(--dur-2), color var(--dur-2);
}
.lh-acct__tab:hover { color: var(--text); }
.lh-acct__tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.lh-acct__google { width: 100%; background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.lh-acct__google:hover { background: var(--surface-2); }
.lh-acct__google .icon { width: 20px; height: 20px; }
.lh-acct__or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; color: var(--text-muted); font-size: var(--fs-14); }
.lh-acct__or::before, .lh-acct__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.lh-acct__form .c-field { margin-bottom: var(--s-4); }
.lh-acct__ftitle { margin: 0 0 var(--s-2); font-size: var(--fs-20); }
.lh-acct__ftitle:focus { outline: none; }
.lh-acct__ftext { margin: 0 0 var(--s-4); color: var(--text-muted); }
.lh-acct__opt { font-weight: 400; color: var(--text-muted); font-size: var(--fs-14); }
.lh-acct__ferr, .lh-acct__done { margin-bottom: var(--s-4); }
.lh-acct__ferr p, .lh-acct__done p { margin: 0; }
.lh-acct__ferr:focus, .lh-acct__done:focus, .lh-acct__alert:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.lh-acct__submit { width: 100%; }
.lh-acct__aside { display: flex; justify-content: flex-end; margin: calc(-1 * var(--s-3)) 0 var(--s-3); }
.lh-acct__aside--start { justify-content: flex-start; margin: var(--s-3) 0 0; }
.lh-acct__link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px; border: 0; background: none;
  color: var(--link); font-weight: 600; font-size: var(--fs-14); text-decoration: underline; text-underline-offset: .2em;
}
.lh-acct__back { width: 16px; height: 16px; }
.lh-acct__note { margin: var(--s-3) 0 0; color: var(--text-muted); font-size: var(--fs-14); }

/* Password field: show/hide button + strength meter */
.lh-acct__pw { position: relative; }
.lh-acct__pw .c-input { padding-inline-end: 52px; }
.lh-acct__eye {
  position: absolute; inset-block: 2px; inset-inline-end: 2px; display: grid; place-items: center; width: 44px;
  border: 0; border-radius: 8px; background: none; color: var(--text-muted);
}
.lh-acct__eye:hover { color: var(--text); background: var(--surface-2); }
.lh-acct__eye .i-hide, .lh-acct__eye[aria-pressed="true"] .i-show { display: none; }
.lh-acct__eye[aria-pressed="true"] .i-hide { display: inline-block; }
.lh-acct__meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: var(--s-2); }
.lh-acct__meter span { height: 4px; border-radius: 2px; background: var(--border); transition: background-color var(--dur-2); }
.lh-acct__meter[data-level="1"] span:first-child { background: var(--danger); }
.lh-acct__meter[data-level="2"] span:nth-child(-n+2) { background: var(--warning); }
.lh-acct__meter[data-level="3"] span:nth-child(-n+3) { background: var(--success); }
.lh-acct__meter[data-level="4"] span { background: var(--success); }
.lh-acct__help { display: block; min-height: 1.5em; }

/* Why an account */
.lh-acct__why { padding: var(--s-5) var(--s-4); border-radius: var(--r-card); background: var(--surface-2); }
@media (min-width: 480px) { .lh-acct__why { padding: var(--s-5); } }
.lh-acct__why-h { margin: 0 0 var(--s-4); font-size: var(--fs-20); }
.lh-acct__why-list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.lh-acct__why-list li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-muted); }
.lh-acct__why-list strong { display: block; color: var(--text); }
.lh-acct__why-ic {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--s-3);
  background: var(--brand-soft); color: var(--brand-soft-ink);
}
.lh-acct__why-note { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: var(--fs-14); font-weight: 600; }
.lh-acct__why-note .icon { color: var(--success); }

/* ───── Messages, buttons ───── */
.lh-acct__alerts:not(:empty) { margin-bottom: var(--s-4); }
.lh-acct__alerts .c-alert { max-width: none; margin-bottom: var(--s-3); }
.lh-acct__alert-b { flex: 1; min-width: 0; }
.lh-acct__alert-b p { margin: 0; }
.lh-acct__x { width: 40px; height: 40px; margin-block: -8px; margin-inline-end: -8px; flex: none; color: var(--text-muted); }
.lh-acct .c-btn:disabled, .lh-acct .c-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.lh-acct .c-btn:disabled:active { transform: none; }
.lh-acct .c-btn.is-busy { cursor: progress; }
.lh-acct .c-btn.is-busy > .icon { display: none; }
.lh-acct .c-btn.is-busy::before {
  content: ""; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-inline-end-color: transparent;
  border-radius: 50%; animation: lh-acct-spin .7s linear infinite;
}
@keyframes lh-acct-spin { to { transform: rotate(360deg); } }
.c-btn--danger { background: var(--danger); color: var(--ac-danger-ink); }
.c-btn--danger:hover { background: color-mix(in srgb, var(--danger) 88%, var(--text)); }
.lh-acct__danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); }

/* ───── Loading skeleton (no layout jump while /api/auth/me answers) ───── */
.lh-acct__dash[aria-busy="true"] { min-height: 540px; }
.lh-acct__skel {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: var(--s-2) var(--s-4); align-items: center;
  padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.lh-acct__skel-av { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); }
.lh-acct__skel-l { height: 18px; width: min(260px, 70%); border-radius: 6px; background: var(--surface-2); }
.lh-acct__skel-l--s { width: min(180px, 50%); height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .lh-acct__skel > * { animation: lh-acct-pulse 1.4s ease-in-out infinite alternate; }
  @keyframes lh-acct-pulse { to { opacity: .45; } }
}
.lh-acct__loading { margin: var(--s-4) 0 0; color: var(--text-muted); }

/* ───── Dashboard header ───── */
.lh-acct__me {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center;
  padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-sm);
}
@media (min-width: 480px) { .lh-acct__me { padding: var(--s-5); } }
.lh-acct__av {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink); font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.lh-acct__who { min-width: 0; }
.lh-acct__name { margin: 0; font-size: var(--fs-24); overflow-wrap: anywhere; }
.lh-acct__name:focus { outline: none; }
.lh-acct__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--text-muted); font-size: .9375rem; }
.lh-acct__email { overflow-wrap: anywhere; min-width: 0; }
.lh-acct__badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.lh-acct__badge .icon { width: 14px; height: 14px; }
.lh-acct__badge.is-ok { background: var(--success-soft); color: var(--success); }
.lh-acct__badge.is-warn { background: var(--warning-soft); color: var(--warning); }
.lh-acct__badge.is-g { background: var(--surface-2); color: var(--text-muted); padding-inline: 10px; }
.lh-acct__meact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
@media (min-width: 768px) {
  .lh-acct__me { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lh-acct__meact { grid-column: auto; flex-direction: column; align-items: flex-end; }
}
.lh-acct__sync { display: flex; align-items: center; gap: var(--s-2); margin: 0; color: var(--text-muted); font-size: var(--fs-14); }
.lh-acct__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--border-strong); }
.lh-acct__sync[data-state="ok"] .lh-acct__dot { background: var(--success); }
.lh-acct__sync[data-state="syncing"] .lh-acct__dot { background: var(--brand); }
.lh-acct__sync[data-state="offline"] .lh-acct__dot { background: var(--warning); }
.lh-acct__sync[data-state="error"] .lh-acct__dot, .lh-acct__sync[data-state="full"] .lh-acct__dot { background: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  .lh-acct__sync[data-state="syncing"] .lh-acct__dot { animation: lh-acct-pulse .8s ease-in-out infinite alternate; }
}
.lh-acct__mebtns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lh-acct__verify { max-width: none; margin: var(--s-4) 0 0; }
.lh-acct__verify p { margin: 0 0 4px; }
.lh-acct__verify .c-btn { color: var(--text); margin-top: var(--s-2); }
.lh-acct__dash > .c-alert--warn:not(.lh-acct__verify) { max-width: none; margin: var(--s-4) 0 0; }

/* ───── Dashboard tabs ───── */
.lh-acct__layout { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 900px) { .lh-acct__layout { grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-5); align-items: start; } }
.lh-acct__nav {
  display: flex; gap: 6px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.lh-acct__nav::-webkit-scrollbar { display: none; }
.lh-acct__navtab {
  display: inline-flex; flex: none; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  font-weight: 650; font-size: .9375rem; white-space: nowrap; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.lh-acct__navtab .icon { width: 18px; height: 18px; color: var(--text-muted); }
.lh-acct__navtab:hover { background: var(--surface-2); }
.lh-acct__navtab[aria-selected="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-soft-ink); }
.lh-acct__navtab[aria-selected="true"] .icon { color: inherit; }
@media (min-width: 900px) {
  .lh-acct__nav { position: sticky; top: var(--s-4); flex-direction: column; margin: 0; padding: 0; overflow: visible; }
  .lh-acct__navtab { justify-content: flex-start; min-height: 48px; border-color: transparent; border-radius: var(--s-3); background: none; }
}
.lh-acct__panel {
  min-height: 360px; padding: var(--s-5) var(--s-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
}
@media (min-width: 480px) { .lh-acct__panel { padding: var(--s-5); } }
.lh-acct__panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lh-acct__phead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.lh-acct__ph { margin: 0; font-size: 1.375rem; }
.lh-acct__count { margin: 0; color: var(--text-muted); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.lh-acct__pintro { max-width: 64ch; margin: var(--s-2) 0 var(--s-5); color: var(--text-muted); }

/* My wheels */
.lh-acct__wheels { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .lh-acct__wheels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lh-acct__wheel {
  position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 68px; padding: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--s-3); background: var(--bg); transition: border-color var(--dur-2);
}
.lh-acct__wheel:hover { border-color: var(--brand); }
.lh-acct__wheel:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.lh-acct__wic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-soft-ink); }
.lh-acct__wmain { flex: 1; min-width: 0; }
.lh-acct__wtitle { display: block; overflow: hidden; color: var(--text); font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.lh-acct__wtitle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lh-acct__wtitle:focus-visible { outline: none; }
.lh-acct__wmeta { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-14); line-height: 1.4; }
.lh-acct__wgo { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--link); font-size: var(--fs-14); font-weight: 700; }
.lh-acct__wgo .icon { width: 16px; height: 16px; }
.lh-acct__empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--r-card); text-align: center; }
.lh-acct__empty p { max-width: 44ch; margin: 0; color: var(--text-muted); }
.lh-acct__empty-ic { width: 32px; height: 32px; color: var(--brand); }
.lh-acct__hint { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-5) 0 0; color: var(--text-muted); font-size: var(--fs-14); }
.lh-acct__hint .icon { width: 18px; height: 18px; margin-top: 2px; }

/* History */
.lh-acct__tools { display: grid; gap: var(--s-3); align-items: end; margin-bottom: var(--s-2); }
@media (min-width: 640px) { .lh-acct__tools { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); } }
.lh-acct__tf .c-label { font-size: var(--fs-14); }
.lh-acct__tacts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 640px) { .lh-acct__tacts { grid-column: 1 / -1; } }
.lh-acct__hmsg { min-height: 1.6em; margin: var(--s-3) 0; color: var(--text-muted); }
.lh-acct__hmsg.is-err { color: var(--danger); font-weight: 650; }
.lh-acct__day { margin: var(--s-4) 0 0; padding-bottom: var(--s-2); color: var(--text-muted); font-size: var(--fs-14); font-weight: 750; }
.lh-acct__day:first-child { margin-top: 0; }
.lh-acct__hlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.lh-acct__hi { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.lh-acct__hi.is-pending { opacity: .8; }
.lh-acct__hic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-top: 2px; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); }
.lh-acct__hic .icon { width: 18px; height: 18px; }
.lh-acct__hmain { flex: 1; min-width: 0; }
.lh-acct__ht { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.lh-acct__hm { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-14); }
.lh-acct__hw, .lh-acct__ha { margin: 4px 0 0; overflow-wrap: anywhere; }
.lh-acct__hw bdi { font-weight: 650; }
.lh-acct__hk { color: var(--text-muted); font-size: var(--fs-14); font-weight: 650; }
.lh-acct__hdel { width: 44px; height: 44px; flex: none; margin-block: -6px; color: var(--text-muted); }
.lh-acct__hdel:hover { color: var(--danger); }
.lh-acct__hi .lh-acct__badge { flex: none; margin-top: 2px; }
.lh-acct__more { margin-top: var(--s-4); }

/* Profile, security, privacy */
.lh-acct__pform { max-width: 480px; margin-top: var(--s-4); }
.lh-acct__block .lh-acct__pform { margin-top: var(--s-3); }
.lh-acct__pfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.lh-acct__ok { margin: 0; color: var(--success); font-weight: 650; }
.lh-acct__ok:empty { display: none; }
.lh-acct__ro { margin: 0; padding: 11px 14px; border-radius: var(--r-field); background: var(--surface-2); overflow-wrap: anywhere; }
.lh-acct__block { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.lh-acct__phead + .lh-acct__block { margin-top: var(--s-4); padding-top: 0; border-top: 0; }
.lh-acct__bh { margin: 0 0 var(--s-2); font-size: var(--fs-18); }
.lh-acct__block--danger .lh-acct__bh { color: var(--danger); }
.lh-acct__block .lh-acct__note { margin: 0 0 var(--s-4); max-width: 64ch; }
.lh-acct__block > .c-btn { margin-top: 0; }

/* Dialog */
.lh-acct__dlg { width: min(480px, calc(100vw - 32px)); }
.lh-acct__dform { padding: var(--s-5); }
.lh-acct__dtitle { margin: 0 0 var(--s-2); font-size: var(--fs-20); }
.lh-acct__dtext { margin: 0 0 var(--s-4); color: var(--text-muted); }
.lh-acct__dform .c-field { margin-bottom: var(--s-4); }
.lh-acct__dacts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-5); }
@media (max-width: 479.98px) { .lh-acct__dacts .c-btn { flex: 1 1 auto; } }