/* The web account pages on the site's tokens (/site.css). /login: the brand on a forest panel beside the sign-in,
   stacked brand-first on phones. /account: world cards, the live viewer and the plans. */
button.button { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
button.button:disabled { opacity: 0.55; cursor: progress; }
.account-small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
button.account-small { font-size: 13px; }

.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.login-brand { position: relative; display: flex; flex-direction: column; gap: 32px; padding: 32px 56px 96px; overflow: hidden; background: #10261f; color: #f2f5ef; }
.login-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 6px; font-size: 13px; color: rgb(242 245 239 / 0.8); text-decoration: none; }
.login-back:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.login-copy { margin-block: auto; max-width: 540px; }
.login-copy .wordmark { display: flex; width: fit-content; margin-bottom: 24px; color: #fff; }
.login-pill { display: flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 20px; padding: 3px 12px; border: 1px solid rgb(244 189 50 / 0.4); border-radius: 999px; background: rgb(244 189 50 / 0.08); color: #f4bd32; font: 12px/18px var(--font-mono); }
.login-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.login-brand h1 { font-size: 56px; line-height: 60px; color: #fff; }
.login-brand h1 em { font-style: normal; color: #f4bd32; }
.login-lead { margin-top: 20px; max-width: 440px; color: rgb(242 245 239 / 0.66); }
.login-perks { display: grid; gap: 20px; margin: 44px 0 0; padding: 0; list-style: none; }
.login-perks li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.login-perks strong { display: block; font-weight: 500; color: #fff; }
.login-perks p { font-size: 14px; line-height: 22px; color: rgb(242 245 239 / 0.6); }
.login-perk-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 8px; background: rgb(255 255 255 / 0.04); }
.login-pet { --s: 1; --frame-time: 0.8s; }
.login-pet-sprigg { --strip: url("/art/hero/sprigg_meadow_work.png"); }
.login-pet-nimbo { --strip: url("/art/hero/nimbo_fair_work.png"); }
.login-pet-wickit { --strip: url("/art/hero/wickit_ember_work.png"); }
.login-more { position: relative; z-index: 1; align-self: flex-start; font-size: 14px; color: #f4bd32; text-decoration: none; }
.login-more:hover { text-decoration: underline; }
/* A strip of grass with a pet strolling along it (the site's .stroller, which crosses its container). */
.login-ground { position: absolute; inset: auto 0 0; height: 64px; container-type: inline-size; border-bottom: 16px solid #2f6b3c; }
.login-ground .stroller { --s: 2; bottom: 0; }

.login-main { display: grid; place-items: center; padding: 48px 24px; }
.login-card { width: 100%; max-width: 380px; text-align: center; }
.login-card h2 { font-size: 32px; line-height: 40px; }
.login-card > p { margin-top: 8px; color: var(--ink-muted); }
.login-providers { display: grid; gap: 12px; margin-top: 32px; }
.login-provider { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 12px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 15px; font-weight: 500; text-decoration: none; }
.login-provider svg { width: 20px; height: 20px; flex: none; }
.login-provider small { flex-basis: 100%; font-size: 12px; font-weight: 400; }
.login-google { border-color: #dadce0; background: #fff; color: #1f1f1f; }
.login-google:hover { background: #f8faff; }
.login-github { border-color: #24292f; background: #24292f; color: #fff; }
.login-github:hover { background: #32383f; }
.login-provider[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.login-error { margin-top: 20px; padding: 10px 12px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 14px; }
.login-divider { margin: 32px 0 24px; border: 0; border-top: 1px solid var(--line); }
.login-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font: 12px/18px var(--font-mono); color: var(--ink-muted); }
.login-points li::before { content: "•"; margin-right: 6px; color: #d79f14; }
.login-legal { margin-top: 16px; font-size: 12px; line-height: 20px; color: var(--ink-muted); }

.account-section { margin-top: 56px; }
.account-section h2, .account-terms h2 { font-size: 24px; line-height: 32px; }
.account-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.account-section > h2 { margin-bottom: 16px; }
.account-muted { color: var(--ink-muted); font-size: 14px; }
.account-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.account-plans { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.account-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.account-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.account-card h3 { font-size: 17px; font-weight: 500; line-height: 24px; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.account-empty { grid-column: 1 / -1; align-items: flex-start; }
.account-badge { flex: none; padding: 2px 8px; border-radius: 999px; font: 12px/18px var(--font-mono); background: var(--surface-2); color: var(--ink-muted); }
.tone-ok { background: #ecfdf3; color: #166534; }
.tone-warn { background: #fffbeb; color: #92400e; }
.tone-bad { background: #fef2f2; color: #991b1b; }
.tone-info { background: #eff6ff; color: #1e40af; }
.account-error { color: #b91c1c; font-size: 14px; }
.account-warning { padding: 8px 12px; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 14px; }
.account-picker { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.account-options { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.account-options legend { margin-bottom: 4px; font: 12px/18px var(--font-mono); color: var(--ink-muted); }
.account-option { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; cursor: pointer; }
.account-option input { cursor: inherit; }
.account-terms { max-width: 560px; }
.account-terms p { margin-top: 8px; color: var(--ink-muted); }

.account-watch { margin-top: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); scroll-margin-top: 16px; }
.account-watch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.account-watch-bar h2 { flex: 1 1 200px; min-width: 0; font-size: 17px; line-height: 24px; overflow-wrap: anywhere; }
.account-viewer { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #173a33; }

@media (prefers-color-scheme: dark) {
  .login-github { border-color: rgb(255 255 255 / 0.18); }
  .login-error, .tone-bad { background: #2a1215; color: #fca5a5; }
  .tone-ok { background: #0f2a1f; color: #6ee7a8; }
  .tone-warn, .account-warning { background: #2b2111; color: #fcd34d; }
  .tone-info { background: #111c33; color: #93c5fd; }
  .account-error { color: #f87171; }
}

@media (max-width: 899px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-brand { gap: 24px; padding: 20px 20px 88px; text-align: center; }
  .login-copy { margin: 0 auto; }
  .login-copy .wordmark, .login-pill { margin-inline: auto; }
  .login-brand h1 { font-size: 40px; line-height: 44px; }
  .login-lead { margin-inline: auto; }
  .login-perks, .login-more { display: none; }
  .login-main { place-items: start center; padding: 40px 20px 56px; }
}