/* /assets/hub.base.css
   CryptoVault Hub – BASE (2026-01-28A)
   - Invite-matching palette + softer gradients
   - Keep: sticky topbar, overlay system, forms, toast always above modal
*/

:root{
  /* ===== Invite palette ===== */
  --bg: #f8fafc;
  --bg2:#ffffff;
  --text:#0f172a;
  --muted:#475569;

  /* Brand accents (match invite vibes) */
  --brand:  #2563eb; /* trust blue */
  --brand2: #1d4ed8; /* deeper */
  --accent-sky:  #38bdf8; /* invite glow */
  --accent-teal: #10b981; /* invite glow */
  --accent-blue: #2563eb; /* support */

  /* Status */
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;
  --wait:#64748b;

  /* Backwards compat for pages using cv- vars */
  --cv-bg: var(--bg);
  --cv-card: #ffffff;
  --cv-text: var(--text);
  --cv-muted: var(--muted);
  --cv-border: #e2e8f0;

  --card:#ffffff;
  --border:#e2e8f0;

  /* Shadows / radii */
  --shadow: 0 12px 30px rgba(2,6,23,.08);
  --shadow-sm: 0 8px 18px rgba(2,6,23,.10);

  --radius: 18px;
  --radius-sm: 12px;

  /* Focus ring (invite-ish) */
  --focus: 0 0 0 3px rgba(56,189,248,.26);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Times New Roman", Times, serif;

  --topbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --overlay-pad: 12px;

  /* Optional background image (set in /assets/hub.nav.js) */
  --cv-bg-image: none;
  --cv-bg-opacity: .20;
  --cv-bg-blur: 0px;

  /* Layer priorities */
  --z-topbar: 1000;
  --z-toast: 10000050;   /* ✅ Always above overlay/modal */
  --z-overlay: 1000000;  /* ✅ High, but below toast */

  color-scheme: light;
}

*{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

html, body{ min-height: 100%; }

body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  overflow-x:hidden;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);

  /* Invite-like background (soft, premium, not loud) */
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(16,185,129,.14), transparent 55%),
    radial-gradient(1100px 680px at 50% 120%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, rgba(226,232,240,.35), rgba(226,232,240,.15)),
    var(--bg);
  position: relative;
}

/* Scroll lock */
html.cv-modal-open,
body.cv-modal-open{
  overflow: hidden !important;
  height: 100%;
  overscroll-behavior: none;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* Slight extra depth layer */
  background:
    radial-gradient(1200px 700px at 18% 6%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(900px 600px at 92% 10%, rgba(16,185,129,.08), transparent 60%),
    var(--bg);
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--cv-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--cv-bg-opacity);
  filter: blur(var(--cv-bg-blur));
  pointer-events:none;
}

.hidden{ display:none !important; }
.cv-divider{ height:1px; background: var(--border); }

/* ✅ Sticky top wrapper */
#cv-top{
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}

/* Topbar look (invite glass) */
.cv-topbar{
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,.22);
}

/* Nav container */
.cv-navrow{
  border-top: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.70);
}

/* ====== Typography helpers ====== */
.cv-h1{
  margin:0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 950;
}
.cv-sub{
  margin:0;
  color: var(--muted);
  line-height: 1.5;
}
.cv-lead{
  color: color-mix(in oklab, var(--cv-text) 68%, transparent);
  line-height: 1.6;
  max-width: 72ch;
}

