/* The "Before you start" card and the entry notice (static/privacy.js). Loaded by the homepage, which has its
   own palette, and by every other page, which shares static/styles.css: each colour asks for the shared
   variable first and falls back to the homepage's, so one stylesheet themes correctly on both, in light and dark. */
:root {
  --cm-surface: var(--surface, #FFFFFF);
  --cm-bg: var(--bg, #F2F3EB);
  --cm-ink: var(--ink, var(--text, #1B1E19));
  --cm-soft: var(--ink-soft, var(--text-muted, #5B6055));
  --cm-line: var(--line, #D4D6C7);
  --cm-accent: var(--accent, #A6864B);
  --cm-btn: var(--accent-ink, var(--navy, #0E2036));
  --cm-on-btn: var(--on-navy, #EFF1E9);
  --cm-link: var(--link, var(--accent-text, #0E2036));
}

.cm-lock { overflow: hidden; }
.cm-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(10, 14, 10, .62); overflow-y: auto;
  animation: cm-fade .16s ease-out;
}
.cm-card {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--cm-surface); color: var(--cm-ink);
  border: 1px solid var(--cm-line); border-top: 4px solid var(--cm-accent); border-radius: 14px; padding: 26px 28px 22px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55); font-family: 'IBM Plex Sans', system-ui, sans-serif; line-height: 1.5;
  animation: cm-rise .2s ease-out;
}
.cm-card h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.45rem; line-height: 1.25; margin: 0 0 8px; font-weight: 600; color: var(--cm-ink); }
.cm-lead { margin: 0 0 16px; color: var(--cm-soft); font-size: 0.95rem; }
.cm-steps { list-style: none; counter-reset: cm; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cm-steps li { counter-increment: cm; position: relative; padding-left: 38px; font-size: 0.9rem; color: var(--cm-soft); }
.cm-steps li::before {
  content: counter(cm); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cm-btn); color: var(--cm-on-btn); font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.cm-steps b { color: var(--cm-ink); font-weight: 600; }
.cm-note { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; background: var(--cm-bg); font-size: 0.82rem; color: var(--cm-soft); }
.cm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--cm-ink); cursor: pointer; }
.cm-check input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--cm-link); }
.cm-check a { color: var(--cm-link); }
.cm-hint { margin: 8px 0 0 28px; font-size: 0.82rem; color: var(--brick, #9C4433); }
.cm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cm-actions button, .cm-entry button {
  font-family: inherit; font-size: 0.92rem; font-weight: 600; padding: 11px 20px; border-radius: 8px; cursor: pointer; line-height: 1.2;
  border: 1.5px solid var(--cm-line); background: transparent; color: var(--cm-ink);
}
.cm-actions .cm-go, .cm-entry button { background: var(--cm-btn); border-color: var(--cm-btn); color: var(--cm-on-btn); }
.cm-actions button:hover { border-color: var(--cm-accent); }
.cm-actions .cm-go:hover, .cm-entry button:hover { background: var(--cm-accent); border-color: var(--cm-accent); color: #101410; }
.cm-card :focus-visible, .cm-entry :focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }

.cm-entry {
  position: fixed; left: 16px; bottom: 16px; z-index: 900; width: min(400px, calc(100vw - 32px)); padding: 16px 18px;
  background: var(--cm-surface); color: var(--cm-ink); border: 1px solid var(--cm-line); border-left: 4px solid var(--cm-accent);
  border-radius: 10px; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 0.86rem;
  line-height: 1.5; animation: cm-rise .25s ease-out;
}
.cm-entry p { margin: 0 0 12px; color: var(--cm-soft); } .cm-entry p b { color: var(--cm-ink); }
.cm-entry-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-entry a { color: var(--cm-link); font-weight: 500; }
.cm-entry button { padding: 8px 16px; font-size: 0.84rem; }

@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cm-overlay, .cm-card, .cm-entry { animation: none; } }
@media (max-width: 520px) { .cm-card { padding: 22px 18px 18px; } .cm-actions button { flex: 1; } .cm-entry { left: 8px; right: 8px; bottom: 8px; width: auto; } }