/* Air Market - v6 personalization (W5).  Paired JS: assets/js/v6/me.js.
   Every rule scoped under :root[data-v6="on"] - see store-v6-core.css for the
   layer-flag contract. Tokens only, cursors via var(--cur-*), no hardcoded hex,
   no U+2014.

   The row bones (.v6-rec-head, .v6-rec-cards, .v6-rec-cell, .v6-dismiss,
   .v6-rec-why) are shared with the recommendation rows and live in
   store-v6-rec.css. This sheet adds what is strip-specific - the discover slot,
   the collections row and the "why" panel body - and, below those, the #/me
   account page, which is the same feature seen as a page rather than as rows. */

/* The discover slot: the strips sit after the hero and before the ranked lists.
   Empty for a fresh visitor beyond the editorial collections row (§7.2), so it
   adds no vertical rhythm it has not earned. */
:root[data-v6="on"] .v6-strips:empty { display: none; }
:root[data-v6="on"] .v6-strips > .v6-strip:first-child { margin-top: var(--space-24); }

:root[data-v6="on"] .v6-strip-all {
  font-family: var(--font-main);
  font-size: var(--text-body-s-size, 0.8125rem);
  color: var(--color-text-link, var(--color-brand-600));
  text-decoration: none;
  white-space: nowrap;
}
:root[data-v6="on"] .v6-strip-all:hover { text-decoration: underline; }

/* The collections row: cover-art tiles, one line, scrolls on a phone. */
:root[data-v6="on"] .v6-colls-row {
  display: flex;
  gap: var(--space-16);
  overflow-x: auto;
  padding-bottom: var(--space-8);
  -webkit-overflow-scrolling: touch;
}
:root[data-v6="on"] .v6-colls-row .v6-card-coll { flex: 0 0 17rem; max-width: 17rem; }

/* ========================================================== #/me - the account
   Three stacked blocks on one column: who you are, what is stored, what you can
   do. Deliberately NOT the creator storefront's shape (store-v6-creator.css):
   that page has a banner and tabs because it is a shop window somebody else
   reads, and this one is a settings page you read about yourself. Sharing the
   layout would make the private page look like a public profile.

   The column is capped at reading measure rather than filling a 1440px window,
   because every block here is prose plus a control. */

:root[data-v6="on"] .v6-account { max-width: 46rem; }

/* The identity row: avatar, name block, and the one action that belongs beside
   a name. Wraps rather than shrinking on a phone - an avatar and a sign-out
   button squeezing an email into three lines is the usual failure here. */
:root[data-v6="on"] .v6-acct-head {
  display: flex;
  /* flex-start, not center: signed out the meta column is a heading plus two
     lines of prose plus a button row, and centring against that leaves the
     avatar floating in the middle of the block with nothing beside it. Aligned
     to the top it sits with the name, which is what it stands for. */
  align-items: flex-start;
  gap: var(--space-16);
  flex-wrap: wrap;
  padding: var(--space-20) 0 var(--space-24);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-neutral-200));
}
:root[data-v6="on"] .v6-acct-meta { flex: 1 1 16rem; min-width: 0; }
:root[data-v6="on"] .v6-acct-out { flex: none; }

:root[data-v6="on"] .v6-acct-name {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--text-title-m-size, 1.25rem);
  line-height: var(--text-title-m-line, 1.3);
  font-weight: 600;
  color: var(--color-text-primary);
  /* An email is one long unbreakable token; without this it sets the column's
     min-content width and pushes the sign-out button off a narrow screen. */
  overflow-wrap: anywhere;
}
:root[data-v6="on"] .v6-acct-email,
:root[data-v6="on"] .v6-acct-sub {
  margin: var(--space-4) 0 0;
  font-family: var(--font-main);
  font-size: var(--text-body-s-size, 0.8125rem);
  line-height: var(--text-body-s-line, 1.5);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}
:root[data-v6="on"] .v6-acct-sub { max-width: 40rem; }

