/* 总览 · Link connect panel · account menu and logout/switch confirmation
   (views/dashboard.js, connect.js, account.js). Design A tokens only, so dark mode follows tokens.css.
   Prefixes: dash- (dashboard), lc- (connect panel), acct- (account). */

/* =========================================================================
   Dashboard
   ========================================================================= */
.dash-alerts { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.dash-alerts:empty { display: none; }
.dash-alerts:not(:empty) + .dash-top > .statement { margin-top: var(--space-2); }

.dash-top--connect { margin-top: var(--space-7); }
.dash-promises:empty { display: none; }

.dash-body { margin-top: var(--space-9); }
@media (min-width: 1024px) { .dash-body { margin-top: var(--space-10); } }
.dash-main { display: flex; flex-direction: column; min-width: 0; }
.dash-first-slot:empty { display: none; }
.dash-first .empty { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.dash-aside { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

.dash-na { color: var(--text-3); }
.dash-cell--spent .statement__value { color: var(--warning-text); }

/* 进行中 head: title + live dot on the left, sync + link on the right */
.dash-head { flex-wrap: wrap; align-items: center; row-gap: var(--space-2); }
.dash-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.dash-head__tools { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
@media (max-width: 479px) {
  .dash-head .sync-control__time { display: none; }
  .dash-head__tools { gap: var(--space-3); }
}

/* waiting rows: QR placeholder until the detail (with its QR) has loaded */
.dash-qr { text-decoration: none; }
.dash-qr__empty { display: grid; place-items: center; width: calc(var(--qr-size) + 14px); aspect-ratio: 1; color: var(--text-disabled); background: var(--surface-muted); }
.dash-approx { color: var(--text-3); }

/* ready cards: the card itself, hero size (graft from B) */
.dash-ready {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
}
@media (min-width: 600px) {
  .dash-ready { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
}
.dash-ready__card { min-width: 0; }
.dash-ready__card .vcard { transition: transform var(--dur-base) var(--ease-out); }
.dash-ready__card .vcard:hover { transform: translateY(-2px); }
@media (max-width: 599px) { .dash-ready__card .vcard { margin: 0 auto; } }
.dash-ready__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-ready__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.dash-ready__title .req__name { min-width: 0; }
.dash-ready__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); }
.dash-ready__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dash-ready__foot > .req__timer { margin-left: 0; padding-left: 0; }
@media (max-width: 599px) {
  /* like .req on phones: timer + 详情 share the first row, 显示卡号 takes the second */
  .dash-ready__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-2); padding-top: var(--space-3); }
  .dash-ready__actions { display: contents; }
  .dash-ready__foot > .req__timer { grid-row: 1; grid-column: 1; margin: 0; padding: 0; }
  .dash-ready__actions > .btn--ghost { grid-row: 1; grid-column: 2; justify-self: end; margin-right: calc(-1 * var(--space-3)); }
  .dash-ready__actions > .btn--primary { grid-row: 2; grid-column: 1 / -1; }
}

/* nothing in flight */
.dash-calm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-5); }
@media (min-width: 768px) { .dash-calm { padding: var(--space-5) var(--space-6); } }
.dash-calm__mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.dash-calm__text { flex: 1 1 220px; min-width: 0; }
.dash-calm__title { font-weight: var(--weight-heading); color: var(--text); }
.dash-calm__sub { margin-top: 2px; font-size: var(--text-sm); color: var(--text-3); }

.dash-others { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-sm); line-height: 1.6; color: var(--text-3); }
.dash-others > .icon { flex: none; margin-top: 3px; }
.dash-others > a { white-space: nowrap; }

/* another account's record in the recent list (§13) */
.dash-sub { display: flex; align-items: center; gap: var(--space-2); }
.dash-sub > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dash-acct {
  display: inline-block;
  flex: none;
  max-width: 18ch;
  padding: 1px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-3);
  font-size: var(--text-2xs);
  line-height: 1.5;
  vertical-align: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-chips { margin-top: var(--space-4); }
.dash-chip-skel { width: 104px; height: 36px; border-radius: var(--radius-pill); }
.dash-month__note { margin-bottom: var(--space-4); }

/* =========================================================================
   Link connect panel
   ========================================================================= */
.lc-connect { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.lc-connect:focus { outline: none; }

.lc-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.lc-intro__mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.lc-connect--expired .lc-intro__mark { background: var(--warning-soft); color: var(--warning-text); }
.lc-intro__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}
.lc-intro__text { max-width: 34em; color: var(--text-2); }
.lc-intro > .banner { align-self: stretch; }
.lc-intro__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.lc-intro__note { font-size: var(--text-xs); line-height: 1.6; color: var(--text-3); }
@media (max-width: 599px) { .lc-intro__actions > .btn { flex: 1 1 100%; } }

