/* Round-2 visual layer for the web app. Same palette as windows/renderer/round2.css.
   Linked after theme.css. theme.css itself stays the copy the design tests compare. */
:root {
  --page: #F6F3EE;
  --card: #FFFFFF;
  --surface: #FFFFFF;
  --panel: #EDE9E2;
  --chips: #EDE9E2;
  --sunken: #EDE9E2;
  --sunken-2: #E2DDD4;
  --ink: #1C1A17;
  --secondary: #5A5651;
  --muted: #5C574F;
  --faint: #6B665F;
  --blue: #6B1F28;
  --blue-soft: #F4E6E6;
  --blue-w: #6B1F28;
  --teal: #56181F;
  --accent: #6B1F28;
  --accent-ring: rgba(107, 31, 40, 0.28);
  --link: #6B1F28;
  --grad: linear-gradient(180deg, #7A2630, #621C25);
  --grad-primary: linear-gradient(180deg, #7A2630, #621C25);
  --stop: #B3261E;
  --hair: rgba(28, 26, 23, 0.08);
  --hair-2: rgba(28, 26, 23, 0.14);
  --line: rgba(28, 26, 23, 0.08);
  --button-line: rgba(28, 26, 23, 0.14);
  --shadow-1: 0 1px 2px rgba(28, 26, 23, 0.05), 0 0 0 1px rgba(28, 26, 23, 0.05);
  --shadow-2: 0 1px 2px rgba(28, 26, 23, 0.04), 0 10px 28px -10px rgba(28, 26, 23, 0.16), 0 0 0 1px rgba(28, 26, 23, 0.05);
}
.auth-submit, .btn-primary {
  box-shadow: 0 8px 18px -10px rgba(107, 31, 40, 0.55);
}
.auth-logo-mark img, .top-logo-mark img, .ws-logo-mark img, .p-logo-tile img {
  border-radius: 25%;
}
#vt-phone { --p-grad: linear-gradient(180deg, #7A2630, #621C25); --p-accent: #6B1F28; }
#vt-phone .p-btn.outline { background: rgba(107, 31, 40, 0.08); }
#vt-phone .p-tab.on .pill { background: rgba(107, 31, 40, 0.12); }
@media (max-width: 900px) {
  #auth-overlay {
    --p-accent: #6B1F28;
    --p-ink: #1C1A17;
    --p-ink2: #5A5651;
    --p-muted: #5C574F;
    --p-faint: #6B665F;
    --p-page: #F6F3EE;
    --p-card: #FFFFFF;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  }
  #auth-overlay .auth-title,
  #auth-overlay .auth-sub,
  #auth-overlay .auth-input,
  #auth-overlay .auth-submit,
  #auth-overlay .auth-google,
  #auth-overlay .auth-toggle,
  #auth-overlay .auth-toggle #pwa-toggle-btn {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  }
}

.r2-guide {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(28, 26, 23, 0.32);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.r2-guide[hidden] { display: none; }
.r2-card {
  width: min(420px, 100%);
  background: #F6F3EE; color: #1C1A17;
  border-radius: 20px; padding: 22px 24px 20px;
  box-shadow: 0 30px 60px -20px rgba(28, 26, 23, 0.45);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}
.r2-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.r2-dots { display: flex; gap: 7px; align-items: center; }
.r2-dots i { width: 7px; height: 7px; border-radius: 4px; background: #E2DDD4; display: block; }
.r2-dots i.on { width: 22px; background: #6B1F28; }
.r2-skip {
  background: none; border: 0; color: #5C574F;
  font: 600 14px/1 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  cursor: pointer; padding: 8px;
}
.r2-mark { width: 48px; height: 48px; border-radius: 12px; margin-top: 18px; display: block; }
.r2-kicker { margin: 16px 0 0; font: 700 12px/1.3 'Plus Jakarta Sans', 'Segoe UI', sans-serif; color: #6B1F28; }
.r2-card h2 { margin: 8px 0 0; font: 600 22px/1.25 'Plus Jakarta Sans', 'Segoe UI', sans-serif; letter-spacing: -0.02em; }
.r2-card .r2-body { margin: 10px 0 0; font: 400 15px/1.45 'Plus Jakarta Sans', 'Segoe UI', sans-serif; color: #5A5651; }
.r2-next {
  margin-top: 18px; width: 100%; height: 48px; border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #7A2630, #621C25); color: #F6F3EE;
  font: 600 16px/1 'Plus Jakarta Sans', 'Segoe UI', sans-serif; cursor: pointer;
}