/* The signed-out avatar is a ring with nothing in it, not a person-glyph: the
   sidebar footer uses the glyph because it must read as a control at 32px in a
   rail, whereas here the words beside it are doing that work. */
:root[data-v6="on"] .v6-acct-av--empty {
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-subtle, var(--color-neutral-200));
  color: transparent;
}

:root[data-v6="on"] .v6-acct-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

/* ---- the sections ---- */

:root[data-v6="on"] .v6-acct-sec {
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-neutral-200));
}
:root[data-v6="on"] .v6-acct-sec:last-child { border-bottom: 0; }

:root[data-v6="on"] .v6-acct-h {
  margin: 0 0 var(--space-12);
  font-family: var(--font-main);
  font-size: var(--text-body-m-size, 0.9375rem);
  font-weight: 600;
  color: var(--color-text-primary);
}

:root[data-v6="on"] .v6-acct-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

/* Destructive as a QUIET control. It is a real action with real consequences,
   which is why it says what it does and opens a confirmation - but a filled red
   button sitting on a settings page you opened to change your password is the
   store shouting at you. The colour arrives in the dialog, on the button that
   actually does it. */
:root[data-v6="on"] .v6-acct-danger { color: var(--color-status-critical-fg-strong); }
:root[data-v6="on"] .v6-acct-danger:hover { background: var(--color-status-critical-bg); }

/* ---- the signal rows ----
   A number and what it counts, in that order, because the number is what the
   eye is here for. A row with a destination is a hit target across its whole
   width; a row without one is the same shape with no affordance, so the two
   never look like the same kind of thing. */
:root[data-v6="on"] .v6-sigs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
:root[data-v6="on"] .v6-sig { margin: 0; }
:root[data-v6="on"] .v6-sig,
:root[data-v6="on"] .v6-sig-hit {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  width: 100%;
  font-family: var(--font-main);
  font-size: var(--text-body-m-size, 0.9375rem);
  color: var(--color-text-primary);
}
:root[data-v6="on"] .v6-sig-hit {
  padding: var(--space-8) var(--space-12);
  margin: 0 calc(var(--space-12) * -1);
  width: auto;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  text-align: left;
  text-decoration: none;
  transition: background-color 120ms ease;
}
:root[data-v6="on"] .v6-sig-hit:hover { background: var(--color-surface-sunken); }
:root[data-v6="on"] .v6-sig-hit:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* A row with nothing in it stays, greyed, rather than disappearing: "0 saved"
   is information, and a list that changes length as you use the store is harder
   to read than one that does not. */
:root[data-v6="on"] .v6-sig.is-empty { color: var(--color-text-disabled); padding: var(--space-8) 0; }
:root[data-v6="on"] .v6-sig:not(.is-empty) { padding: 0; }

/* Tabular figures so the counts form a column, and the same reason the ⌘K hint
   is not JetBrains Mono: this is a quantity, not a machine identifier. */
:root[data-v6="on"] .v6-sig-n {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
:root[data-v6="on"] .v6-sig-l { color: var(--color-text-secondary); }
:root[data-v6="on"] .v6-sig.is-empty .v6-sig-l { color: inherit; }

/* ---- creators you follow ---- */
:root[data-v6="on"] .v6-acct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* ------------------------------------------------------- why am I seeing this?
   ONE dialog, reused everywhere. Plain language, true counts, and the honest
   account line: signing in syncs, it never re-ranks (§7.3, §7.4). */
:root[data-v6="on"] .v6-why { max-width: 34rem; }
:root[data-v6="on"] .v6-why p {
  margin: 0 0 var(--space-12);
  font-family: var(--font-main);
  font-size: var(--text-body-m-size, 0.9375rem);
  line-height: var(--text-body-m-line, 1.5);
  color: var(--color-text-secondary);
}
:root[data-v6="on"] .v6-why p:first-child { color: var(--color-text-primary); }
:root[data-v6="on"] .v6-why p:last-child { margin-bottom: 0; }