/* ==============================
   Policy Modals (Security / Privacy & Terms)
   Add-on styles built on base.css tokens
   ============================== */

/* <dialog> wrapper */
.modal{ 
  padding: 0; 
  border: 0; 
  background: transparent; 
}
.modal::backdrop{ background: transparent; } /* we use our own backdrop for click-to-close */

/* Backdrop (click to close via [data-close]) */
.modal__backdrop{
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--black) 60%, transparent);
  animation: policyFadeIn .2s ease both;
}

/* Dialog panel */
.modal__dialog{
  position: fixed;
  inset: 8svh auto auto 50%;
  transform: translateX(-50%);
  width: min(920px, 92vw);
  max-height: 84svh;

  display: grid;
  grid-template-rows: auto 1fr auto;

  /* subtle brand tint using your tokens */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 100%, transparent) 0%,
      color-mix(in srgb, var(--brand-primary) 6%, var(--surface)) 100%);
  color: var(--ink);

  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;

  animation: policySlideUp .22s ease both;
}

/* Sticky header & footer */
.modal__header{
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-6);
  background: linear-gradient(180deg,
    var(--white) 0%,
    color-mix(in srgb, var(--brand-primary) 8%, var(--white)) 100%);
  border-bottom: 1px solid var(--border);
}
.modal__title{
  font-size: var(--fs-700);
  color: var(--brand-ink);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}

.modal__close{
  margin-left: auto;
  inline-size: 40px; block-size: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--brand-ink);
  font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.modal__close:hover{ border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--border)); }
.modal__close:focus-visible{
  outline: 3px solid var(--focus-brand);
  outline-offset: 3px;
}

/* Scrollable body */
.modal__body{
  padding: var(--space-6);
  overflow: auto;
}
.modal__body .lead{
  font-size: var(--fs-500);
  color: var(--muted);
  margin: 0 0 var(--space-5);
}
.modal__body h3{
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--fs-600);
  color: var(--brand-primary);
}
.modal__body .bullet{
  margin: 0 0 var(--space-4) 1.25rem;
  padding: 0;
}
.modal__body .bullet li{
  list-style: disc;
  margin: .35rem 0;
}

/* Notes / meta blocks */
.modal__body .note,
.modal__body .meta{
  margin-top: var(--space-5);
  padding: .75rem .9rem;
  border-radius: calc(var(--radius) - 6px);
  background: color-mix(in srgb, var(--white) 84%, var(--brand-accent) 16%);
  border: 1px dashed color-mix(in srgb, var(--brand-accent) 45%, var(--border));
  font-size: var(--fs-400);
}

/* Footer */
.modal__footer{
  position: sticky; bottom: 0; z-index: 1;
  display: flex; gap: var(--space-3); justify-content: flex-end; align-items: center;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--white) 96%, var(--brand-primary) 4%) 0%,
    var(--white) 100%);
  border-top: 1px solid var(--border);
}

/* Animations */
@keyframes policyFadeIn{ from { opacity: 0 } to { opacity: 1 } }
@keyframes policySlideUp{
  from { transform: translate(-50%, 12px); opacity: .96 }
  to   { transform: translate(-50%, 0);    opacity: 1 }
}

/* Mobile tweaks */
@media (max-width: 560px){
  .modal__dialog{ inset: 4svh auto auto 50%; max-height: 92svh; width: min(720px, 94vw); }
  .modal__header, .modal__footer{ padding: var(--space-4); }
  .modal__body{ padding: var(--space-4); }
}