/* Modal - portal-mounted dialog with backdrop + centered panel.
   Per design-system §5.10. Corner brackets in all four corners on the
   panel border mark this as a distinct editorial surface, not just a box. */

.modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-backdrop-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-12));
  display: flex;
  flex-direction: column;
  background: var(--color-bg-page);
  border: var(--border-width) solid var(--color-border);
  z-index: var(--z-modal);
}

.modal__panel--wide {
  max-width: 720px;
}

/* Wide enough for the full /pricing 3-card plan grid (t289). Fixed height
   (t290) so toggling the inner PLANS <-> CALCULATOR view scrolls the body
   instead of resizing the whole modal. */
.modal__panel--pricing {
  max-width: 1120px;
  height: calc(100vh - var(--space-12));
}

/* Four corner brackets marking the modal surface */

.modal__panel::before,
.modal__panel::after {
  content: '';
}

.modal__panel::before,
.modal__panel::after,
.modal__panel > .modal__corner-tr,
.modal__panel > .modal__corner-bl {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.modal__panel::before {
  top: -1px;
  left: -1px;
  border-top: 1.5px solid var(--color-accent);
  border-left: 1.5px solid var(--color-accent);
}

.modal__panel::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1.5px solid var(--color-accent);
  border-right: 1.5px solid var(--color-accent);
}

.modal__panel > .modal__corner-tr {
  top: -1px;
  right: -1px;
  border-top: 1.5px solid var(--color-accent);
  border-right: 1.5px solid var(--color-accent);
}

.modal__panel > .modal__corner-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 1.5px solid var(--color-accent);
  border-left: 1.5px solid var(--color-accent);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
}

.modal__title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.modal__body {
  padding: var(--space-6) var(--space-8);
  overflow-y: auto;
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
}