/* "连接只需三步" beside the intro */
.connect__aside.lc-how { align-items: stretch; justify-content: center; gap: var(--space-5); }
.lc-how__heading { font-size: var(--text-sm); font-weight: var(--weight-heading); color: var(--text-2); }
.lc-how__list { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; }
.lc-how__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); }
.lc-how__num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.lc-how__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-how__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.lc-how__desc { font-size: var(--text-xs); line-height: 1.55; color: var(--text-3); }

/* pending login */
.lc-verify .btn__caption { overflow-wrap: anywhere; }
.lc-connect .step--done .step__num .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.lc-connect .connect__expiry .ring__time { font-size: var(--text-base); }
@media (min-width: 600px) { .lc-connect--modal .phrase__text { font-size: 26px; } }
@media (max-width: 599px) {
  /* a phone cannot scan its own screen: the button opens Link directly */
  .lc-qr { display: none; }
  .lc-connect .connect__expiry { padding-top: 0; border-top: 0; }
  /* full-width step bodies and an icon-only copy button keep the phrase on one line */
  .lc-connect .step__body { grid-column: 1 / -1; }
  .lc-connect .phrase { padding-left: var(--space-4); }
  .lc-connect .phrase .copy-btn { justify-content: center; width: 40px; padding: 0; gap: 0; font-size: 0; }
}

/* connected / checking */
.lc-done__title { font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: 1.35; }
.lc-done__text { color: var(--text-2); overflow-wrap: anywhere; }
.lc-done .btn { min-width: 120px; margin-top: var(--space-2); }
.lc-checking { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8) var(--space-5); color: var(--text-2); }
.lc-checking__text { font-size: var(--text-base); font-weight: var(--weight-regular); }

/* in a modal: the dialog is the frame; the panel loses its own border */
.modal.lc-connect-modal { width: min(880px, calc(100vw - 2 * var(--space-4))); }
.lc-connect-modal .modal__body { gap: 0; padding: var(--space-5) 0 0; }
.lc-connect-modal .modal__foot { display: none; }
.lc-connect--modal { border-width: 1px 0 0; border-radius: 0; }
@media (max-width: 599px) { .modal.lc-connect-modal { width: 100%; } }

/* =========================================================================
   Account menu + logout / switch confirmation (§13)
   ========================================================================= */
.menu__avatar.acct-avatar--on { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.popover.acct-menu { min-width: 264px; }

.acct-confirm { display: flex; flex-direction: column; gap: var(--space-4); }
.acct-lead { font-size: var(--text-sm); line-height: 1.65; color: var(--text-2); }

.acct-active { display: flex; flex-direction: column; gap: var(--space-3); }
.acct-active[aria-busy="true"] { gap: var(--space-2); }
.acct-active__title { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-heading); }
.acct-list { max-height: 224px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); list-style: none; }
@media (max-width: 599px) { .acct-list { max-height: 160px; } }
.acct-row + .acct-row { border-top: 1px solid var(--border); }
.acct-row__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: 9px var(--space-4); color: inherit; text-decoration: none; }
.acct-row__link:hover { background: var(--row-hover); color: inherit; }
.acct-row__name { overflow: hidden; color: var(--text); font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.acct-row__amount { color: var(--text); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.acct-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); grid-column: 1 / -1; font-size: var(--text-xs); color: var(--text-3); }
.acct-note { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.6; color: var(--text-2); }
.acct-note > .icon { flex: none; margin-top: 3px; color: var(--accent); }

/* 「同时取消这些进行中的申请」: a quiet checkbox row that turns red when armed */
.acct-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.acct-check:hover { border-color: var(--input-border); }
.acct-check__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.acct-check__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: transparent;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.acct-check__box .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.acct-check__input:checked + .acct-check__box { border-color: var(--danger-text); background: var(--danger-text); color: var(--surface); }
.acct-check__input:focus-visible + .acct-check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.acct-check:has(.acct-check__input:checked) { border-color: var(--danger-border); background: var(--danger-soft); }
.acct-check__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-check__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.acct-check__hint { font-size: var(--text-xs); line-height: 1.5; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .dash-ready__card .vcard, .acct-check, .acct-check__box { transition: none; }
  .dash-ready__card .vcard:hover { transform: none; }
}