/* NNI KOL/DOL Nomination Module — shared styles
   Loaded by every page in this mockup. Design tokens live in :root. */

:root {
  /* Novo navy sampled from the Apis bull logo artwork */
  --navy:       #001965;
  --navy-deep:  #001141;
  --accent:     #0b5fa5;   /* matches KOL Master Project mockup */
  --accent-d:   #084578;
  --ink:        #1a2733;
  --ink-soft:   #5a6b7a;
  --ink-faint:  #8a99a8;
  --line:       #d8e0e8;
  --line-soft:  #e8eef4;
  --bg:         #f5f7fa;
  --danger:     #d94860;
  --danger-bg:  rgba(217,72,96,0.08);
  --ok:         #1e7a3a;
  --ok-bg:      rgba(30,122,58,0.08);
  --warn:       #a97406;
  --warn-bg:    #fdf6e3;
  --dol:        #6a3fa0;   /* DOL badge, distinct from KOL */

  /* Logo area of isolation.
     Novo Nordisk brand books express clear space as a multiple of the logo's
     own height. We do not have the NNI brand book in this workspace, so this
     is set to 0.5x the rendered logo height and is the single knob to turn
     once the real spec is confirmed. */
  --logo-height: 42px;
  --logo-clear-space: calc(var(--logo-height) * 0.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Reserve the scrollbar gutter whether or not there is anything to scroll.
   Without it, a page that gains or loses a row gains or loses the scrollbar
   with it, and everything on the page jumps 14px sideways. Most visible on the
   Meetings grid, where choosing a convention with one meeting instead of four
   shifted the whole card - and made the fixed columns in the convention picker
   look as though they were drifting. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ---------- Masthead ---------- */

.masthead {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 22px 28px;
  padding-top: max(22px, env(safe-area-inset-top));
}
.masthead-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.masthead h1 {
  margin: 0;
  /* DOUBLED from 20px on 2026-09-26 (Joe: "increase font X2"), at the same
     time the title became "Novo MeetNow". The two changes belong together:
     the old name ran to 56 characters and could not have been set at 40px
     without wrapping to three lines on a phone. Twelve characters can. */
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.25;
}
.masthead-meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}
.masthead-meta .today { font-variant-numeric: tabular-nums; }
.masthead-meta .who { font-weight: 600; color: #fff; }
.masthead-meta a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
}
.masthead-meta a:hover { color: #fff; border-bottom-color: #fff; }

/* Sign out reads as a control rather than another underlined link. Scoped to
   .signout, not .masthead-meta a: the Meetings masthead uses that same rule for
   "Menu" and "New nomination", which are navigation and should stay quiet. */
.masthead-meta a.signout {
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 6px;
  padding: 5px 14px;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
.masthead-meta a.signout:hover {
  background: rgba(255,255,255,0.18);
  border-color: #fff;
}
.masthead-meta a.signout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Layout ---------- */

main { flex: 1; padding: 32px 20px 44px; }
main.centered { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }

.wrap { max-width: 1040px; margin: 0 auto; }

.card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 30px;
  box-shadow: 0 10px 34px rgba(0,25,101,0.07);
}
.card.narrow { max-width: 400px; padding: 32px 30px 28px; }

.card h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
/* The screen's own title, doubled from 18px on 2026-09-26 (Joe: "New
   nomination > Ad Hoc Meeting | font = 2X").
   A CLASS rather than changing `.card h2`, which is shared by every card
   heading in the app - doubling that would have resized screens nobody asked
   about. */
.card h2.page-title {
  font-size: 36px;
  line-height: 1.15;
}
@media (max-width: 560px) {
  /* Scaled with the narrow breakpoint for the same reason the masthead was:
     leaving the phone on the old size makes the change look like it failed on
     the device this app is actually for. */
  .card h2.page-title { font-size: 30px; }
}
.card .lede {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Sections ---------- */

.section {
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  margin-top: 22px;
}
.section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.section-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
}
.step {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.section-note { font-size: 12px; color: var(--ink-soft); margin: -6px 0 14px; }

/* ---------- Fields ---------- */

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ink);
  margin-bottom: 7px;
}
.hint {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 5px;
  letter-spacing: 0;
}

input[type="text"], input[type="password"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;          /* 16px stops iOS Safari zooming on focus */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235a6b7a' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11,95,165,0.14);
}
input::placeholder, textarea::placeholder { color: #a9b6c2; }

/* ---------- Buttons ---------- */

button, .btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.06s, opacity 0.15s, background 0.15s;
}
.btn-primary {
  padding: 13px 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  box-shadow: 0 3px 10px rgba(11,95,165,0.22);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 5px 16px rgba(11,95,165,0.3); }
.btn-primary:active:not(:disabled) { transform: scale(0.99); }
.btn-block { width: 100%; }
.btn-quiet {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--line);
}
.btn-quiet:hover:not(:disabled) { border-color: var(--accent); background: rgba(11,95,165,0.04); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.actions .spacer { flex: 1; }
.missing { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Search + results ---------- */

.search { position: relative; }
.results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,25,101,0.14);
  max-height: 264px;
  overflow-y: auto;
  display: none;
}
.results.open { display: block; }
.result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.result:last-child { border-bottom: 0; }
.result:hover, .result.active { background: rgba(11,95,165,0.06); }
.result-main { flex: 1; min-width: 0; }
.result-name { font-weight: 600; font-size: 14px; }
.result-sub {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-empty { padding: 14px; font-size: 13px; color: var(--ink-soft); }
.result-more {
  padding: 9px 14px;
  font-size: 11.5px;
  color: var(--ink-faint);
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  position: sticky;
  bottom: 0;
}

/* ---------- Badges + chips ---------- */

.badge {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(11,95,165,0.1);
  color: var(--accent);
}
.badge.dol { background: rgba(106,63,160,0.11); color: var(--dol); }
.badge.manual { background: var(--warn-bg); color: var(--warn); }

/* Capped rather than full-card width: a chip's longest line is a specialty
   string, and stretching the tile to ~1000px leaves a name stranded beside an
   acre of empty white. */
/* "(required)" beside a label. Deliberately not a bare red asterisk: the word
   is readable by screen readers and needs no legend. */
.req { font-weight: 400; font-size: 11.5px; color: var(--ink-faint); }

.chips { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-width: 560px; }
.chip {
  display: flex;
  /* A chip can now run to four lines (degree/specialty, address, CDM ID), so
     the badge and the remove button sit at the TOP rather than floating to the
     middle of a tall block. */
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  /* Tinted so a selected HCP reads as a settled choice rather than as another
     white input surface. Sits between the page (--bg) and the card (#fff). */
  background: #eef2f7;
}
/* Not selectable. A tinted tile full of text with a caret in it invites the
   user to try editing values that are read-only here - they come from NPPES and
   the NNI customer master, not from this form. -webkit- prefixes are required:
   Safari (an explicitly supported browser) still needs them, and
   -webkit-touch-callout stops the iOS long-press "Copy / Look Up" sheet.
   Scoped to .chip-main so the remove button is untouched. */
.chip-main {
  flex: 1; min-width: 0;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
}
.chip-name { font-weight: 600; font-size: 14px; }
.chip-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.chip-sub + .chip-sub { margin-top: 0; }
.chip-remove {
  flex: 0 0 auto;
  margin-top: -2px;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 17px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.chip-remove:hover { background: var(--danger-bg); color: var(--danger); }

.empty-chips {
  font-size: 12.5px;
  color: var(--ink-faint);
  padding: 13px 14px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  margin-top: 12px;
}

/* ---------- Notices ---------- */

.notice {
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 16px;
}
.notice.error  { background: var(--danger-bg); border: 1px solid rgba(217,72,96,0.28); color: #a5314a; display: none; }
.notice.error.show { display: block; }
.notice.sample { background: var(--warn-bg); border: 1px solid #f0e0b6; color: var(--warn); }

/* ---------- Confirmation ---------- */

.confirm { text-align: center; padding: 26px 10px 14px; }
.confirm-mark {
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}
.confirm h2 { margin: 0 0 8px; font-size: 20px; }
.confirm p { margin: 0 auto 8px; max-width: 460px; color: var(--ink-soft); font-size: 13.5px; }

.summary {
  text-align: left;
  max-width: 520px;
  margin: 22px auto 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.summary-row {
  display: flex;
  gap: 16px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.summary-row:last-child { border-bottom: 0; }
.summary-row dt {
  flex: 0 0 128px;
  margin: 0;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 12px;
  padding-top: 1px;
}
.summary-row dd { margin: 0; flex: 1; }

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--line);
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* logo sits lower-right */
  padding: 0 28px;
}
/* The clear-space box: nothing may encroach on this padding. */
.logo-lockup { padding: var(--logo-clear-space); }
.logo-lockup img { height: var(--logo-height); width: auto; display: block; }

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
  :root { --logo-height: 34px; }
  .masthead { padding: 18px 20px; padding-top: max(18px, env(safe-area-inset-top)); }
  .masthead h1 { font-size: 34px; }   /* doubled with the base, 2026-09-26 */
  .masthead-inner { gap: 6px; }
  .masthead-meta { gap: 14px; font-size: 12.5px; }
  .card { padding: 24px 20px; border-radius: 10px; }
  .card.narrow { padding: 26px 22px 24px; }
  main { padding: 20px 14px 34px; }
  main.centered { padding: 28px 16px; }
  .footer-inner { padding: 0 16px; }
  .summary-row { flex-direction: column; gap: 3px; }
  .summary-row dt { flex-basis: auto; }
  .actions .btn-primary { width: 100%; }
}

/* ---------------------------------------------------------------- waiting --
 * The sign-in button while /api/roster is answering.
 *
 * THIS EXISTS BECAUSE THE WAIT IS ~2 SECONDS, NOT 0.2. Netlify runs these
 * functions on Lambda and tears an idle one down, so the first call after a
 * quiet spell pays a cold start: measured 1.95s and 2.32s against 0.24-0.44s
 * warm. MeetNow is used in bursts at conventions, so almost every sign-in is
 * the first after a quiet spell - the cold start is the normal case here, not
 * the exception.
 *
 * Until now the only feedback was `submitBtn.disabled = true`: the button
 * greyed and nothing happened for two seconds, which reads as a dead tap and
 * invites a second one.
 *
 * CSS, NOT A GIF, and that is not a style preference: a GIF is another HTTP
 * request, fired at exactly the moment the network has already proved slow. It
 * would be least likely to arrive when it is most needed. This costs nothing
 * and renders instantly.
 */
.btn-primary.is-waiting {
  position: relative;
  color: transparent;            /* hide the label, keep the button's width */
  pointer-events: none;
}
.btn-primary.is-waiting::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nn-spin 0.7s linear infinite;
}
@keyframes nn-spin { to { transform: rotate(360deg); } }

/* Said out loud under the button, because a spinner shows that something is
 * happening and not WHAT. Two seconds of silence with a spinner is still two
 * seconds of not knowing whether the password was wrong. */
.signing-in {
  margin: 10px 0 0;
  font-size: 13px;
  color: #5a6b7a;
  text-align: center;
}
.signing-in[hidden] { display: none; }

/* Respect a reduced-motion preference: hold the ring still rather than
 * removing it, so the waiting state is still visible. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary.is-waiting::after { animation: none; }
}