/* =========================
File: assets/style.css (shared styles)
========================= */

/* Respect system theme for overall bg/text */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0b0e;   /* page background */
    --ink: #e8eaed;  /* main text light */
    --muted: #9aa0a6;
    --card-bg: #1b1f24; /* cards in dark mode */
    --console-bg: #0f1115;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;   /* page background */
    --ink: #111111;  /* dark text */
    --muted: #555555;
    --card-bg: #ffffff; /* cards in light mode */
    --console-bg: #0f1115; /* still keep console dark */
  }
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* Layout */
.frame{max-width:940px;margin:0 auto;padding:24px}
.hdr{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.crest{font-weight:900;letter-spacing:.08em;border:2px solid var(--ink);display:inline-block;padding:6px 10px}
.sub{color:var(--muted);font-size:.9rem}

/* Console block */
.notice {
  background: var(--console-bg); /* dark console look */
  color: #e8eaed;                /* force light text */
  border: 1px solid #2a2f39;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.9rem;
  white-space:pre-wrap
}

/* Agreement body */
.paper{
  background: var(--card-bg);
  border: 1px solid #ddd;
  border-radius:16px;
  padding:24px;
  line-height:1.55;
  color: var(--ink);
}
.paper h1{margin:0 0 6px}
.muted{color:var(--muted)}

summary{cursor:pointer;font-weight:700;margin:10px 0}
summary::marker{content:"▶  "}
details[open] summary::marker{content:"▼  "}

/* Form */
.attest{margin-top:24px;border-top:1px dashed #ccc;padding-top:16px}
.chk{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.two{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.field{flex:1;display:flex;flex-direction:column;gap:6px}
.field input{
  background:#fff;
  border:1px solid #ccc;
  border-radius:10px;
  padding:10px;
  color:#111;
}
button.btn, .btn, button{
  background:#f2f2f2;
  border:1px solid #ccc;
  border-radius:12px;
  padding:10px 14px;
  color:#111;
  font-weight:700;
  cursor:pointer;
}
button[disabled]{opacity:.5;cursor:not-allowed}

/* Footer */
.ftr{margin-top:18px;color:var(--muted);font-size:.85rem;text-align:center}

/* Centering */
.center{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}

/* Stamps */
.stamp{font-weight:900;letter-spacing:.2em;border:3px solid #2bff88;border-radius:10px;padding:10px 16px;display:inline-block;transform:rotate(-6deg);box-shadow:0 0 30px #113;}
.stamp.red{border-color:#ff4d4d;color:#ff4d4d;}
.granted .stamp{border-color:#2bff88;color:#2bff88}
.denied .stamp{border-color:#ff4d4d;color:#ff4d4d}

.hint{color:var(--muted);margin:4px 0 0}

/* Subtle animated caret for the console */
.caret::after{content:"▌";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}