/* ====== Components ====== */
.cv-btn{
  appearance:none;
  border: 1px solid rgba(37,99,235,.28);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 750;
  font-size: .95rem;
  cursor:pointer;

  /* Invite-ish button (gloss) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) ,
    linear-gradient(135deg, var(--brand), var(--brand2));
  color: white;

  box-shadow: var(--shadow-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  user-select:none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.cv-btn:hover{ filter: brightness(1.05); }
.cv-btn:active{ transform: translateY(1px); }
.cv-btn:focus{ outline:none; box-shadow: var(--shadow-sm), var(--focus); }
.cv-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.cv-btn.secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
  border-color: rgba(148,163,184,.28);
  color: var(--text);
}

.cv-btn.ghost{
  background: transparent;
  color: var(--text);
  box-shadow:none;
  border-color: rgba(148,163,184,.22);
}

.cv-card{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.cv-card-soft{
  background: rgba(248,250,252,.78);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: var(--radius-sm);
}

.cv-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 700;
  border: 1px solid rgba(148,163,184,.22);
  color: var(--text);
  background: rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}

.cv-pill-dot{
  width:10px;
  height:10px;
  border-radius: 999px;
  background: var(--wait);
  box-shadow: 0 0 0 3px rgba(100,116,139,.15);
}
.cv-pill.ok .cv-pill-dot{
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(22,163,74,.16);
}
.cv-pill.warn .cv-pill-dot{
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}
.cv-pill.bad .cv-pill-dot{
  background: var(--bad);
  box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.cv-pill.wait .cv-pill-dot{
  background: var(--wait);
  box-shadow: 0 0 0 3px rgba(100,116,139,.16);
}

.cv-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cv-mono{ font-family: var(--mono); }

/* ====== Inputs ====== */
.cv-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.78);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(2,6,23,.05);
  outline: none;
  font-size: 1rem;
  line-height: 1.25rem;
}
.cv-input::placeholder{ color: rgba(71,85,105,.70); }

.cv-input:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 8px 22px rgba(2,6,23,.07), var(--focus);
  background: rgba(255,255,255,.90);
}

textarea.cv-input{ min-height: 110px; resize: vertical; }
select.cv-input{ padding-right: 34px; }

.cv-help{
  margin-top: 6px;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.35;
}

/* ====== Toast ====== */
.cv-toast{
  position: fixed !important;
  left: 50%;
  bottom: calc(18px + var(--safe-b) + 72px);
  transform: translateX(-50%);
  z-index: var(--z-toast) !important;

  min-width: min(560px, calc(100% - 24px));
  max-width: min(760px, calc(100% - 24px));

  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(2,6,23,.22);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}
.cv-toast.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-2px);
}

/* =========================
   ✅ Overlay/modal (.open controls visibility)
========================= */
.cv-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);

  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: var(--overlay-pad) var(--overlay-pad) calc(var(--overlay-pad) + var(--safe-b));

  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .18s ease-out, visibility .18s ease-out;
  overscroll-behavior: contain;
}

.cv-overlay.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 781px){
  .cv-overlay{ align-items: center; }
}

.cv-modal{
  width: min(760px, 100%);
  max-height: calc(min(85dvh, 820px));
  background: rgba(255,255,255,.92);
  color: var(--text);

  border: 1px solid rgba(148,163,184,.22);
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(2,6,23,.30);

  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;

  transform: translateY(14px) scale(.99);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}

.cv-overlay.open .cv-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cv-modal .m-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  background: rgba(255,255,255,.72);
}
.cv-modal .m-title{ font-weight: 900; letter-spacing: -.02em; }

.cv-modal .m-body{
  padding: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.cv-modal .m-foot{
  padding: 12px 14px;
  border-top: 1px solid rgba(148,163,184,.18);
  display:flex;
  gap:10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  background: rgba(255,255,255,.70);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

.cv-grid-2{ display:grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 740px){ .cv-grid-2{ grid-template-columns: 1fr 1fr; } }

.gs-photo-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.gs-photo-actions .cv-btn{ flex:1 1 160px; }

/* Draft list safety/feedback */
.draftRow.is-active{
  outline: 2px solid rgba(56,189,248,.28);
  border-radius: 10px;
  padding-left: 8px;
  padding-right: 8px;
  background: rgba(56,189,248,.06);
}

.btn.is-primary{
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.btn-danger{
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}
.btn-danger:hover{ filter: brightness(.95); }

/* --- FIX: click-through for decorative layers --- */
.cv-glow,
.cv-hero-bg,
.cv-hero-haze,
.cv-hero-overlay,
.cv-bg,
#bgCanvas,
canvas,
[data-decor],
.hero-decor,
.bg-decor{
  pointer-events: none !important;
}

/* Ensure content above background */
main, .cv-main, .page, .container, .cv-card, .cv-panel{
  position: relative;
  z-index: 2;
}