/* view-styles.css — visual identity for the Portrait surface.
 *
 * Loaded once via <link rel="stylesheet"> from index.html. All
 * Portrait-specific classes are prefixed `vv-` so they cannot collide
 * with the existing 13K-line stylesheet inside index.html.
 *
 * Tokens live in :root (additive — existing core palette is untouched);
 * also mirrored in view-shared.js as PALETTE for JS-side use.
 */

:root {
  /* Indian-miniature accent palette (Portrait additions) */
  --gold-leaf:    #C8A24A;
  --vermillion:   #B53A2C;
  --terracotta:   #A8633F;
  --indigo-deep:  #2A3270;
  --lapis:        #22467A;
  --saffron:      #D67A2F;
  --cream-paper:  #F4EFD8;
  --ink-faded:    #3A2A1E;

  /* Polyrhythm — breathing durations per ring */
  --breath-inner:        4s;
  --breath-close:        5s;
  --breath-extended:     6s;
  --breath-acquaintance: 7s;
  --breath-resolving:    8s;
  --breath-self:         8s;
}

/* ── Portrait root container ───────────────────────────────────── */

.vv-root {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
  background:
    radial-gradient(ellipse at center,
                    rgba(244, 239, 216, 0.92) 0%,
                    rgba(244, 239, 216, 0.78) 40%,
                    rgba(232, 218, 188, 0.62) 75%,
                    rgba(60, 48, 28, 0.55) 100%),
    var(--cream-paper);
  font-family: 'Cormorant Garamond', 'Hind Siliguri', 'Noto Serif Bengali', serif;
  color: var(--ink-faded);
  overflow: hidden;
}

/* Grain overlay — never flat */
.vv-root::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(58, 42, 30, 0.06) 1px, transparent 1.4px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: 0.4;
}

/* ── Constellation ────────────────────────────────────────────── */

.vv-constellation {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vv-stage {
  width: min(96vmin, 880px);
  height: min(96vmin, 880px);
  display: block;
  filter: drop-shadow(0 6px 18px rgba(14, 30, 66, 0.10));
}

/* Hand-drawn ring guides (dotted arcs, not solid circles) */
.vv-ring {
  fill: none;
  stroke: rgba(58, 42, 30, 0.12);
  stroke-width: 0.18;
  stroke-dasharray: 1.6 4.2;
}
.vv-ring--resolving {
  stroke: rgba(184, 70, 50, 0.16);
  stroke-dasharray: 1.0 5.0;
}
.vv-ring-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2.4px;
  fill: rgba(58, 42, 30, 0.30);
  letter-spacing: 0.18px;
  text-anchor: middle;
}

/* ── The user's centre ────────────────────────────────────────── */

.vv-self {
  pointer-events: auto;
}
.vv-self-core {
  fill: var(--gold-leaf);
}
.vv-self-halo {
  fill: url(#vv-orb-gold);
  opacity: 0.85;
  transform-origin: center;
  animation: vv-breathe-slow var(--breath-self) ease-in-out infinite;
}
.vv-self-label {
  font-family: 'Cormorant Garamond', 'Hind Siliguri', 'Noto Serif Bengali', serif;
  font-style: italic;
  font-size: 4.2px;
  fill: var(--ink-faded);
  text-anchor: middle;
  letter-spacing: 0.04em;
}

/* ── Lights — three-layer orbs (aura + halo + core) ──────────── */

.vv-light {
  cursor: pointer;
  transition: filter 360ms cubic-bezier(.34,.07,.15,.96);
}
.vv-light:hover { filter: brightness(1.08); }

.vv-light-aura {
  opacity: 0.06;
  filter: blur(1.2px);
  transform-origin: center;
}

.vv-light-halo {
  transform-origin: center;
  transform-box: fill-box;
  /* Per-ring breathing — applied via class below */
}

.vv-light-core {
  transform-origin: center;
  transform-box: fill-box;
}

.vv-light-name {
  font-family: 'Cormorant Garamond', 'Hind Siliguri', 'Noto Serif Bengali', serif;
  font-style: italic;
  font-size: 2.8px;
  fill: var(--ink-faded);
  text-anchor: middle;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0.74;
  transition: opacity 320ms ease, font-size 320ms ease;
}

/* Per-ring breathing */
.vv-light--inner       .vv-light-halo { animation: vv-breathe var(--breath-inner) ease-in-out infinite; }
.vv-light--close       .vv-light-halo { animation: vv-breathe var(--breath-close) ease-in-out infinite; }
.vv-light--extended    .vv-light-halo { animation: vv-breathe var(--breath-extended) ease-in-out infinite; }
.vv-light--acquaintance .vv-light-halo { animation: vv-breathe var(--breath-acquaintance) ease-in-out infinite; }
.vv-light--resolving   .vv-light-halo { animation: none; opacity: 0.55; }

/* Trajectory variants */
.vv-light--warming  .vv-light-halo { animation-name: vv-breathe-warm; }
.vv-light--cooling  .vv-light-halo { filter: saturate(0.6); }
.vv-light--dormant  .vv-light-halo { animation: none; opacity: 0.34; stroke-dasharray: 0.6 1.2; }

/* Resolving status */
.vv-light--resolving .vv-light-core {
  fill: var(--vermillion);
  fill-opacity: 0.55;
}
.vv-light--resolving .vv-light-halo {
  stroke: var(--vermillion);
  stroke-opacity: 0.4;
  stroke-width: 0.25;
  fill-opacity: 0.18;
  stroke-dasharray: 0.6 0.9;
}
.vv-light--resolving .vv-light-name { display: none; }
.vv-light--resolving .vv-resolving-mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 3.2px;
  fill: var(--vermillion);
  fill-opacity: 0.85;
  text-anchor: middle;
}

