/* ═══ SOVEREIGNTY PAGES — phi-field-governed-sovereignty.html + government-registry.html ═══ */

/* Fire video background — BEHIND everything (z -5). Heavy dim + vignette: the
   fire would overpower content without this. */
.sovereignty-video-bg { position: fixed; inset: 0; z-index: -5; overflow: hidden; pointer-events: none; }
.sovereignty-video-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(0.35) saturate(1.1); transform: scale(1.06);
  transition: filter 0.5s var(--phi-ease), transform 0.6s var(--phi-ease);
}
.sovereignty-video-bg[data-mouse="hot"] video { filter: brightness(0.42) saturate(1.12); }
.sovereignty-video-bg[data-mouse="cool"] video { filter: brightness(0.3) saturate(1.05); }
.sovereignty-video-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(4, 4, 10, 0.72) 100%),
    linear-gradient(180deg, rgba(4, 4, 10, 0.55) 0%, rgba(4, 4, 10, 0.12) 40%, rgba(4, 4, 10, 0.82) 100%);
}

.sovereignty-content { position: relative; z-index: 2; }

/* Hero */
.sov-hero { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--phi-space-4xl) var(--phi-space-lg); }
.sov-kicker { font-family: var(--font-sacred); font-size: var(--phi-caption); color: var(--phi-gold); letter-spacing: 0.35em; }
.sov-title { font-family: var(--font-heading); font-size: clamp(2.4rem, 5.5vw, 4.4rem); color: var(--phi-text-bright); line-height: 1.15; max-width: 18ch; margin: var(--phi-space-md) 0; }
.sov-lede { font-family: var(--font-body); font-size: var(--phi-h3); color: var(--phi-text); line-height: 1.8; max-width: 62ch; }
.sov-chips { display: flex; flex-wrap: wrap; gap: var(--phi-space-sm); justify-content: center; margin-top: var(--phi-space-lg); }
.sov-chip { font-family: var(--font-mono); font-size: var(--phi-caption); color: var(--phi-text-dim); border: 1px solid var(--phi-stroke); border-radius: 999px; padding: 0.45em 1.2em; background: rgba(8, 8, 18, 0.72); }
.sov-chip b { color: var(--phi-gold); }

/* Sections + diploma strip — the better world, played out */
.sov-section { max-width: 1100px; margin: var(--phi-space-4xl) auto; padding: 0 var(--phi-space-lg); }
.sov-diplomas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--phi-space-lg); }
.sov-diploma { display: block; text-decoration: none; text-align: center; position: relative;
  background: linear-gradient(160deg, rgba(24, 20, 10, 0.93), rgba(10, 10, 20, 0.95));
  border: 1px solid var(--phi-gold-dim); border-radius: 14px;
  padding: var(--phi-space-2xl) var(--phi-space-xl);
  transition: transform 0.4s var(--phi-ease), box-shadow 0.4s var(--phi-ease); }
.sov-diploma:hover { transform: translateY(-6px); box-shadow: 0 0 60px rgba(212, 168, 67, 0.16); }
.sov-diploma-seal { width: 84px; height: 84px; margin: 0 auto var(--phi-space-md); border: 2px solid var(--phi-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-sacred); font-size: 2.2rem; color: var(--phi-gold);
  background: radial-gradient(circle, rgba(212, 168, 67, 0.12), transparent); animation: pulse-glow 4s var(--phi-ease) infinite; }
.sov-diploma-title { font-family: var(--font-heading); font-size: var(--phi-h2); color: var(--phi-text-bright); }
.sov-diploma-sub { font-family: var(--font-body); font-size: var(--phi-body); color: var(--phi-text-dim); line-height: 1.7; margin-top: var(--phi-space-sm); }
.sov-diploma-status { display: inline-block; margin-top: var(--phi-space-md); font-family: var(--font-mono); font-size: var(--phi-caption); color: var(--phi-gold); letter-spacing: 0.2em; border-top: 1px solid var(--phi-stroke); padding-top: var(--phi-space-sm); }

