/* Empty pages that sell (new_ui): js/views/empty-ui.js. The dimmed sample
   reuses .dui-sample from dashboard.css. */
body.new-ui .ue[hidden] { display: none; }
body.new-ui .ue-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 28px 32px; margin-bottom: 26px;
}
body.new-ui .ue-cta h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; line-height: 1.25; }
body.new-ui .ue-cta p { margin: 0; color: var(--ui-ink-2); max-width: 62ch; line-height: 1.5; }
body.new-ui .ue-wait { margin: 0; font-size: 13.5px; color: var(--ui-ink-3); max-width: 28ch; }
body.new-ui .ue-skel { height: 220px; }

body.new-ui .ue-bar { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 14px; align-items: center; padding: 9px 0; font-size: 14px; }
body.new-ui .ue-bar + .ue-bar { border-top: 1px solid var(--ui-line-2); }
body.new-ui .ue-bar i { height: 8px; border-radius: 4px; background: var(--ui-rival-soft); overflow: hidden; }
body.new-ui .ue-bar i b { display: block; height: 100%; background: var(--ui-rival); border-radius: 4px; }
body.new-ui .ue-bar.me span { font-weight: 600; }
body.new-ui .ue-bar.me i b { background: var(--ui-accent); }
body.new-ui .ue-bar em { font-style: normal; font-size: 13px; color: var(--ui-ink-3); font-variant-numeric: tabular-nums; }

body.new-ui :is(.ue-task, .ue-quote) { padding: 22px 24px; }
body.new-ui .ue-k { font-size: 12.5px; color: var(--ui-ink-3); }
body.new-ui .ue-task h3 { margin: 8px 0 6px; font-size: 18px; letter-spacing: -.01em; }
body.new-ui :is(.ue-task, .ue-quote) p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ui-ink-2); }
body.new-ui .ue-quote blockquote { margin: 10px 0 12px; font-size: 16px; line-height: 1.5; color: var(--ui-ink); }

@media (max-width: 900px) {
  body.new-ui .ue-cta { grid-template-columns: 1fr; padding: 22px; }
  body.new-ui .ue-cta .ui-btn { width: 100%; }
  body.new-ui .ue-bar { grid-template-columns: minmax(90px, 1fr) 1.2fr auto; gap: 10px; }
  body.new-ui .ue .dui-sample .ui-c4 { display: none; }   /* the bars say it on a phone */
}