/* Bloom on tap */
.vv-light.is-bloomed .vv-light-halo {
  animation-play-state: paused;
  transform: scale(1.55);
  transition: transform 800ms cubic-bezier(.34,.07,.15,.96);
}
.vv-light.is-bloomed .vv-light-core {
  transform: scale(1.6);
  transition: transform 800ms cubic-bezier(.34,.07,.15,.96);
}
.vv-light.is-bloomed .vv-light-name {
  font-size: 3.6px;
  opacity: 1;
}

/* Highlighted (first-import reveal stage 3) */
.vv-light.is-highlighted .vv-light-halo {
  animation: vv-pulse-gold 2.6s ease-in-out 2;
}

/* ── Kinship threads (revealed on hover) ─────────────────────── */

.vv-kinship-layer {
  pointer-events: none;
}
.vv-kinship-thread {
  fill: none;
  stroke: var(--gold-leaf);
  stroke-width: 0.24;
  stroke-opacity: 0;
  transition: stroke-opacity 1.2s ease-out;
  pointer-events: none;
}
.vv-kinship-thread.is-active {
  stroke-opacity: 0.22;
}

/* ── Attention thread (always-on, follows cursor) ────────────── */

.vv-attention-thread {
  fill: none;
  /* Solid fallback first; gradient stroke layered above via the
     class is-active. Some Chromium builds fail to resolve url(...)
     strokes inside SVGs that mount mid-transition, so the solid
     stroke ensures the thread is always visible. */
  stroke: var(--gold-leaf);
  stroke-width: 0.7;
  stroke-linecap: round;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease-out;
  filter: drop-shadow(0 0 0.6px rgba(200, 162, 74, .6));
}
.vv-attention-thread.is-active {
  opacity: 0.92;
}

/* ── Bloomed card (foreignObject content) ────────────────────── */

.vv-card {
  font-family: 'Cormorant Garamond', 'Hind Siliguri', 'Noto Serif Bengali', serif;
  background:
    linear-gradient(180deg, rgba(244, 239, 216, 0.97), rgba(232, 218, 188, 0.94));
  color: var(--ink-faded);
  padding: 14px 18px 16px;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(14, 30, 66, 0.18);
  border: 1px solid rgba(58, 42, 30, 0.12);
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms 200ms ease, transform 600ms 200ms ease;
}
.vv-card.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.vv-card-name {
  font-size: 22px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--ink-faded);
  margin: 0 0 2px 0;
}
.vv-card-name-script {
  font-size: 16px;
  font-style: italic;
  color: rgba(58, 42, 30, 0.7);
  margin: 0 0 6px 0;
}
.vv-card-label {
  font-size: 12px;
  font-style: italic;
  text-transform: lowercase;
  color: rgba(58, 42, 30, 0.55);
  letter-spacing: 0.04em;
  margin: 0 0 8px 0;
}
.vv-card-oneline {
  font-size: 14px;
  font-style: italic;
  color: rgba(58, 42, 30, 0.8);
  line-height: 1.45;
}
.vv-card-deeper {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--gold-leaf);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  width: max-content;
}
.vv-card-deeper:hover { color: var(--vermillion); }

/* ── Year picker (typeset, not a slider) ─────────────────────── */

