/* 23-fullness-viewer.css — Fullness Memory vault viewer modal. */

.fm-viewer-modal {
  /* The modal is appended to <body>, so without an explicit position it
   * is laid out in the document flow — it ended up BELOW the fold and
   * looked like it had not opened at all. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal, 500);
  width: min(92vw, 760px);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-inset-bezel), 0 20px 60px rgba(0, 0, 0, 0.6);
  border-radius: 0;
  overflow: hidden;
}

/* The library modal surface: flat black, no gradient, hairline bezel. */
.fm-viewer-modal.glass-glow,
.fm-viewer-modal {
  background: rgba(0, 0, 0, 0.92);
}

@media (max-width: 560px) {
  .fm-viewer-modal {
    width: calc(100vw - 16px);
    max-height: 88vh;
  }
}

.fm-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.fm-viewer-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.fm-viewer-title h3 {
  margin: 0;
  font: 700 12px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.fm-viewer-count {
  font: 500 10px var(--mono);
  letter-spacing: 0.10em;
  color: var(--c-ink-muted);
}

.fm-viewer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}

/* ── search row ────────────────────────────────────────── */
.fm-viewer-search {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.fm-viewer-search .ql-input { flex: 1 1 200px; min-width: 0; }

/* ── passport card ─────────────────────────────────────────
 *
 * "Your profile to QUAD" — the protected fork of the vault. It is
 * styled like a credential card rather than a note, because it is not
 * a note: QUAD maintains it, and the user cannot edit or delete it.
 * ────────────────────────────────────────────────────────── */
.fm-passport {
  position: relative;
  margin-bottom: 14px;
  padding: 0;
  border: 1px solid var(--border-accent);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(204, 144, 80, 0.07), rgba(0, 0, 0, 0) 120px),
    rgba(255, 255, 255, 0.02);
  box-shadow:
    var(--shadow-inset-light, inset 0 1px 0 rgba(255, 255, 255, 0.10)),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* The guilloche-ish hairline band that makes it read as a card. */
.fm-passport::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      var(--c-accent, #cc9050) 20%,
      var(--c-accent, #cc9050) 80%,
      transparent);
  opacity: 0.5;
}

.fm-passport-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-2);
}

.fm-passport-crest {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--c-accent, #cc9050);
  border: 1px solid var(--border-accent);
  border-radius: 2px;
  background: rgba(204, 144, 80, 0.08);
}

.fm-passport-title {
  font: 700 13px var(--display, 'Space Grotesk', system-ui, sans-serif);
  letter-spacing: 0.02em;
  color: var(--c-ink, #f0eadd);
}

.fm-passport-sub {
  margin-top: 3px;
  font: 500 10px var(--mono, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-dim, #8a8478);
}

.fm-passport-lock {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--c-ink-dim, #8a8478);
  opacity: 0.6;
}

.fm-passport-body {
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fm-passport-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fm-passport-row:last-child { border-bottom: 0; }

.fm-passport-icon {
  font-size: 15px;
  flex-shrink: 0;
  color: var(--c-accent, #cc9050);
  opacity: 0.75;
}

.fm-passport-label {
  flex: 0 0 auto;
  min-width: 150px;
  font: 600 10px var(--mono, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-dim, #8a8478);
}

.fm-passport-value {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 13px var(--body, 'Geist', system-ui, sans-serif);
  color: var(--c-ink, #f0eadd);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-passport-roles {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fm-passport-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border-accent);
  border-radius: 2px;
  background: rgba(204, 144, 80, 0.08);
  font: 700 9px var(--mono, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent, #cc9050);
}

@media (max-width: 560px) {
  .fm-passport-label { min-width: 0; }
  .fm-passport-row { flex-wrap: wrap; }
  .fm-passport-value, .fm-passport-roles { flex-basis: 100%; padding-left: 25px; }
}

/* ── note card (read view) ──────────────────────────────── */
.fm-vnote {
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-2);
  border-left: 2px solid var(--border-accent);
}
.fm-vnote-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.fm-vnote-title {
  font: 600 13px var(--body);
  color: var(--c-ink);
  word-break: break-word;
}
.fm-vnote-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.fm-vnote-body {
  font: 500 12px/1.6 var(--body);
  color: var(--c-ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
}
.fm-vnote-body .fm-wikilink {
  color: var(--c-accent-bright);
  text-decoration: underline dotted var(--c-accent-dim);
}
.fm-vnote-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── editor ─────────────────────────────────────────────── */
.fm-ve {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fm-ve-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-ve-row .ql-input { flex: 1 1 180px; min-width: 0; }
.fm-ve textarea {
  width: 100%;
  min-height: 140px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  color: var(--c-ink);
  font: 500 12px/1.6 var(--mono);
  padding: 10px 12px;
  outline: none;
  resize: vertical;
}
.fm-ve textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent), 0 0 12px var(--c-accent-glow); }

/* ── empty state ────────────────────────────────────────── */
.fm-vempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
}
.fm-vempty-icon {
  font-size: 34px;
  color: var(--c-ink-faint);
  line-height: 1;
}
.fm-vempty-title {
  font: 700 11px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.fm-vempty-sub {
  font: 500 12px/1.5 var(--body);
  color: var(--c-ink-muted);
  max-width: 380px;
}