/* ImmutableProof unified UI theme (paper + watermark + OS dark mode) */
@import url("./brand.css");

:root{
  --paper: #f4f2ee;                 /* less bright than pure white */
  --ink: #111214;
  --muted: rgba(17,18,20,0.72);
  --hair: rgba(17,18,20,0.10);
  --hair2: rgba(17,18,20,0.16);
  --card: rgba(255,255,255,0.72);

  /* WATERMARK (LOCKED) */
  --wm_opacity: 0.15;
  --wm_contrast: 1.25;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper: #0f1114;
    --ink: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.72);
    --hair: rgba(255,255,255,0.10);
    --hair2: rgba(255,255,255,0.16);
    --card: rgba(255,255,255,0.06);

    /* WATERMARK (LOCKED) */
    --wm_opacity: 0.16;
    --wm_contrast: 1.15;
  }
}

html{ color-scheme: light dark; }

body{
  margin:0;
  padding: 28px 18px;
  min-height:100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* watermark (single source of truth) */
body::before{
  content:"";
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: clamp(760px, 110vw, 1500px);
  height: clamp(760px, 110vw, 1500px);
  background-image: url("/assets/watermark-seal.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: var(--wm_opacity);
  filter: contrast(var(--wm_contrast)) blur(0.2px);
  pointer-events:none;
  z-index:0;
}
body > *{ position: relative; z-index:1; }

a{
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover{ text-decoration-thickness: 2px; }

p, li, .lead, .note, .help, small{
  color: var(--muted) !important;
}

hr{
  border:0;
  border-top: 1px solid var(--hair);
  margin: 24px 0;
}

/* HEADER / NAV */
header.nav{
  position: sticky;
  top: 14px;
  z-index: 50;

  max-width: 1080px;
  margin: 14px auto 18px;
  padding: 10px 12px;

  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--hair);
  border-radius: 18px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand{
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* NAV LINKS (SINGLE SOURCE OF TRUTH, NO-JUMP LOCKED) */
.nav-links a{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;

  border:1px solid var(--hair2);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  color: color-mix(in srgb, var(--ink) 88%, transparent);

  text-decoration:none;
  opacity: 0.95;

  /* no-jump constraints */
  box-sizing: border-box;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.nav-links a:hover{
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  text-decoration:none;
}
.nav-links a[aria-current="page"]{
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  color: var(--paper);
  border-color: color-mix(in srgb, var(--ink) 92%, transparent);
  font-weight: 800;
}

/* SURFACES */
.panel, .card{
  background: var(--card) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

/* FORMS */
input, textarea, select{
  background: color-mix(in srgb, var(--card) 86%, transparent) !important;
  border: 1px solid var(--hair2) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
}
input::placeholder, textarea::placeholder{
  color: color-mix(in srgb, var(--ink) 45%, transparent) !important;
}

/* CODE / LOG OUTPUT (dashboard) */
pre, code, .mono{
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
  border: 1px solid var(--hair2) !important;
  color: color-mix(in srgb, var(--ink) 92%, transparent) !important;
  border-radius: 14px !important;
  padding: 10px 12px;
  overflow: auto;
  max-height: 360px;
}

/* FOOTER */
.footer{
  background: transparent !important;
  border-top: 1px solid var(--hair) !important;
}
.footer-note{ color: var(--muted) !important; }

/* PRINT/EXPORT (LOCKED) */
@media print{
  html, body{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* FINAL LOCK: kill drift */
.nav{ background: transparent !important; color: var(--ink) !important; }
.nav a{ color: var(--ink) !important; }