.vv-year-strip {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(58, 42, 30, 0.6);
  letter-spacing: 0.04em;
}
.vv-year {
  cursor: pointer;
  padding: 2px 4px;
  transition: color 200ms ease;
  position: relative;
}
.vv-year:hover { color: var(--vermillion); }
.vv-year.is-current {
  color: var(--ink-faded);
  border-bottom: 1.5px solid var(--gold-leaf);
}

/* ── Resolving tray (bottom-left, gentle) ────────────────────── */

.vv-resolving-tray {
  position: absolute;
  left: 22px; bottom: 22px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(184, 58, 44, 0.7);
}
.vv-resolving-tray a {
  color: inherit;
  border-bottom: 1px dashed currentColor;
  text-decoration: none;
  padding-bottom: 1px;
}

/* ── Empty / loading states ──────────────────────────────────── */

.vv-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: rgba(58, 42, 30, 0.55);
  font-size: 16px;
  text-align: center;
}
.vv-empty-line {
  max-width: 320px;
  line-height: 1.5;
}

/* ── Animations ──────────────────────────────────────────────── */

@keyframes vv-breathe {
  0%, 100% { transform: scale(1.0); opacity: 0.92; }
  50%      { transform: scale(1.06); opacity: 1.0;  }
}
@keyframes vv-breathe-warm {
  0%, 100% { transform: scale(1.0); opacity: 0.92; filter: hue-rotate(0deg); }
  50%      { transform: scale(1.07); opacity: 1.0;  filter: hue-rotate(-8deg); }
}
@keyframes vv-breathe-slow {
  0%, 100% { transform: scale(1.0); opacity: 0.86; }
  50%      { transform: scale(1.04); opacity: 1.0;  }
}
@keyframes vv-pulse-gold {
  0%, 100% { transform: scale(1.0); opacity: 0.92; }
  50%      { transform: scale(1.55); opacity: 1.0; filter: brightness(1.4) hue-rotate(-15deg); }
}

/* ── Life Weave ───────────────────────────────────────────────── */

.vv-weave-root {
  background:
    radial-gradient(ellipse at center,
                    rgba(244, 239, 216, 0.96) 0%,
                    rgba(232, 218, 188, 0.72) 80%),
    var(--cream-paper);
  overflow: auto;
}

.vv-weave {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.vv-weave-stage {
  width: min(98%, 1600px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 22px rgba(14, 30, 66, 0.10));
}

.vv-weave-axis .vv-weave-yearline {
  stroke: rgba(58, 42, 30, 0.10);
  stroke-width: 0.6;
  stroke-dasharray: 1.2 4;
}
.vv-weave-axis .vv-weave-yearline-minor {
  stroke: rgba(58, 42, 30, 0.06);
  stroke-width: 0.4;
  stroke-dasharray: 0.8 6;
}
.vv-weave-axis .vv-weave-yearlabel {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  fill: rgba(58, 42, 30, 0.55);
  letter-spacing: 0.06em;
}
.vv-weave-axis .vv-weave-yearlabel-minor {
  font-size: 11px;
  fill: rgba(58, 42, 30, 0.40);
}

.vv-weave-strand-title {
  font-family: 'Cormorant Garamond', 'Hind Siliguri', 'Noto Serif Bengali', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.vv-weave-thread-seg {
  transition: stroke-opacity 240ms ease;
}
.vv-weave-thread-seg:hover {
  stroke-opacity: 1 !important;
}

.vv-weave-knot {
  cursor: pointer;
  transition: transform 320ms cubic-bezier(.34,.07,.15,.96);
}
.vv-weave-knot:hover {
  transform-origin: center;
}
.vv-weave-knot:hover .vv-weave-knot-disc {
  filter: brightness(1.15);
}

.vv-weave-event-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  fill: rgba(58, 42, 30, 0.55);
}
.vv-weave-event-title-hero {
  font-size: 14px;
  fill: var(--ink-faded);
  letter-spacing: 0.02em;
}

.vv-weave-intention {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  fill: var(--ink-faded);
  letter-spacing: 0.02em;
}
.vv-weave-intention-meta {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  fill: rgba(58, 42, 30, 0.45);
}

.vv-weave-sparse-note {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(58, 42, 30, 0.55);
}

/* ── Self Mirror — illuminated manuscript ─────────────────────── */

.vv-mirror-root {
  background:
    radial-gradient(ellipse at center,
                    rgba(244, 239, 216, 0.96) 0%,
                    rgba(232, 218, 188, 0.78) 80%),
    var(--cream-paper);
  overflow-y: auto;
}

.vv-mirror {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 28px 60px;
  font-family: 'Cormorant Garamond', 'Hind Siliguri', 'Noto Serif Bengali', serif;
  color: var(--ink-faded);
}

.vv-mirror-head {
  margin-bottom: 24px;
}
.vv-mirror-title {
  font-style: italic;
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: 0.01em;
  margin: 0 0 4px 0;
  color: var(--ink-faded);
  font-weight: 500;
}
.vv-mirror-flourish {
  width: 96px; height: 16px;
  display: block;
  color: rgba(58, 42, 30, 0.45);
  margin: 4px 0 8px;
}
.vv-mirror-sub {
  font-style: italic;
  font-size: 15px;
  color: rgba(58, 42, 30, 0.55);
  letter-spacing: 0.02em;
  margin: 0;
}
.vv-mirror-empty {
  font-style: italic;
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  color: rgba(58, 42, 30, 0.55);
}

.vv-mirror-section {
  margin-top: 28px;
}
.vv-mirror-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: rgba(58, 42, 30, 0.45);
  margin-bottom: 10px;
}

