/* =====================================================
   CLEAR NOTE — Global Modal & Consent UX
   Shared presentation layer for site-wide dialogs.
   Passive consent surfaces never lock page scrolling.
   ===================================================== */

:root {
  --cn-modal-surface: #101513;
  --cn-modal-surface-raised: #151b18;
  --cn-modal-border: rgba(255,255,255,.10);
  --cn-modal-muted: #a7b0ab;
  --cn-modal-backdrop: rgba(3,8,5,.56);
}

.cn-modal-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.cn-modal-root.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.cn-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--cn-modal-backdrop);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.cn-modal-dialog {
  isolation:isolate;
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(720px, calc(100dvh - 2rem));
  overflow: auto;
  border: 1px solid var(--cn-modal-border);
  border-radius: 20px;
  background: var(--cn-modal-surface);
  color: var(--cn-white, #fff);
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
  transform: translateY(8px) scale(.985);
  transition: transform .18s ease;
}
.cn-modal-root.is-open .cn-modal-dialog { transform: translateY(0) scale(1); }
.cn-modal-head { display:flex; align-items:flex-start; gap:.85rem; padding:1.15rem 1.2rem .5rem; }
.cn-modal-icon {
  width: 38px; height: 38px; flex: 0 0 38px;
  display:grid; place-items:center; border-radius:12px;
  background: rgba(34,197,94,.10); color: var(--cn-green, #22c55e);
}
.cn-modal-title { margin:0; padding-right:2rem; font-size:1.08rem; line-height:1.25; letter-spacing:-.02em; }
.cn-modal-close {
  border:1px solid var(--cn-modal-border);
  position:absolute; top:.8rem; right:.8rem; width:34px; height:34px;
  display:grid; place-items:center; border-radius:10px; color:var(--cn-modal-muted);
  background:rgba(255,255,255,.045); transition:background .15s ease,color .15s ease;
}
.cn-modal-close:hover { color:var(--cn-white,#fff); background:rgba(255,255,255,.09); }
.cn-modal-body { padding:.35rem 1.2rem 1rem; color:var(--cn-modal-muted); font-size:.9rem; line-height:1.6; }
.cn-modal-body p { margin:0 0 .75rem; }
.cn-modal-body p:last-child { margin-bottom:0; }
.cn-modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:.55rem; flex-wrap:wrap; padding:0 1.2rem 1.2rem; }
.cn-modal-actions > * { min-height:40px; }
.cn-modal-actions .cn-btn, .cn-modal-actions button, .cn-modal-actions a { border-radius:11px; }
.cn-modal-dialog:focus { outline:none; }
.cn-modal-dialog :focus-visible { outline:2px solid rgba(34,197,94,.72); outline-offset:2px; }
.cn-modal-actions .cn-modal-primary { order:2; }
.cn-modal-actions .cn-modal-secondary { order:1; }
.cn-modal-actions .cn-modal-tertiary { order:0; margin-right:auto; }
.cn-modal-dialog--compact { width:min(440px,100%); }
.cn-modal-dialog--wide { width:min(680px,100%); }
.cn-modal-dialog--danger .cn-modal-icon { color:#f87171; background:rgba(248,113,113,.10); }
.cn-modal-dialog--danger .cn-modal-primary { background:#b91c1c; border-color:#b91c1c; }
.cn-modal-custom { padding:0 1.2rem 1.2rem; }

/* Passive cookie consent: floating, compact, no overlay, no scroll lock. */
.cn-cookie-consent {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 9000;
  width: min(680px, calc(100vw - 28px));
  margin: 0 auto;
  padding: .7rem .95rem;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:.75rem 1rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(16,21,19,.96);
  color:var(--cn-white,#fff);
  box-shadow:0 10px 34px rgba(0,0,0,.20);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.cn-cookie-copy { min-width:0; }
.cn-cookie-title { display:block; margin-bottom:.15rem; font-size:.86rem; font-weight:750; letter-spacing:-.01em; }
.cn-cookie-text { margin:0; color:var(--cn-modal-muted); font-size:.73rem; line-height:1.45; }
.cn-cookie-text a { color:var(--cn-green,#22c55e); text-decoration:underline; text-underline-offset:2px; }
.cn-cookie-actions { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; flex-wrap:wrap; }
.cn-cookie-actions button { min-height:36px; padding:.45rem .7rem; border-radius:9px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.cn-cookie-essential { color:var(--cn-modal-muted); border:1px solid rgba(255,255,255,.10); }
.cn-cookie-essential:hover { color:var(--cn-white,#fff); background:rgba(255,255,255,.05); }
.cn-cookie-manage { color:var(--cn-white,#fff); }
.cn-cookie-accept { color:#06110a; background:var(--cn-green,#22c55e); }
.cn-cookie-accept:hover { background:var(--cn-green-dark,#16a34a); }
.cn-cookie-consent.is-hiding { opacity:0; transform:translateY(8px); transition:opacity .16s ease,transform .16s ease; }

/* Shared share presentation can live inside the global dialog without a second modal shell. */
.cn-share-dialog .cn-modal-body { padding-top:.55rem; }
.cn-share-dialog .cn-share-sheet-items { margin:0; }
.cn-share-dialog .cn-share-item { border-radius:12px; }

@media (max-width: 640px) {
  /* Keep centered dialogs centered. Only explicit bottom-sheet popups move down. */
  .cn-modal-root { padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .cn-modal-root--center { align-items:center; }
  .cn-modal-root--bottom { align-items:end; padding:0; }
  .cn-modal-dialog { width:min(560px, 100%); max-height:min(82dvh, calc(100dvh - 24px)); border-radius:18px; }
  .cn-modal-root--center .cn-modal-dialog { transform:translateY(8px) scale(.985); }
  .cn-modal-root--center.is-open .cn-modal-dialog { transform:translateY(0) scale(1); }
  .cn-modal-root--bottom .cn-modal-dialog { width:100%; max-height:min(86dvh, 760px); border-radius:20px 20px 0 0; transform:translateY(18px); }
  .cn-modal-root--bottom.is-open .cn-modal-dialog { transform:translateY(0); }
  .cn-modal-actions { display:grid; grid-template-columns:1fr; padding-bottom:max(1rem, env(safe-area-inset-bottom)); }
  .cn-modal-actions > * { width:100%; }
  .cn-modal-actions .cn-modal-primary { order:0; }
  .cn-modal-actions .cn-modal-secondary { order:1; }
  .cn-modal-actions .cn-modal-tertiary { order:2; margin-right:0; }
  .cn-cookie-consent { grid-template-columns:1fr; width:auto; bottom:calc(14px + 64px + env(safe-area-inset-bottom)); }
  .cn-cookie-actions { justify-content:stretch; }
  .cn-cookie-actions button { flex:1 1 auto; }
}

@media (max-width: 380px) {
  .cn-modal-root--center { padding:8px; }
  .cn-modal-head { padding:1rem 1rem .45rem; gap:.65rem; }
  .cn-modal-body { padding:.25rem 1rem .9rem; }
  .cn-modal-actions { padding-left:1rem; padding-right:1rem; }
  .cn-modal-dialog { max-height:calc(100dvh - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .cn-modal-root, .cn-modal-dialog, .cn-cookie-consent { transition:none !important; }
}

body.cn-light-theme {
  --cn-modal-surface:#fff;
  --cn-modal-surface-raised:#f6f8f7;
  --cn-modal-border:rgba(15,23,20,.11);
  --cn-modal-muted:#5d6862;
  --cn-modal-backdrop:rgba(15,23,20,.38);
}
body.cn-light-theme .cn-cookie-consent { background:rgba(255,255,255,.97); border-color:rgba(15,23,20,.11); box-shadow:0 10px 34px rgba(15,23,20,.14); }
body.cn-light-theme .cn-cookie-essential { border-color:rgba(15,23,20,.12); }
body.cn-light-theme .cn-modal-dialog { color:#172019; box-shadow:0 24px 70px rgba(15,23,20,.18); }
body.cn-light-theme .cn-modal-close { background:#f3f6f4; color:#5d6862; }
body.cn-light-theme .cn-modal-close:hover { background:#e9efeb; color:#172019; }
body.cn-light-theme .cn-modal-body { color:#526059; }
body.cn-light-theme .cn-modal-actions .cn-modal-secondary { color:#3f4b44; background:#f4f7f5; border:1px solid #d9e2dc; }
body.cn-light-theme .cn-modal-actions .cn-modal-secondary:hover { background:#eaf0ec; }
body.cn-light-theme .cn-modal-choice { color:#1d2821; }
body.cn-light-theme .cn-modal-choice span { color:#65726a; }

/* Contextual module helpers */
.cn-modal-inline-form{display:grid;gap:.45rem;margin-top:.85rem}.cn-modal-field-label{font-size:.72rem;font-weight:750;color:var(--cn-modal-muted)}.cn-modal-inline-form input{width:100%;min-height:42px;padding:.65rem .75rem;border:1px solid var(--cn-modal-border);border-radius:10px;background:var(--cn-modal-surface-raised);color:inherit;outline:none}.cn-modal-inline-form input:focus{border-color:rgba(34,197,94,.55);box-shadow:0 0 0 3px rgba(34,197,94,.10)}.cn-modal-form-status{min-height:1.1rem;font-size:.72rem;color:var(--cn-modal-muted)}.cn-modal-meta{font-size:.72rem!important;color:var(--cn-modal-muted)!important}.cn-inline-info{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:.25rem;border:1px solid var(--cn-modal-border);border-radius:999px;background:transparent;color:var(--cn-modal-muted);font-size:.72rem;vertical-align:middle;cursor:pointer}.cn-inline-info:hover{color:var(--cn-green,#22c55e);border-color:rgba(34,197,94,.35)}

.cn-modal-choice-list{display:grid;gap:.5rem}.cn-modal-choice{display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;width:100%;padding:.75rem .8rem;border:1px solid var(--cn-modal-border);border-radius:12px;background:var(--cn-modal-surface-raised);color:inherit;text-align:left;text-decoration:none;cursor:pointer}.cn-modal-choice:hover{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.05)}.cn-modal-choice strong{font-size:.82rem}.cn-modal-choice span{font-size:.7rem;color:var(--cn-modal-muted)}