/* Nevents: an institution's community (web/js/nevents/community.js, org-view.js): the page's tabs, suggestions
   with their support button and the institution's answer, polls with bars that fill in its colour, and their
   dialogs. Everything takes the institution's colour (--org) as its accent. */

/* ---------------------------------------------------------------- the tabs under the hero: underlined, in its colour */
.nev-org-tabs { --org: var(--primary); display: flex; gap: 24px; margin: 0 16px 4px; border-bottom: 1px solid var(--border);
  background: var(--bg); position: sticky; top: 60px; z-index: 5; overflow-x: auto; scrollbar-width: none; }
.nev-org-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 12px 0 10px; margin-bottom: -1px; border: 0;
  border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 650;
  cursor: pointer; white-space: nowrap; transition: color .15s; }
.nev-org-tabs button svg { width: 17px; height: 17px; flex: none; }
.nev-org-tabs button:hover { color: var(--text); }
.nev-org-tabs button.on { color: var(--text); border-color: var(--org); }
.nev-org-tabs button b { min-width: 20px; padding: 0 5px; border-radius: 4px; font-size: 11.5px; line-height: 19px; text-align: center;
  background: var(--surface-2); color: var(--text-2); }
#nev-org-tab { min-height: 200px; }

.nev-comm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 16px 4px; }
.nev-comm-count { font-size: 13.5px; color: var(--muted); }
.nev-comm-count b { color: var(--text); font-size: 15px; }
.nev-seg-sm button { padding: 6px 11px; font-size: 13px; }
.nev-seg-sm button svg { width: 14px; height: 14px; }
.nev-comm-section { padding-top: 26px; }
.nev-comm-empty { display: grid; justify-items: center; gap: 4px; padding: 40px 24px; text-align: center; color: var(--muted); }
.nev-comm-empty h3 { margin: 8px 0 0; color: var(--text); font-size: 18px; }
.nev-comm-empty p { margin: 0; max-width: 40ch; font-size: 14px; }

/* ---------------------------------------------------------------- the composer */
.nev-suggest { --org: var(--primary); display: grid; gap: 10px; margin: 14px 16px 0; padding: 16px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); transition: border-color .15s; }
.nev-suggest.open { border-color: var(--border-strong); }
.nev-suggest .input { font-size: 15px; padding: 11px 14px; border-radius: 6px; background: var(--bg); }
.nev-suggest .input:focus { border-color: var(--org); box-shadow: 0 0 0 1px var(--org); }
.nev-suggest-more { display: grid; gap: 10px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .2s; }
.nev-suggest.open .nev-suggest-more { max-height: 260px; opacity: 1; }
.nev-suggest textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.nev-suggest-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nev-suggest-foot small { color: var(--faint); font-size: 12px; }
.nev-suggest-foot .btn { background: var(--org); }
.nev-suggest-foot .btn:hover:not(:disabled) { filter: brightness(1.12); background: var(--org); }
.nev-suggest-foot .btn svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- a suggestion: the support button on its left */
.nev-sugg-list { display: grid; gap: 10px; padding: 8px 16px 0; }
.nev-sugg { --org: var(--primary); display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); transition: border-color .15s; }
.nev-sugg:hover { border-color: var(--border-strong); }
.nev-sugg.voted { border-color: color-mix(in srgb, var(--org) 40%, var(--border)); }
.nev-sugg.declined { opacity: .72; }
.nev-vote { --org: inherit; align-self: start; display: grid; justify-items: center; padding: 8px 0 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-2); font: inherit;
  transition: background-color .15s, border-color .15s, color .15s; }
