/* 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;
  font-size: 20px;
  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);
}
.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: 17px; }
  .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%; }
}