/* Cloud trial additions: sign-in screen and the trial bar. Loaded after accord.css. */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bg, #f6f7fb); }
.signin-card { max-width: 460px; width: 100%; padding: 32px; }
.signin-card h1 { margin: 18px 0 8px; }
.signin-card .brand { font-weight: 700; font-size: 1.4rem; display: flex; gap: 10px; align-items: baseline; }
.signin-card .btn { margin: 12px 0; }
.cloud-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cloud-bar .save-status { font-size: 0.8rem; color: var(--muted, #667); min-width: 4.5em; text-align: right; }
@media (max-width: 720px) {
  .cloud-bar label, .cloud-bar .save-status { display: none; }
  .cloud-bar select { max-width: 140px; }
}

.signin-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--muted, #667); font-size: 0.8rem; }
.signin-or::before, .signin-or::after { content: ''; flex: 1; border-top: 1px solid var(--line, #e2e8f0); }
.signin-form .field { margin-bottom: 10px; }
.signin-error { color: #b42318; min-height: 1.2em; margin: 4px 0 0; }
.pw-rules { list-style: none; padding: 0; margin: -4px 0 12px; font-size: 0.8rem; color: var(--muted, #667); display: grid; gap: 2px; }
.pw-rules li::before { content: '○ '; }
.pw-rules li.ok { color: #067647; }
.pw-rules li.ok::before { content: '✓ '; }

/* Workspace picker (people who belong to more than one workspace). */
.ws-list { display: grid; gap: 10px; margin: 16px 0; }
.ws-choice { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border: 1px solid var(--line, #dde1ea); border-radius: 12px; background: var(--panel, #fff); color: inherit; font: inherit; cursor: pointer; }
.ws-choice:hover, .ws-choice:focus-visible { border-color: var(--accent, #00539b); outline: none; box-shadow: 0 0 0 3px rgba(0, 83, 155, 0.15); }
.ws-choice small { color: var(--muted, #667); }
.ws-choice.current { border-color: var(--accent, #00539b); }

/* Trial feedback inbox (owner only). */
tr.unread td { background: rgba(0, 83, 155, 0.05); }
td.fb-message { white-space: pre-wrap; min-width: 280px; }

/* Sign-in card tagline (13 Nov): beside the logo like the top bar; under it on phones (the top-bar rule hides .brand-sub there). */
@media (max-width: 640px) {
  .signin-card .brand { flex-wrap: wrap; row-gap: 6px; }
  .signin-card .brand-sub { display: block; flex-basis: 100%; border-left: 0; padding-left: 0; margin-left: 0; }
}