/* The light glance screen (glance-light.html): glance.css with light colors on top. Same layout, same data. */
:root {
  --page: #f4f5f8;
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #eef0f4;
  --border: #e5e8ee;
  --border-strong: #d6dae2;
  --text: #121620;
  --muted: #646b78;
  --faint: #b4bac5;
  --primary: #4f46e5;
  --primary-text: #4338ca;
  --primary-bg: #eef0ff;
  --green: #0a9b62;
  --green-bg: #e7f7ef;
  --green-line: #a8e2c7;
  --red: #dc2f3e;
  --red-bg: #fdecee;
  --red-line: #f5b9bf;
  --yellow: #a86b00;
  --yellow-bg: #fff4dc;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
  color-scheme: light;
}
body { background: radial-gradient(1200px 520px at 50% -220px, #e6e8ff 0%, var(--page) 62%) fixed, var(--page); }

.gl-logo { border-color: var(--border); box-shadow: var(--shadow); }
.gl-full { box-shadow: var(--shadow); }
.gl-full:hover { border-color: #b9bfca; }
.gl-state.live { color: var(--green); }
@keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(10, 155, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 155, 98, 0); } }

.agree.split { border-color: #f2d18c; }

/* tiles: white cards, a soft tint of the direction in the corner */
.ix { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.ix::after { opacity: .12; filter: blur(40px); }
.dir-pill { background: var(--c-bg); }
.lv { background: var(--surface-2); border-color: var(--border); }
.tl-bar { background-color: var(--surface-3) !important; }
.tl-now { background: var(--text); box-shadow: 0 0 0 2px #fff; }

/* waves */
.sum-cell, .run, .wv { box-shadow: var(--shadow); }
.run.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent), var(--shadow); }
.run-dots i { background: var(--surface-3); border-color: var(--border-strong); }
.tag { background: var(--surface-3); border-color: var(--border); }
.tag.with { background: var(--primary-bg); color: var(--primary-text); border-color: #c9ccfb; }
.tag.against { background: #fff5f5; color: #b4434d; border-color: #f3cfd3; }
.tag.one { border-color: #f2d18c; }
.sym { background: var(--surface); border-color: var(--border); }
.wv-stats div { background: var(--surface-2); border: 1px solid var(--border); }
.wv-stats .now { background: var(--surface-3); }