.appearance-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 68px;
  padding: 10px max(24px, var(--safe-right)) 10px max(24px, var(--safe-left));
  background: var(--canvas);
  color: var(--text);
}
.appearance-switcher[hidden] { display: none; }
.appearance-switcher label { font-size: 14px; color: var(--text); }
.appearance-switcher select { width: auto; max-width: 260px; min-height: 48px; font-size: 16px; }
.appearance-switcher + #app > .auth { min-height: calc(100svh - 68px); }

/* The scoreboard keeps the product's metric colours and gives numbers priority. */
:root[data-appearance="scoreboard"] {
  --card: #1b1a17;
  --nested: #272620;
  --border: #35342d;
}
[data-appearance="scoreboard"] button,
[data-appearance="scoreboard"] .card,
[data-appearance="scoreboard"] .nav a { border-radius: 0; }
[data-appearance="scoreboard"] .card { border: 0; }
[data-appearance="scoreboard"] .auth { max-width: 1220px; gap: 64px; }
[data-appearance="scoreboard"] .auth-intro h1 {
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
[data-appearance="scoreboard"] .auth-intro p { font-size: 16px; }
[data-appearance="scoreboard"] .metric { font-size: 64px; line-height: 1.05; letter-spacing: -0.055em; }
[data-appearance="scoreboard"] .page-heading h1 { letter-spacing: -0.045em; }

/* A flat sports poster: one lime field meeting the graphite form at a hard edge. */
:root[data-appearance="poster"] {
  --card: #1c1b18;
  --nested: #292820;
  --border: #3c3a30;
}
[data-appearance="poster"] button,
[data-appearance="poster"] .card,
[data-appearance="poster"] .nav a { border-radius: 0; }
[data-appearance="poster"] .card { border: 0; }
[data-appearance="poster"] .auth {
  max-width: none;
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
}
[data-appearance="poster"] .auth-intro {
  padding: 64px max(32px, 4vw);
  background: var(--energy);
  color: var(--canvas);
  align-content: center;
  gap: 32px;
}
[data-appearance="poster"] .auth-intro .brand::before { background: currentColor; }
[data-appearance="poster"] .auth-intro h1 {
  font-size: clamp(46px, 6.5vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.065em;
}
[data-appearance="poster"] .auth-intro p { color: inherit; font-size: 18px; max-width: 390px; }
[data-appearance="poster"] .auth-card {
  width: min(100%, 470px);
  align-self: center;
  justify-self: center;
  padding: 32px;
  margin: 32px 0;
}
[data-appearance="poster"] .sidebar { background: var(--energy); color: var(--canvas); border: 0; }
[data-appearance="poster"] .sidebar .brand::before { background: currentColor; }
[data-appearance="poster"] .sidebar .nav a { color: var(--canvas); }
[data-appearance="poster"] .sidebar .eyebrow { color: var(--canvas); } /* taste-skill-ignore: preserve contrast of the existing product navigation label on lime. */
[data-appearance="poster"] .sidebar .nav a.active { background: var(--canvas); color: var(--energy); }
[data-appearance="poster"] .sidebar .account-link { color: var(--canvas); }
[data-appearance="poster"] .page-heading { padding: 24px; background: var(--energy); color: var(--canvas); }
[data-appearance="poster"] .page-heading p { color: inherit; }

/* The diary direction uses a single centred opening and a quieter reading surface. */
:root[data-appearance="day"] {
  --card: #22211e;
  --nested: #2c2a26;
  --border: #403d35;
}
[data-appearance="day"] .auth {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  gap: 32px;
  padding: 36px 24px 48px;
  align-content: center;
}
[data-appearance="day"] .auth-intro { text-align: center; justify-items: center; gap: 20px; }
[data-appearance="day"] .auth-intro .brand { margin: 0 0 4px; }
[data-appearance="day"] .auth-intro h1 {
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.055em;
}
[data-appearance="day"] .auth-intro p { max-width: 480px; font-size: 16px; }
[data-appearance="day"] .auth-card { width: 100%; max-width: 440px; justify-self: center; border: 0; border-radius: 0; }
[data-appearance="day"] .content { max-width: 1160px; }
[data-appearance="day"] .card { border: 0; border-radius: 0; }
[data-appearance="day"] .page-heading h1 { font-weight: 600; letter-spacing: -0.05em; }

@media (max-width: 768px) {
  .appearance-switcher { min-height: 68px; padding-right: max(18px, var(--safe-right)); padding-left: max(18px, var(--safe-left)); }
  .appearance-switcher select { max-width: calc(100vw - 132px); }
  [data-appearance="scoreboard"] .auth { gap: 32px; }
  [data-appearance="scoreboard"] .auth-intro h1 { font-size: clamp(42px, 10vw, 64px); }
  [data-appearance="scoreboard"] .metric { font-size: 48px; }
  [data-appearance="poster"] .auth { display: flex; gap: 0; }
  [data-appearance="poster"] .auth-intro { padding: 32px max(20px, var(--safe-right)) 36px max(20px, var(--safe-left)); gap: 22px; }
  [data-appearance="poster"] .auth-intro .brand { margin-bottom: 6px; }
  [data-appearance="poster"] .auth-intro h1 { font-size: clamp(42px, 11.5vw, 76px); }
  [data-appearance="poster"] .auth-intro p { font-size: 16px; }
  [data-appearance="poster"] .auth-card { width: calc(100% - 36px); margin: 26px auto 32px; padding: 22px; }
  [data-appearance="poster"] .page-heading { padding: 18px; }
  [data-appearance="day"] .auth { padding: 28px 18px 40px; gap: 28px; }
  [data-appearance="day"] .auth-intro h1 { font-size: clamp(40px, 10vw, 64px); }
}