/* Voice cloud */
.vv-voice-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  line-height: 1.6;
  padding: 6px 0 4px;
}
.vv-voice-phrase {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: calc(13px + 22px * var(--w, 0.3));
  color: var(--ink-faded);
  opacity: var(--op, 0.7);
  transform: rotate(var(--rot, 0deg));
  display: inline-block;
  letter-spacing: 0.02em;
  transition: opacity 200ms ease, color 200ms ease;
  cursor: default;
  padding: 0 2px;
}
.vv-voice-phrase:hover {
  color: var(--vermillion);
  opacity: 1;
}
.vv-voice-phrase--bn {
  font-family: 'Hind Siliguri', 'Noto Serif Bengali', 'Cormorant Garamond', serif;
}
.vv-voice-phrase--hi {
  font-family: 'Noto Serif Devanagari', 'Cormorant Garamond', serif;
}

/* Values */
.vv-values {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vv-value-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.vv-value-glyph {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--ink-faded);
  opacity: 0.85;
  position: relative;
  top: 4px;
}
.vv-value-text {
  font-family: 'Cormorant Garamond', 'Hind Siliguri', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-faded);
  letter-spacing: 0.01em;
  flex: 1;
  min-width: 0;
}
.vv-value-edit {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(58, 42, 30, 0.4);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vv-value-edit:hover { color: var(--vermillion); }
.vv-value-edit-form {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vv-value-edit-input {
  width: 100%;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faded);
  background: rgba(244, 239, 216, 0.6);
  border: 0.5px solid rgba(58, 42, 30, 0.18);
  border-radius: 4px;
  padding: 8px 10px;
  resize: vertical;
}
.vv-value-edit-actions {
  display: flex;
  gap: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
}
.vv-value-edit-save,
.vv-value-edit-cancel {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 2px 8px 2px 0;
  color: rgba(58, 42, 30, 0.6);
  border-bottom: 1px dashed transparent;
}
.vv-value-edit-save {
  color: var(--gold-leaf);
  border-bottom-color: currentColor;
}
.vv-value-edit-save:hover { color: var(--vermillion); }
.vv-value-edit-cancel:hover { color: var(--vermillion); }

/* Narrative + drop-cap */
.vv-narrative {
  font-family: 'Cormorant Garamond', 'Hind Siliguri', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-faded);
  text-align: justify;
  hyphens: auto;
  margin: 0;
}
.vv-dropcap {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 56px;
  line-height: 0.85;
  color: var(--gold-leaf);
  float: left;
  padding: 8px 8px 0 0;
  font-weight: 500;
}

/* World cards */
.vv-world-card {
  border-bottom: 0.5px dashed rgba(58, 42, 30, 0.18);
  padding: 8px 0;
}
.vv-world-card[open] {
  background: rgba(244, 239, 216, 0.45);
  border-left: 1.5px solid var(--gold-leaf);
  padding-left: 10px;
  border-radius: 0 4px 4px 0;
  margin: 4px 0;
}
.vv-world-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-family: 'Cormorant Garamond', serif;
}
.vv-world-summary::-webkit-details-marker { display: none; }
.vv-world-label {
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faded);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  flex-shrink: 0;
  min-width: 130px;
}
.vv-world-line {
  font-style: italic;
  font-size: 14px;
  color: rgba(58, 42, 30, 0.7);
  flex: 1;
  line-height: 1.5;
}
.vv-world-detail {
  font-family: 'Cormorant Garamond', 'Hind Siliguri', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-faded);
  padding: 6px 6px 10px 140px;
}

