/* Additions for the ASP.NET Core build. Base styles in site.css are shared with the HTML prototype. */
.build-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); background: #f8e7ea; border: 1px solid #eec2cb; border-radius: 20px; padding: 5px 10px; }
.build-pill .ic { width: 14px; height: 14px; }
.build-pill.on-dark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #e4e5e9; }
.live-pill { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.live-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d3d4d5; }
.live-pill.on { color: var(--green); font-weight: 600; }
.live-pill.on::before { background: #1f2a44; box-shadow: 0 0 0 3px #e4e5e9; }
form.inline { display: inline; margin: 0; }
.flash { margin-bottom: 16px; }
.warn-text { color: var(--amber); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.dot.big { width: 14px; height: 14px; margin-right: 10px; vertical-align: 1px; }
.sub.reject { color: var(--red); }
.status-cell { min-width: 230px; }
.status-cell .sub { margin-top: 4px; }
.sched { margin: 16px 0; }
.sched .ico { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.sched .ico .ic { width: 18px; height: 18px; }
.flow { margin-bottom: 0; }

dialog.dlg { border: 0; padding: 0; border-radius: 12px; box-shadow: var(--shadow-lg); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); color: var(--ink); }
dialog.dlg.narrow { width: min(520px, calc(100vw - 32px)); }
dialog.dlg::backdrop { background: rgba(46, 46, 46, .45); }
dialog.dlg form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); margin: 0; }
.sig-field { margin-top: 14px; }
.sig-actions { margin-top: 6px; }
.agree { margin-top: 12px; }
.field.spaced { margin-top: 14px; }

.public-top { background: var(--brand); color: #fff; padding: 14px 24px; display: flex; align-items: center; gap: 12px; }
.public-sub { opacity: .7; font-size: 12px; }
.public-main { max-width: 1040px; margin: 0 auto; padding: 24px 20px 60px; }
.signin { max-width: 640px; margin: 24px auto; }
.signin h1 { font-size: 24px; margin-bottom: 6px; }
.personas form { margin: 0; }
.persona { width: 100%; height: 100%; }
.persona-text { display: flex; flex-direction: column; text-align: left; }
.persona-text .desc { margin-top: 3px; color: var(--muted); }
.footnote { margin-top: 18px; }
.section-title { margin: 22px 0 10px; font-size: 15px; }

.email-card { margin-bottom: 14px; overflow: hidden; }
.email-act { padding: 0 18px 18px; }
.email-act .small { margin-top: 6px; }
.change .before { color: var(--red); }
.change .after { color: var(--green); }
.top .user-btn { cursor: default; }

/* Demonstration reset — sign-in page only, so it is never on screen during the demonstration */
.demo-reset { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }