/* Atlas / account hub — page-specific layer.
   Loads after atlas-core.css, which supplies the tokens, the canvas, the
   primitives and the Discord button this page shares with signup.

   The idea: this page is a dashboard, not a menu. It used to be two unlabelled
   link cards, so you had to click through to find out whether you had saved
   anything. Now the counts are on the surface and the destinations state where
   they lead. */

/* Repeated from core on purpose; see the note there. Guarded per file by
   tests/smoke/design-system-hidden-guard.test.mjs. */
[hidden],
.hidden { display: none !important; }

body.am { --am-shell: 64rem; --am-floor: .7; }

/* --------------------------------------------------------------- ambient */
.am-ambient { height: 40vh; }

.am-ambient__img {
  background-position: center 25%;
  filter: blur(110px) saturate(1.7) brightness(.45);
}

.am-ambient__veil {
  background:
    radial-gradient(85% 60% at 50% 0%, transparent 0%, rgba(6, 8, 11, .62) 70%, rgba(6, 8, 11, .9) 100%),
    linear-gradient(180deg,
      rgba(6, 8, 11, .68) 0%,
      rgba(6, 8, 11, .55) 30%,
      var(--am-void) 92%);
}

/* ------------------------------------------------------------------ head */
.am-acct { padding-block: .6rem 0; }

.am-acct__title {
  margin: 0;
  font-family: var(--am-display);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.am-acct__message {
  margin: .6rem 0 0;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--am-ink-2);
}

/* ----------------------------------------------------------------- guest */
/* Signed out, the sign-in block is the only thing on the page, so it sits in
   the middle of it. Signed in the page is a dashboard and stays top-aligned.
   account-page-app.js sets the attribute; with none set (the shell before the
   session resolves) nothing here applies. */
body.am[data-account-state="guest"] main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5rem;
}

body.am[data-account-state="guest"] .am-acct {
  width: min(100%, 26rem);
  padding-block: 0;
  text-align: center;
}

body.am[data-account-state="guest"] .am-acct__message,
body.am[data-account-state="guest"] .am-acct__guest { margin-inline: auto; }

.am-acct__guest { margin-top: 1.6rem; max-width: 26rem; }

.am-acct__providers {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.1rem;
}

/* Google has no brand colour of ours to borrow, and putting two saturated
   buttons side by side would make the page look like a login wall. */
.am-acct__providers .am-btn {
  width: 100%;
  height: 2.6rem;
}

/* -------------------------------------------------------------- identity */
.am-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--am-line-soft);
}

/* The picture doubles as a shortcut to the file picker, which is where people
   reach first. The labelled buttons stay, because a click target with no label
   is not something to make anyone guess at. */
.am-id__avatar {
  position: relative;
  height: 4.5rem;
  width: 4.5rem;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--am-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--am-ink-2);
  font-family: var(--am-display);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--am-ease);
}
.am-id__avatar:hover { border-color: rgba(var(--am-glow), .5); }
.am-id__avatar:disabled { cursor: wait; }
.am-id__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.am-id__avatar::after {
  content: "Change";
  position: absolute;
  inset: auto 0 0;
  padding: .25rem 0 .3rem;
  background: rgba(4, 6, 9, .82);
  font-family: var(--am-mono);
  font-size: .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--am-ink);
  opacity: 0;
  transition: opacity .18s var(--am-ease);
}
.am-id__avatar:hover::after,
.am-id__avatar:focus-visible::after { opacity: 1; }

.am-id__body { min-width: 0; }

.am-id__name {
  font-family: var(--am-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--am-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-id__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .45rem;
  font-family: var(--am-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--am-ink-3);
}

.am-id__role {
  border-color: rgba(var(--am-glow), .4);
  background: rgba(var(--am-glow), .1);
  color: var(--am-ink);
}

.am-id__actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
}

.am-id__msg { grid-column: 1 / -1; font-size: .75rem; color: var(--am-ink-3); }
.am-id__msg.is-error { color: var(--am-danger); }
.am-id__msg.is-success { color: var(--am-accent); }
.am-id__msg:empty { display: none; }

/* ----------------------------------------------------------------- stats */
.am-acct__stats {
  display: flex;
  flex-wrap: wrap;
  padding-block: 1.3rem;
}

.am-astat {
  flex: 0 0 auto;
  min-width: 7.5rem;
  padding-inline: 1.15rem;
  border-left: 1px solid var(--am-line-soft);
}
.am-astat:first-child { padding-left: 0; border-left: 0; }

