/* ==========================================================================
   App pages in the homepage look, colour scheme "Amber".
   Loaded after the other stylesheets, which were recoloured to amber already.
   ========================================================================== */
:root {
  --bg: #0f0d09;
  --ink: #f3efe6;
  --ink-2: #d9d3c6;
  --muted: #97907f;
  --line: rgba(243, 239, 230, .14);
  --card: #1b1812;
  --card-2: #24201a;
  --panel: #1b1812;
  --panel-line: rgba(243, 239, 230, .1);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .6);
  --accent: #ffb020;
  --on-accent: #0f0d09;
  --pink: #ffb020;
  --magenta: #ffb020;
  --lilac: #ffc24d;
  --radius: 10px;
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
body { background: var(--bg); color: var(--ink); }
.bg { display: none; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline-color: var(--accent); }
h1, h2, h3, .section-title { letter-spacing: -0.04em; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
/* The RKNKT wordmark (the letters come from logos.css) */
.logo-m { display: block; flex: none; aspect-ratio: 1600 / 544; background: currentColor; -webkit-mask: var(--logo-letters) center / 100% 100% no-repeat; mask: var(--logo-letters) center / 100% 100% no-repeat; }
.brand .logo-m { height: 22px; }
.sidebar .brand .logo-m { height: 26px; }
input, select, textarea { background: var(--card-2); color: var(--ink); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted); }
/* The old star is gone: the RKNKT logo stands in every place it was (wide, so each spot gets a width) */
.logo-mark { height: auto !important; aspect-ratio: 1600 / 544; padding: 0 !important; color: var(--accent); animation: none !important; filter: none !important; }
.login .logo-mark { width: 78px !important; margin-bottom: 14px; }
.spark.logo-mark { width: 140px !important; }
.side-star.logo-mark { display: none; }   /* the sidebar footer already says RKNKT */
.levelup-card .logo-mark { width: 96px !important; margin: 0 auto 18px; }
.start-modal .logo-mark { width: 110px !important; }
.passport-mini .logo-mark { width: 70px !important; }
.passport-logo .logo-mark { width: 64px !important; }
.convo-empty .logo-mark, .all-clear .logo-mark { width: 110px !important; margin: 0 auto; }
.hero-banner-art > .logo-mark { position: absolute; left: 50%; top: 50%; width: 150px !important; transform: translate(-50%, -50%); }
.pp-ico-link .logo-mark { width: 32px !important; }
.pp-foot .logo-mark { display: none; }
@media (max-height: 700px) { .login .logo-mark { width: 64px !important; } }