/* Tokens only — no raw values, no redefining .ds-* internals (CLAUDE.md rule 5).
   This app's accent is repointed in packages/design/css/app-themes.css under
   [data-app="mail"], never here. */

/* ── the signed-in app ──────────────────────────────────────────────────── */

.mail-panel {
  display: grid;
  gap: var(--ds-space-3);
  max-width: var(--ds-measure);
}

/* Stacked, not two columns. Inside a card at card width a label like
   "Signed in as" wraps onto two lines and the value sits beside the second
   half of it, which reads as a mistake. */
.mail-facts {
  display: grid;
  gap: 0;
  margin-block: var(--ds-space-3) 0;
}

.mail-facts dt {
  margin-block-start: var(--ds-space-2);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}

.mail-facts dd { margin: 0; }

/* ── the public site ────────────────────────────────────────────────────────
   Server-rendered, no client JavaScript. The layout is the shared shell; only
   the content inside .ds-shell__content is this app's own. */

.site-main {
  max-width: 64rem;
  margin-inline: auto;
  padding-block-end: var(--ds-space-6);
}

/* The wide lockup, and the one place with horizontal room for it — which is
   what packages/design/logos/<slug>-wide.svg exists for. */
.site-lockup {
  display: block;
  height: 4.5rem;
  width: auto;
  margin-block: var(--ds-space-5) var(--ds-space-4);
}

.site-mark {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: inherit;
  text-decoration: none;
  font-size: var(--ds-text-base);
}

.site-hero { padding-block: var(--ds-space-4) var(--ds-space-3); }

.site-hero__eyebrow {
  margin: 0 0 var(--ds-space-2);
  color: var(--ds-accent);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-hero__heading {
  margin: 0 0 var(--ds-space-3);
  max-width: 18ch;
  font-size: var(--ds-text-3xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.site-hero__lead,
.site-lead {
  margin: 0;
  max-width: var(--ds-measure);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-lg);
}

.site-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-block: var(--ds-space-4);
}

.site-section { padding-block: var(--ds-space-5); }
/* Links inside prose, not the download cards — those are whole-card targets
   whose label is a heading rather than a link. */
.site-section p a,
.site-section li a,
.site-note a { color: var(--ds-accent); }
.site-section > h2 { margin-block: 0 var(--ds-space-3); }
.site-section p { max-width: var(--ds-measure); }

.site-features {
  display: grid;
  gap: var(--ds-space-4) var(--ds-space-5);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 60rem) { .site-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 38rem) { .site-features { grid-template-columns: 1fr; } }

.site-feature h3 {
  margin-block: 0 var(--ds-space-2);
  padding-block-start: var(--ds-space-3);
  border-top: 2px solid var(--ds-accent);
  font-size: var(--ds-text-base);
}
.site-feature p { margin: 0; color: var(--ds-text-muted); }

.site-dls {
  display: grid;
  gap: var(--ds-space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-block-start: var(--ds-space-4);
}

.site-dl {
  display: grid;
  justify-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-5) var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.site-dl:hover { border-color: var(--ds-accent); transform: translateY(-2px); }

.site-dl__mark {
  width: 2.25rem;
  height: 2.25rem;
  margin-block-end: var(--ds-space-2);
  color: var(--ds-text);
}

.site-dl__label { font-weight: 600; }
.site-dl__meta { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }

.site-plans {
  display: grid;
  gap: var(--ds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-block: var(--ds-space-4);
}

.site-note {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-inline-start: 3px solid var(--ds-border-strong);
  background: var(--ds-surface-sunken);
  border-radius: var(--ds-radius-sm);
}

.site-plan {
  padding: var(--ds-space-5) var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

.site-plan h3 { margin-block: 0 var(--ds-space-2); }
.site-plan__price { margin: 0 0 var(--ds-space-2); font-size: var(--ds-text-2xl); font-weight: 600; }
.site-plan__price span { font-size: var(--ds-text-sm); font-weight: 400; color: var(--ds-text-muted); }
.site-plan__list { margin: var(--ds-space-3) 0 0; padding-inline-start: var(--ds-space-4); }

.site-faq { display: grid; gap: var(--ds-space-2); margin-block: var(--ds-space-4); }

.site-faq__item {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

.site-faq__item summary { cursor: pointer; font-weight: 600; }
.site-faq__item p { margin-block-end: 0; color: var(--ds-text-muted); }

.site-list { padding-inline-start: var(--ds-space-4); max-width: var(--ds-measure); }
.site-list li { margin-block-end: var(--ds-space-2); }

/* A table is the one thing allowed to be wider than the page, inside its own
   scroller — a legal page has one and a phone is 390px. */
.site-tablewrap { overflow-x: auto; max-width: 100%; }

/* The languages, in the sidebar's footer above the account.
   They used to sit in a site footer with the other site-wide links, on the
   reasoning that this slot is the account's in every app here. That footer is
   gone — no other app in this ecosystem has one — and these are navigation, so
   they belong in the pane that holds navigation. Mail is the only trilingual
   app, which is why this slot means something here and nowhere else. When the
   ecosystem becomes multilingual this becomes an account setting and the row
   goes away entirely. */
/* Quieter than the switcher it borrows from: this is a preference, not a
   destination, and it sits directly above the account menu — two controls of
   equal weight in that corner would compete. */
.site-langs__current {
  gap: var(--ds-space-2);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}
.site-langs__current:hover { color: var(--ds-text); }

/* Upward, because it lives in the sidebar's footer — the same override
   .ds-account-menu__menu makes directly below it, for the same reason: a menu
   that opened downward from here would open off the bottom of the screen. */
.site-langs__menu {
  top: auto;
  bottom: calc(100% + var(--ds-space-2));
  min-width: max(100%, 12rem);
}

/* The plain-link half of the header's pair, matching apps/www. */
.site-signin { align-self: center; color: var(--ds-text-muted); text-decoration: none; font-size: var(--ds-text-sm); }
.site-signin:hover { color: var(--ds-text); }


/* ── dashboard ─────────────────────────────────────────────────────────────
   The signed-in half: what this account actually has, rather than a page that
   only tells you that you are signed in. */

.mail-grid {
  display: grid;
  gap: var(--ds-space-3);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
}

.mail-panel { max-width: 58rem; }

.mail-card--warn { border-color: var(--ds-accent); }

.mail-meter__figure {
  margin: 0 0 var(--ds-space-2);
  font-size: var(--ds-text-3xl);
  font-weight: 600;
  line-height: 1;
}

.mail-meter__figure span { font-size: var(--ds-text-lg); font-weight: 400; color: var(--ds-text-muted); }

/* An amount, not just a number: "3 / 10" is arithmetic, a bar is a glance. */
.mail-meter {
  height: .5rem;
  margin-block-end: var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-sunken);
  overflow: hidden;
}

.mail-meter__fill { height: 100%; background: var(--ds-accent); }

.mail-plan {
  margin: 0 0 var(--ds-space-2);
  font-size: var(--ds-text-xl);
  font-weight: 600;
}