/* Extra styles for the sign-in features. Loaded after the main styles in index.html. */
input[type=email], input[type=password]{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  font-family:var(--font-body); font-size:14px; background:#fff; color:var(--ink);
}
.user-chip{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:5px 6px 5px 12px; font-size:12.5px; }
.user-chip .dot{ width:8px; height:8px; border-radius:50%; background:#6FCF97; box-shadow:0 0 0 3px rgba(111,207,151,0.25); }
.user-chip .who{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip .role{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.8px;
  background:var(--gold); color:var(--teal-deep); border-radius:4px; padding:1px 6px; }
.user-chip button, .user-chip a{ background:transparent; border:1px solid rgba(255,255,255,.25); color:#E7F0EE; border-radius:6px;
  padding:4px 9px; font-size:12px; font-weight:600; text-decoration:none; }
.user-chip button:hover, .user-chip a:hover{ background:rgba(255,255,255,.14); }
.signin-btn{ background:var(--gold); color:var(--teal-deep); border:none; font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:8px; }
.signin-btn:hover{ background:var(--gold-deep); }

.modal-back{ position:fixed; inset:0; background:rgba(8,57,66,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:16px; }
.modal-back.open{ display:flex; }
.modal{ background:#fff; border-radius:12px; width:100%; max-width:420px; max-height:92vh; overflow:auto; padding:24px; box-shadow:0 20px 50px -10px rgba(0,0,0,.4); position:relative; }
.modal h3{ margin-top:0; font-size:22px; }
.modal .close-x{ position:absolute; top:10px; right:12px; background:none; border:none; font-size:22px; color:var(--ink-soft); line-height:1; }
.modal-tabs{ display:flex; gap:6px; margin-bottom:16px; }
.modal-tabs button{ flex:1; padding:8px; border-radius:8px; border:1px solid var(--line); background:#fff; font-weight:700; font-size:13px; color:var(--teal); }
.modal-tabs button.active{ background:var(--teal); color:#fff; border-color:var(--teal); }
.form-msg{ font-size:13px; font-weight:600; border-radius:8px; padding:9px 12px; margin:0 0 12px; display:none; }
.form-msg.show{ display:block; }
.form-msg.bad{ background:#F3E4E4; color:var(--maroon); border:1px solid #E7D2D2; }
.form-msg.good{ background:#E9F1EE; color:var(--jade); border:1px solid #C9DCD3; }
.hint{ font-size:11.5px; color:var(--ink-soft); margin:4px 0 0; font-style:italic; }

.idea-vote-btn.chosen.support{ background:var(--jade); color:#fff; border-color:var(--jade); }
.idea-vote-btn.chosen.oppose{ background:var(--maroon); color:#fff; border-color:var(--maroon); }
.comment{ border-top:1px solid var(--line-soft); padding:10px 0; }
.comment:first-of-type{ border-top:0; }
.comment .c-head{ font-size:12px; color:var(--ink-soft); margin-bottom:2px; }
.comment .c-head b{ color:var(--ink); }
.comment .c-body{ font-size:13.5px; white-space:pre-wrap; overflow-wrap:anywhere; }
.toast-banner{ background:#E9F1EE; border:1px solid #C9DCD3; color:var(--jade); padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:14px; }
.toast-banner.bad{ background:#F3E4E4; border-color:#E7D2D2; color:var(--maroon); }
.hide{ display:none !important; }