.am-astat__value {
  font-family: var(--am-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--am-ink);
}

.am-astat__label {
  margin-top: .3rem;
  font-family: var(--am-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--am-ink-3);
}

/* ---------------------------------------------------------- destinations */
.am-dests {
  display: grid;
  gap: .5rem;
  padding-bottom: 1.6rem;
}

.am-dest {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--am-line-soft);
  border-radius: var(--am-r);
  background: var(--am-panel);
  padding: .85rem 1rem;
  text-decoration: none;
  transition: border-color .18s var(--am-ease), background .18s var(--am-ease);
}
.am-dest:hover { border-color: var(--am-line); background: var(--am-panel-2); }

.am-dest__label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--am-ink);
}

.am-dest__body {
  margin-top: .2rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--am-ink-3);
}

.am-dest__count {
  font-family: var(--am-display);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--am-ink-2);
}
.am-dest__count:empty { display: none; }

.am-dest__go {
  width: 14px;
  height: 14px;
  color: var(--am-ink-3);
  transition: transform .18s var(--am-ease), color .18s var(--am-ease);
}
.am-dest:hover .am-dest__go { color: var(--am-ink-2); transform: translateX(2px); }

.am-dest--accent { border-color: rgba(var(--am-glow), .3); background: rgba(var(--am-glow), .07); }
.am-dest--accent:hover { border-color: rgba(var(--am-glow), .5); background: rgba(var(--am-glow), .12); }

/* --------------------------------------------------------- notifications */
.am-notes { padding-bottom: 2.5rem; }

.am-notes__actions { display: flex; align-items: center; gap: .4rem; }

.am-notes__list { display: grid; gap: .4rem; }

.am-notif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .6rem 1rem;
  border: 1px solid var(--am-line-soft);
  border-radius: var(--am-r);
  background: var(--am-panel);
  padding: .8rem .9rem;
}

/* Unread is marked with a rail rather than a filled row: a dozen tinted blocks
   reads as an alert, and most of these are routine. */
.am-notif.is-unread {
  border-left: 2px solid var(--am-accent);
  background: var(--am-panel-2);
}

.am-notif__main { min-width: 0; text-decoration: none; display: block; }

.am-notif__title {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--am-ink);
}
a.am-notif__main:hover .am-notif__title { color: var(--am-accent); }

.am-notif__body {
  margin-top: .2rem;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--am-ink-2);
}

.am-notif__side {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

.am-notif__time {
  font-family: var(--am-mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--am-ink-3);
  white-space: nowrap;
}

/* Icon-sized, because these repeat on every row and the labels were louder
   than the notifications themselves. */
.am-notif__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.4rem;
  width: 1.4rem;
  flex: 0 0 auto;
  border: 1px solid var(--am-line);
  border-radius: var(--am-r);
  background: transparent;
  color: var(--am-ink-3);
  cursor: pointer;
  transition: color .18s var(--am-ease), border-color .18s var(--am-ease);
}
.am-notif__act:hover:not(:disabled) { color: var(--am-ink); border-color: rgba(255, 255, 255, .24); }
.am-notif__act:disabled { opacity: .4; cursor: not-allowed; }
.am-notif__act svg { width: 12px; height: 12px; }
.am-notif__act--read:hover:not(:disabled) { color: var(--am-accent); border-color: rgba(var(--am-glow), .5); }
.am-notif__act--del:hover:not(:disabled) { color: var(--am-danger); border-color: rgba(244, 120, 140, .5); }

/* The empty state is `.am-empty` in atlas-core.css — the saved-mods list uses
   it too. */

/* ---------------------------------------------------------------- mobile */
@media (max-width: 47.99rem) {
  .am-id {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem;
  }
  /* The actions drop to their own row rather than squeezing the name. */
  .am-id__actions { grid-column: 1 / -1; }

  .am-acct__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1rem;
  }
  .am-astat { min-width: 0; padding-inline: 0; border-left: 0; }

  .am-dest { grid-template-columns: minmax(0, 1fr) auto; }
  .am-dest__go { display: none; }

  /* The bulk actions do not fit beside the label and the count, and half a
     button running off the edge is worse than a second row. */
  .am-notes .am-work__head { flex-wrap: wrap; }
  .am-notes__actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    padding-top: .1rem;
  }

  /* Time and actions move under the text rather than stealing width from it —
     a title wrapping to three lines beside a timestamp reads worse than a
     title on one line with the meta beneath. */
  .am-notif { grid-template-columns: minmax(0, 1fr); }
  .am-notif__side { justify-content: flex-end; }
}