.nev-vote svg { width: 18px; height: 18px; }
.nev-vote b { font-size: 19px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.nev-vote span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.nev-vote:hover:not(:disabled) { border-color: var(--org); color: var(--text); }
.nev-vote[aria-pressed="true"] { color: #fff; border-color: var(--org); background: var(--org); }
.nev-vote[aria-pressed="true"] b, .nev-vote[aria-pressed="true"] span, .nev-vote[aria-pressed="true"]:hover:not(:disabled) { color: #fff; }
.nev-vote:disabled { cursor: default; opacity: .75; }
.nev-vote.pop { animation: nev-pop .35s ease-out; }
@keyframes nev-pop { 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.nev-sugg-main { display: grid; gap: 7px; min-width: 0; }
.nev-sugg-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nev-sugg h3 { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.nev-sugg-details { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.nev-sugg-by { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.nev-sugg-by .avatar.sm { width: 22px; height: 22px; font-size: 9px; border: 0; }
.nev-sugg-by b { color: var(--text-2); font-weight: 600; }
.nev-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--text-2); }
.nev-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nev-status.open { color: #69b1ff; background: rgba(24, 144, 255, .12); }
.nev-status.planned { color: #ffc53d; background: rgba(255, 197, 61, .12); }
.nev-status.done { color: #73d13d; background: rgba(115, 209, 61, .12); }
.nev-status.declined { color: var(--muted); }
.nev-rank { padding: 1px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 800; color: #1b1e26; background: var(--text-2); }
.nev-rank.r1 { background: var(--warning); }
.nev-rank.r2 { background: var(--text-2); }
.nev-rank.r3 { background: #d4793a; }

/* the institution's answer, under the suggestion */
.nev-answer { display: flex; gap: 10px; margin-top: 4px; padding: 10px 12px; border-radius: 4px;
  background: var(--surface-2); border-left: 3px solid var(--org); }
.nev-answer .grow { display: grid; gap: 4px; }
.nev-answer-head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 13px; }
.nev-answer-head span { color: var(--muted); font-size: 12px; }
.nev-answer p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-line; }
.nev-linked { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 9px 12px; border-radius: 6px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); transition: border-color .15s; }
.nev-linked:hover { border-color: var(--org); }
.nev-linked > svg { width: 17px; height: 17px; flex: none; color: var(--org); }
.nev-linked > svg:last-child { color: var(--muted); }
.nev-linked .grow { display: grid; min-width: 0; }
.nev-linked b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nev-linked .grow span { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- a poll */
.nev-polls { display: grid; gap: 12px; padding: 12px 16px 0; }
.nev-poll { --org: var(--primary); position: relative; display: grid; gap: 12px; padding: 18px 16px 16px; border-radius: 8px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--org); }
.nev-poll.closed { border-top-color: var(--border-strong); }
.nev-poll-head { display: flex; align-items: flex-start; gap: 10px; }
.nev-poll-head h3 { flex: 1; min-width: 0; }
.nev-poll-left { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 700;
  color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.nev-poll-left svg { width: 13px; height: 13px; }
.nev-poll-left.done { color: var(--muted); }
.nev-poll h3 { margin: 2px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }

.nev-opts { display: grid; gap: 8px; }
.nev-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 9px 14px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg); overflow: hidden; isolation: isolate; }
.nev-opts.pick .nev-opt { cursor: pointer; transition: border-color .15s, background-color .15s; }
.nev-opts.pick .nev-opt:hover { border-color: color-mix(in srgb, var(--org) 70%, var(--border-strong)); }
.nev-opt input { position: absolute; opacity: 0; pointer-events: none; }
.nev-tick { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 999px; border: 2px solid var(--border-strong);
  color: transparent; transition: background-color .15s, border-color .15s, color .15s; }
.nev-opts[role="group"] .nev-tick { border-radius: 4px; }
.nev-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.nev-opt:has(input:checked) { border-color: var(--org); background: color-mix(in srgb, var(--org) 12%, var(--bg)); }
.nev-opt:has(input:checked) .nev-tick { background: var(--org); border-color: var(--org); color: #fff; }
.nev-opt:has(input:focus-visible) { outline: 2px solid var(--org); outline-offset: 2px; }
.nev-opt-label { display: grid; min-width: 0; flex: 1; }
.nev-opt-label b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.nev-opt-label small { font-size: 12px; color: var(--muted); }
.nev-opt-date { width: 40px; flex: none; display: grid; justify-items: center; padding: 3px 0; border-radius: 6px; background: var(--surface-2); }
.nev-opt-date b { font-size: 16px; line-height: 1.1; font-weight: 800; }
.nev-opt-date span { font-size: 11px; font-weight: 650; color: var(--text-2); }
/* results: a bar that fills the row */
.nev-opt.result { border-color: var(--border); }
.nev-bar { position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1;
  background: color-mix(in srgb, var(--org) 18%, transparent); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.nev-opt.lead { border-color: color-mix(in srgb, var(--org) 55%, var(--border)); }
.nev-opt.lead .nev-bar { background: color-mix(in srgb, var(--org) 36%, transparent); }
.nev-opt.lead .nev-opt-label b { font-weight: 800; }
.nev-opt-meta { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.nev-opt-meta b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nev-opt-meta small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.nev-crown { color: #ffc53d; display: inline-grid; }
.nev-crown svg { width: 17px; height: 17px; }
.nev-mine { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--org); color: #fff; }
.nev-mine svg { width: 13px; height: 13px; stroke-width: 3; }
.nev-opt-event, .nev-opt-make { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: -2px 0 2px 6px; font-size: 13px; font-weight: 700; }
.nev-opt-event { color: #73d13d; }
.nev-opt-make { padding: 5px 12px; border-radius: 6px; color: #fff; background: var(--org); }
.nev-opt-make:hover { filter: brightness(1.12); }
.nev-opt-event svg, .nev-opt-make svg { width: 15px; height: 15px; }
.nev-poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 2px; }
.nev-poll-stats { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.nev-poll-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.nev-poll-stats b { color: var(--text); }
.nev-poll-stats svg { width: 14px; height: 14px; }
.nev-poll-action { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.nev-poll-action .btn-primary { background: var(--org); padding: 8px 18px; }
.nev-poll-action .btn-primary:hover:not(:disabled) { filter: brightness(1.12); background: var(--org); }
.nev-poll-action .btn svg { width: 15px; height: 15px; }
.nev-poll-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.nev-poll-note svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- dialogs: answering a suggestion, starting a poll */
.nev-dlg.wide { width: min(540px, calc(100% - 32px)); }
.nev-dlg-quote { --org: var(--primary); display: grid; gap: 2px; padding: 10px 14px; border-radius: 4px; border-left: 3px solid var(--org);
  background: var(--surface); }
.nev-dlg-quote span { font-size: 12.5px; color: var(--muted); }
.nev-poll-form .nev-seg { width: 100%; grid-auto-columns: 1fr; }
.nev-poll-form .nev-seg button { justify-content: center; }
.nev-opt-inputs { display: grid; gap: 6px; }
.nev-opt-input { display: flex; gap: 6px; align-items: center; }
.nev-opt-input .input { flex: 1; min-width: 0; }
.nev-opt-input .icon-btn { width: 34px; height: 34px; flex: none; color: var(--muted); }
.nev-opt-input .icon-btn:disabled { opacity: .3; cursor: default; }
.nev-opt-input .icon-btn svg { width: 16px; height: 16px; }
.nev-add-opt { justify-self: start; }
.nev-add-opt svg { width: 15px; height: 15px; }
.nev-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.nev-check[hidden] { display: none; }
.nev-dlg .nev-check { margin-top: 0; }

/* ---------------------------------------------------------------- the create form, made of a suggestion or a poll */
.nev-source { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 6px; transition: opacity .2s;
  border: 1px solid var(--border); border-left: 3px solid var(--warning); background: var(--surface); }
.nev-source > svg { width: 24px; height: 24px; flex: none; color: #ffc53d; }
.nev-source .grow { display: grid; gap: 2px; }
.nev-source b { font-size: 15px; }
.nev-source span { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.nev-source.off { opacity: .45; }

/* ---------------------------------------------------------------- the lists' search: filters behind a toggle */
.nev-search-row { display: flex; gap: 8px; }
.nev-search-row .nev-search { flex: 1; min-width: 0; }
.nev-filter-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 6px; cursor: pointer; flex: none;
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600;
  transition: border-color .15s, background-color .15s, color .15s; }
.nev-filter-toggle:hover { color: var(--text); border-color: var(--primary); }
.nev-filter-toggle.on { color: var(--text); background: var(--surface-2); border-color: var(--primary); }
.nev-filter-toggle svg { width: 17px; height: 17px; }
.nev-filter-toggle b { min-width: 19px; padding: 0 5px; border-radius: 4px; font-size: 11.5px; line-height: 19px; text-align: center; color: #fff; background: var(--primary); }
.nev-filter-row[hidden] { display: none; }
.nev-filter-row { padding: 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.nev-filter-row select.input { background-color: var(--bg); border-radius: 6px; }
.nev-topic-chips { flex-wrap: nowrap; }
@media (max-width: 640px) { .nev-filter-toggle span { display: none; } }

/* a field label wraps instead of squeezing (the share dialog's long hint) */
.nev-field > span { flex-wrap: wrap; }

/* ================================================================ fewer, smaller panels */
/* a menu under a "⋯" or "Yönet" button (util.js nevMenu) */
.nev-menu { min-width: 200px; padding: 6px; border-radius: 8px; animation: menu-in .12s ease-out; }
.nev-menu button { border-radius: 5px; padding: 10px 12px; }
.nev-menu button svg { width: 17px; height: 17px; flex: none; }
.nev-more-btn { width: 32px; height: 32px; flex: none; color: var(--muted); }
.nev-more-btn svg { width: 18px; height: 18px; }
.nev-more-btn[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
.nev-sugg-top .nev-more-btn { margin-left: auto; margin-top: -4px; }
.nev-header-icon { border: 1px solid var(--border-strong); width: 36px; height: 36px; }
.nev-header-icon + .btn { margin-left: 8px; }

/* an institution's "Hakkında", folded */
.nev-org-more summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.nev-org-more summary::-webkit-details-marker { display: none; }
.nev-org-more summary svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.nev-org-more summary span { flex: 1; }
details[open] > summary > svg:last-child { transform: rotate(90deg); }

/* an institution's page: name, line and the about text behind "Hakkında" */
.nev-org-hero.compact { padding-bottom: 12px; }
.nev-org-line { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-top: 10px; }
.nev-org-line .nev-org-tagline { margin: 0; }
.nev-org-going { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.nev-org-going svg { width: 15px; height: 15px; }
.nev-org-more { margin-top: 8px; border-top: 1px solid var(--border); }
.nev-org-more summary { padding: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.nev-org-more[open] summary { padding-bottom: 4px; }
.nev-org-more .nev-org-links { margin-bottom: 0; }

/* the suggestion composer: one line until it is used */
.nev-suggest { padding: 10px; gap: 0; }
.nev-suggest.open { gap: 10px; }
.nev-suggest-line { display: flex; align-items: center; gap: 8px; }
.nev-suggest-line .input { flex: 1; min-width: 0; border-color: transparent; background: transparent; }
.nev-suggest.open .nev-suggest-line .input { background: var(--bg); border-color: var(--border-strong); }
.nev-suggest-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 6px; color: #fff; background: var(--org); }
.nev-suggest-ico svg { width: 18px; height: 18px; }
.nev-comm-new { background: var(--org); }
.nev-comm-new:hover:not(:disabled) { filter: brightness(1.12); background: var(--org); }
.nev-comm-new svg { width: 15px; height: 15px; }
.nev-poll-kind { display: inline-flex; align-items: center; gap: 6px; margin-top: -6px; font-size: 12.5px; color: var(--muted); }
.nev-poll-kind svg { width: 14px; height: 14px; }

/* the event page: the host's tools behind "Yönet", the host's other events in one panel */
.nev-manage-btn { position: relative; height: 40px; }
.nev-manage-btn svg { width: 16px; height: 16px; }
.nev-reports-dot { padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 17px; color: #fff; background: var(--danger); }
.nev-actions-tools { align-items: center; }
.nev-others { padding-bottom: 6px; }
.nev-others-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; color: var(--text); }
.nev-others-head .grow { display: grid; line-height: 1.3; }
.nev-others-head b { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; }
.nev-others-head > svg { width: 16px; height: 16px; color: var(--faint); }
.nev-others-none { margin: 0; padding: 0 8px 8px; font-size: 13px; color: var(--muted); }
.nev-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #36cfc9; animation: pulse 1.4s infinite; }

@media (max-width: 640px) {
  .nev-org-tabs { top: 56px; margin: 0 8px 4px; gap: 18px; }
  .nev-sugg { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .nev-sugg-list, .nev-polls { padding-left: 8px; padding-right: 8px; }
  .nev-suggest { margin: 12px 8px 0; }
  .nev-poll h3 { font-size: 17px; }
}

/* ================================================================ "Sana özel" (feed.js) */
/* the interests and the province (the dialog behind the head's link) */
.nev-prefs-form { display: grid; gap: 12px; }
.nev-prefs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nev-prefs-chips .nev-chip { padding: 6px 12px; }
.nev-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.nev-prefs-city { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.nev-prefs-city svg { width: 17px; height: 17px; flex: none; }
.nev-prefs-city select.input { width: auto; min-width: 200px; padding: 8px 30px 8px 10px; font-size: 14px; background-color: var(--bg); }
.nev-prefs-actions { display: flex; justify-content: flex-end; gap: 8px; }
.nev-prefs-actions .btn svg { width: 15px; height: 15px; }

/* the wall's end: the next page */
.nev-feed-end { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px 8px; }
.nev-feed-end .btn svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .nev-prefs-city select.input { flex: 1; min-width: 0; }
}

/* ================================================================ Nod quizzes: the room card (the cover is util.js's plain one) */
.nev-nod { --nod: #7c3aed; margin: 14px 16px 0; padding: 16px; border-radius: 8px; color: var(--text); position: relative;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--nod); }
.nev-nod.over { opacity: .7; }
.nev-nod-head { display: flex; align-items: center; gap: 10px; }
.nev-nod-head b { font-size: 15px; letter-spacing: .01em; }
.nev-nod-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: var(--nod); }
.nev-nod-mark svg { width: 17px; height: 17px; }
.nev-nod-state { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--surface-2); }
.nev-nod-state svg { width: 13px; height: 13px; }
.nev-nod.open .nev-nod-state { background: var(--success); color: #0b1a05; }
.nev-nod-body { padding: 16px 0 4px; }
.nev-nod-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.nev-pin-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.nev-pin-tiles i { width: 44px; height: 54px; display: grid; place-items: center; border-radius: 6px; font-style: normal;
  font: 800 28px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong); }
.nev-pin-tiles.masked i { background: var(--surface-2); }
.nev-pin-tiles.masked i::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.nev-nod-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.nev-nod-btn { color: var(--text); background: none; border: 1px solid var(--border-strong); }
.nev-nod-btn:hover:not(:disabled) { background: var(--surface-hover); }
.nev-nod-btn.solid { background: var(--primary); color: #fff; border-color: var(--primary); }
.nev-nod-btn.solid:hover:not(:disabled) { background: var(--primary-hover); }
.nev-nod-btn svg { width: 15px; height: 15px; }
.nev-nod-count { font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.nev-nod-note { font-size: 12.5px; color: var(--muted); }

/* ================================================================ the roll call (attendance) */
.nev-checkin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 16px 0; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--success); background: var(--surface); }
.nev-checkin.host { border-left-color: var(--border-strong); }
.nev-checkin .grow { display: grid; gap: 2px; min-width: 160px; }
.nev-checkin .grow > span { font-size: 13px; color: var(--muted); }
.nev-checkin .grow > span b { color: var(--text); }
.nev-checkin-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 6px; color: #0b1a05; background: var(--success); }
.nev-checkin.host .nev-checkin-ico { color: var(--text); background: var(--surface-2); }
.nev-checkin-ico svg { width: 18px; height: 18px; stroke-width: 2.4; }
.nev-checkin form { display: flex; gap: 6px; }
.nev-code-input { width: 92px; text-align: center; font: 800 18px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .3em; padding: 8px 6px 8px 12px; }
.nev-checkin.done { gap: 8px; padding: 9px 14px; font-size: 13.5px; color: #86efac; }
.nev-checkin.done svg { width: 16px; height: 16px; flex: none; }
.nev-verified-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700;
  color: #86efac; background: rgba(34, 197, 94, .12); white-space: nowrap; }
.nev-verified-tag svg { width: 11px; height: 11px; stroke-width: 3; }

.nev-roll { display: grid; gap: 14px; }
.nev-roll-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); }
.nev-roll-top:fullscreen { justify-content: center; gap: 8vw; background: var(--bg); }
.nev-roll-top:fullscreen .nev-code-tiles i { width: 14vh; height: 18vh; font-size: 12vh; border-radius: 3vh; }
.nev-roll-top:fullscreen .nev-roll-qr svg { width: 45vh; height: 45vh; }
.nev-roll-top:fullscreen .nev-roll-links { display: none; }
.nev-roll-code { display: grid; gap: 8px; justify-items: start; }
.nev-roll-code small { font-size: 12.5px; color: var(--muted); max-width: 30ch; line-height: 1.45; }
.nev-code-tiles { display: flex; gap: 8px; }
.nev-code-tiles i { width: 50px; height: 62px; display: grid; place-items: center; border-radius: 6px; font-style: normal;
  font: 800 34px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-strong); }
.nev-roll-links { font-size: 13px; color: var(--faint); }
.nev-roll-qr { flex: none; line-height: 0; }
.nev-roll-qr svg { width: 132px; height: 132px; border-radius: 6px; }
.nev-roll-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 14px; color: var(--muted); }
.nev-roll-progress b { color: var(--text); font-size: 18px; }
.nev-roll-bar { grid-column: 1 / -1; height: 8px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.nev-roll-bar i { display: block; height: 100%; background: var(--success); transition: width .6s ease; }
.nev-roll .nev-people-list { max-height: 260px; }
.nev-here { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 6px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--muted); background: transparent; border: 1px solid var(--border-strong);
  transition: background-color .15s, color .15s, border-color .15s; }
.nev-here svg { width: 13px; height: 13px; stroke-width: 3; }
.nev-here.on { color: #0b1a05; background: var(--success); border-color: var(--success); }
.nev-here:disabled { cursor: default; opacity: .6; }

@media (max-width: 640px) {
  .nev-nod, .nev-checkin { margin-left: 8px; margin-right: 8px; }
  .nev-pin-tiles i { width: 38px; height: 48px; font-size: 24px; }
  .nev-roll-top { flex-direction: column; }
  .nev-code-tiles i { width: 44px; height: 56px; font-size: 30px; }
}

/* ================================================================ the review, step by step */
.nev-review-ask { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nev-review-ask > span { font-size: 14px; font-weight: 700; color: var(--text-2); }
.nev-star-word { font-style: normal; font-size: 13px; font-weight: 700; color: #f5b301; }
.nev-review-rest { display: none; gap: 10px; }
.nev-review-form.rated .nev-review-rest { display: grid; }
.nev-review-form[data-rating="4"] [data-mood="bad"], .nev-review-form[data-rating="5"] [data-mood="bad"],
.nev-review-form[data-rating="1"] [data-mood="good"], .nev-review-form[data-rating="2"] [data-mood="good"] { display: none; }
.nev-review-rest textarea { resize: vertical; min-height: 60px; }
.nev-review-send { display: flex; align-items: center; gap: 8px; }
.nev-review-send .nev-check { margin: 0; font-size: 13px; }
.nev-review-send .btn svg { width: 15px; height: 15px; }