/* Forever Passport page: the privacy page's colours and type, with the card's serif for the title */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The card's fonts: Noto Serif for titles, Noto Sans for everything else */
@font-face { font-family: "Card Serif"; src: url(/forever-passport/noto-serif.woff2) format("woff2"); }
@font-face { font-family: "Card Sans"; font-weight: 400; src: url(/forever-passport/noto-sans.woff2) format("woff2"); }
@font-face { font-family: "Card Sans"; font-weight: 500; src: url(/forever-passport/noto-sans-medium.woff2) format("woff2"); }
body { min-height: 100dvh; display: flex; flex-direction: column; background: #0c0c0e; font-family: "Card Sans", sans-serif; }
main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 40px 24px 56px; color: #b4b4bc; font-size: 15px; line-height: 1.6; }
h1 { font-family: "Card Serif", serif; font-weight: 400; font-size: 40px; line-height: 44px; color: #fff; }
h2 { font-size: 17px; font-weight: 500; color: #f4f4f5; margin: 28px 0 8px; }
h2.commands { margin-top: 48px; }
p { margin: 0 0 12px; }
a { color: #9fe8ff; }
a:hover { color: #d4a33b; }
code { font-family: inherit; font-size: 15px; font-weight: 500; color: #f4f4f5; }
.eff { color: #8b93a3; margin: 8px 0 24px; }
/* Add to Discord: Discord's own button colour */
.add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border-radius: 6px; background: #5865f2; color: #fff; font-weight: 500; font-size: 15px; text-decoration: none; }
.add:hover { background: #4752c4; color: #fff; }
.add:focus-visible { outline: 2px solid #9fe8ff; outline-offset: 2px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 8px; }
/* Title block: as wide as "Forever Passport"; the icon is centred over it and the button matches its width */
.head { display: inline-flex; flex-direction: column; }
.icon { height: 88px; width: auto; display: block; margin: 0 auto 16px; }
.head .eff, .head .add { width: 0; min-width: 100%; }
.card { display: block; width: 100%; height: auto; border-radius: 12px; }
ol.steps { list-style: none; counter-reset: s; display: grid; gap: 8px; }
ol.steps li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; }
ol.steps li::before { content: counter(s); font-weight: 500; color: #9fe8ff; width: 16px; flex: none; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td { padding: 8px 0; border-top: 1px solid rgba(244, 244, 245, .08); vertical-align: top; }
td:first-child { width: 120px; white-space: nowrap; }
td.opt { color: #8b93a3; text-align: right; }
.links { color: #8b93a3; font-size: 14px; margin-top: 28px; }
.links a { display: inline-block; padding: 10px 0; }

/* Discord preview of a private /passport reply */
.dc { background: #313338; border-radius: 12px; padding: 16px; color: #dbdee1; }
.dc .who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; color: #f2f3f5; font-weight: 500; }
.dc .app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 500; border-radius: 4px; padding: 0 4px; line-height: 15px; }
.dc .em { background: #2b2d31; border-left: 4px solid #2a5bb8; border-radius: 4px; padding: 8px 12px; margin-top: 6px; font-size: 13px; line-height: 20px; max-width: 340px; }
.dc .em i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dc .em span { color: #00a8fc; }
.dc .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc .b { height: 32px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #fff; background: #4e5058; }
.dc .b.p { background: #5865f2; }
.dc .b img { width: 18px; height: 18px; }
.dc .eph { font-size: 12px; color: #949ba4; margin-top: 6px; }
/* Rarity colours, read from the WoW Forever armory */
.q-poor { background: #9d9d9d; } .q-common { background: #fff; } .q-uncommon { background: #1eff00; }
.q-rare { background: #0081ff; } .q-epic { background: #c600ff; } .q-legendary { background: #ff8000; }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 24px; }
  h1 { font-size: 32px; line-height: 36px; }
}