/* Signup form — solid panel over the fire */
.sov-form-panel { max-width: 640px; margin: var(--phi-space-3xl) auto; background: rgba(8, 8, 18, 0.94); border: 1px solid var(--phi-gold-dim); border-radius: 16px; padding: var(--phi-space-2xl); backdrop-filter: blur(6px); }
.sov-field { display: grid; gap: 0.4em; margin-bottom: var(--phi-space-md); }
.sov-label { font-family: var(--font-mono); font-size: var(--phi-caption); color: var(--phi-text-dim); letter-spacing: 0.15em; text-transform: uppercase; }
.sov-input { font-family: var(--font-body); font-size: var(--phi-body); color: var(--phi-text-bright); background: var(--phi-bg-deep); border: 1px solid var(--phi-stroke); border-radius: 10px; padding: 0.85em 1em; width: 100%; }
.sov-input:focus { outline: none; border-color: var(--phi-gold-dim); }
.sov-consent { display: flex; gap: 0.8em; align-items: flex-start; font-family: var(--font-body); font-size: var(--phi-caption); color: var(--phi-text-dim); line-height: 1.7; margin: var(--phi-space-md) 0; }
.sov-consent input { margin-top: 0.25em; accent-color: var(--phi-gold); }
.sov-consent a { color: var(--phi-gold); }
.sov-submit { width: 100%; font-family: var(--font-mono); font-size: var(--phi-h3); color: #0a0a14; background: linear-gradient(120deg, var(--phi-gold), #b8912f); border: none; border-radius: 999px; padding: 0.9em; cursor: pointer; letter-spacing: 0.12em; transition: filter 0.3s var(--phi-ease); }
.sov-submit:hover { filter: brightness(1.1); }
.sov-submit:disabled { opacity: 0.5; cursor: wait; }
.sov-form-msg { font-family: var(--font-body); font-size: var(--phi-body); line-height: 1.75; margin-top: var(--phi-space-md); }
.sov-form-msg.ok { color: var(--phi-gold); }
.sov-form-msg.err { color: #d47a43; }
.sov-form-msg a { color: var(--phi-gold); }
.sov-success { text-align: center; }
.sov-phi-id { font-family: var(--font-mono); font-size: var(--phi-h1); color: var(--phi-gold); letter-spacing: 0.12em; margin: var(--phi-space-md) 0; }

/* What you get + diagrams */
.sov-get-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--phi-space-md); }
.sov-get-card { background: rgba(8, 8, 18, 0.88); border: 1px solid var(--phi-stroke); border-radius: 12px; padding: var(--phi-space-xl); }
.sov-get-title { font-family: var(--font-heading); font-size: var(--phi-h3); color: var(--phi-text-bright); }
.sov-get-note { font-family: var(--font-body); font-size: var(--phi-body); color: var(--phi-text-dim); line-height: 1.75; margin-top: var(--phi-space-sm); }
.sov-diagram { background: rgba(8, 8, 18, 0.9); border: 1px solid var(--phi-stroke); border-radius: 14px; padding: var(--phi-space-xl); margin-top: var(--phi-space-lg); }
.sov-diagram svg { width: 100%; height: auto; display: block; }
.sov-diagram-caption { font-family: var(--font-body); font-size: var(--phi-caption); color: var(--phi-text-dim); margin-top: var(--phi-space-md); line-height: 1.7; }
.sov-diagram-caption a { color: var(--phi-gold); }
.sov-bar-rect { fill: rgba(212, 168, 67, 0.75); }
.sov-bar-zero { fill: rgba(212, 168, 67, 0.95); }
.sov-bar-label { font-family: monospace; font-size: 13px; fill: #b8b2a0; }
.sov-bar-value { font-family: monospace; font-size: 13px; fill: #d4a843; }

/* Registry */
.registry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--phi-space-md); }
.registry-card { background: rgba(8, 8, 18, 0.9); border: 1px solid var(--phi-stroke); border-radius: 12px; padding: var(--phi-space-lg); }
.registry-phi { font-family: var(--font-mono); color: var(--phi-gold); font-size: var(--phi-h3); letter-spacing: 0.08em; }
.registry-name { font-family: var(--font-heading); font-size: var(--phi-h2); color: var(--phi-text-bright); margin-top: 0.2em; }
.registry-date { font-family: var(--font-mono); font-size: var(--phi-caption); color: var(--phi-text-dim); margin-top: var(--phi-space-sm); }
.registry-privacy { font-family: var(--font-body); font-size: var(--phi-caption); color: var(--phi-text-dim); text-align: center; margin-top: var(--phi-space-lg); font-style: italic; }

/* Optional skills panel (Task 17b) */
.sov-skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--phi-space-sm); }
.sov-skills-grid > div { display: grid; gap: 0.4em; }
.sov-skills-caption { font-family: var(--font-body); font-size: var(--phi-caption); color: var(--phi-text-dim); line-height: 1.7; margin-top: var(--phi-space-sm); font-style: italic; }

/* The Groups (Task 17b) */
.groups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--phi-space-md); margin-top: var(--phi-space-xl); }
.group-card { background: rgba(8, 8, 18, 0.9); border: 1px solid var(--phi-stroke); border-radius: 12px; padding: var(--phi-space-lg); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--phi-space-sm); border-bottom: 1px solid var(--phi-stroke); padding-bottom: var(--phi-space-sm); }
.group-name { font-family: var(--font-heading); font-size: var(--phi-h3); color: var(--phi-gold); }
.group-count { font-family: var(--font-mono); font-size: var(--phi-caption); color: var(--phi-text-dim); white-space: nowrap; }
.group-count b { color: var(--phi-gold); }
.group-members { display: grid; gap: var(--phi-space-sm); margin-top: var(--phi-space-md); }
.group-member { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.9em; }
.group-member .registry-phi { font-size: var(--phi-caption); }
.group-member-name { font-family: var(--font-body); color: var(--phi-text-bright); }
.group-skill { font-family: var(--font-body); font-size: var(--phi-caption); color: var(--phi-text-dim); }
.group-skill b { color: var(--phi-gold); font-family: var(--font-mono); }
.group-empty { font-family: var(--font-body); font-size: var(--phi-caption); color: var(--phi-text-dim); font-style: italic; }

/* ── Email optional (Task 26b): the quiet toggle + the SHORT field note ── */
.sov-email-optional {
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--phi-space-xs);
  font-family: var(--font-mono);
  font-size: var(--phi-caption);
  color: var(--phi-gold);
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: left;
  transition: color 0.3s var(--phi-ease);
}
.sov-email-optional:hover { color: var(--phi-gold-glow); text-decoration: underline; }
.sov-field.sov-email-collapsed { display: none; }
.sov-email-note {
  font-family: var(--font-body);
  font-size: var(--phi-caption);
  color: var(--phi-text-dim);
  line-height: 1.75;
  border-left: 2px solid var(--phi-gold-dim);
  background: rgba(212, 168, 67, 0.05);
  border-radius: 0 8px 8px 0;
  padding: var(--phi-space-sm) var(--phi-space-md);
  margin: 0 0 var(--phi-space-md);
}