@media (max-width: 600px) {
  .vv-world-summary { flex-direction: column; gap: 2px; }
  .vv-world-label { min-width: 0; }
  .vv-world-detail { padding-left: 8px; }
}

/* Footer */
.vv-mirror-foot {
  margin-top: 36px;
  padding-top: 12px;
  border-top: 0.5px solid rgba(58, 42, 30, 0.12);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(58, 42, 30, 0.45);
  text-align: right;
  letter-spacing: 0.02em;
}

/* ── Life Weave: vertical timeline (mobile / narrow viewport) ──── */

.vv-weave-vertical {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 14px 60px;
  box-sizing: border-box;
  overflow-y: auto;
  position: relative;
  height: 100%;
}
.vv-weave-vertical .vv-weave-sparse-note {
  position: static;
  transform: none;
  display: block;
  text-align: center;
  margin: 22px 0 6px;
}

.vv-vweave-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--ink-faded);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  text-align: left;
}

.vv-vweave-atmosphere {
  background: rgba(244, 239, 216, 0.55);
  border: 0.5px solid rgba(58, 42, 30, 0.10);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vv-vweave-atm-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12.5px;
  color: rgba(58, 42, 30, 0.78);
  line-height: 1.4;
}
.vv-vweave-atm-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}
.vv-vweave-atm-domain {
  text-transform: lowercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--ink-faded);
}
.vv-vweave-atm-label {
  flex: 1;
  font-style: italic;
  color: rgba(58, 42, 30, 0.70);
}

.vv-vweave-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* Vertical guideline running through the day-numbers */
.vv-vweave-list::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 32px;
  width: 1px;
  background: rgba(58, 42, 30, 0.10);
}

.vv-vweave-monthhead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faded);
  letter-spacing: 0.03em;
  margin: 18px 0 8px 0;
  padding-left: 0;
  position: relative;
  z-index: 1;
}

.vv-vweave-moment {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
  position: relative;
  z-index: 1;
}
.vv-vweave-day {
  width: 32px;
  flex-shrink: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(58, 42, 30, 0.55);
  letter-spacing: 0.02em;
  text-align: right;
  padding-right: 12px;
  padding-top: 1px;
  position: relative;
}
.vv-vweave-day::after {
  content: '';
  position: absolute;
  top: 7px;
  right: -7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--saffron);
  box-shadow: 0 0 0 2px var(--cream-paper);
}
.vv-vweave-moment--knot .vv-vweave-day::after {
  background: var(--gold-leaf);
}
.vv-vweave-moment--intention .vv-vweave-day::after {
  background: transparent;
  border: 1px dashed var(--terracotta);
  width: 7px; height: 7px;
}

.vv-vweave-body {
  flex: 1;
  min-width: 0;
}
.vv-vweave-moment-title {
  font-family: 'Cormorant Garamond', 'Hind Siliguri', 'Noto Serif Bengali', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faded);
  line-height: 1.45;
}
.vv-vweave-moment-strand {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(58, 42, 30, 0.55);
  margin-top: 2px;
}

/* ── People panel: Portrait / List toggle ─────────────────────── */

.vv-people-view-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(58, 42, 30, 0.55);
  padding: 6px 4px 8px;
  letter-spacing: 0.04em;
}
.vv-people-view-toggle-btn {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 2px 4px;
  transition: color 200ms ease, border-color 200ms ease;
}
.vv-people-view-toggle-btn.is-active {
  color: var(--text, var(--ink-faded));
  border-bottom-color: var(--gold-leaf, #C8A24A);
}
.vv-people-view-toggle-btn:hover { color: var(--vermillion, #B53A2C); }

/* ── Portrait sub-tab switcher (Constellation / Weave / Mirror) ── */

.vv-portrait-subtabs {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 22px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  z-index: 60;
  pointer-events: auto;
}
.vv-portrait-subtab {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: rgba(58, 42, 30, 0.55);
  padding: 4px 6px 6px;
  font: inherit;
  transition: color 200ms ease;
  border-bottom: 1.5px solid transparent;
}
.vv-portrait-subtab:hover { color: var(--vermillion); }
.vv-portrait-subtab.is-active {
  color: var(--ink-faded);
  border-bottom-color: var(--gold-leaf);
}

/* Reduced motion — honor user preference */
@media (prefers-reduced-motion: reduce) {
  .vv-light-halo, .vv-self-halo {
    animation: none !important;
  }
  .vv-card, .vv-light, .vv-attention-thread, .vv-kinship-thread {
    transition: none !important;
  }
}