/* Central theme and component rules for the shared editorial dialog. */
.editorial-dialog {
  --editorial-dialog-paper: #fffdf8;
  --editorial-dialog-paper-soft: #faf6ee;
  --editorial-dialog-ink: #17365f;
  --editorial-dialog-muted: #7487a3;
  --editorial-dialog-line: #d9d1c5;
  --editorial-dialog-line-strong: var(--site-accent-border);
  --editorial-dialog-accent: var(--site-accent);
  --editorial-dialog-accent-soft: var(--site-accent-soft);
  --editorial-dialog-danger: #bd5454;
  --editorial-dialog-danger-soft: #fbeeee;
  --editorial-dialog-danger-border: #edcaca;
  --editorial-dialog-overlay: rgba(20, 34, 54, .42);
  --editorial-dialog-panel-border: rgba(199, 188, 170, .82);
  --editorial-dialog-panel-blue-glow: color-mix(in srgb, var(--site-accent) 44%, transparent);
  --editorial-dialog-panel-warm-glow: rgba(239, 222, 191, .32);
  --editorial-dialog-panel-sheen: rgba(255, 255, 255, .76);
  --editorial-dialog-paper-grain: rgba(23, 54, 95, .018);
  --editorial-dialog-control: rgba(255, 253, 248, .9);
  --editorial-dialog-control-soft: rgba(255, 253, 248, .78);
  --editorial-dialog-input: rgba(255, 255, 255, .78);
  --editorial-dialog-input-focus: #fff;
  --editorial-dialog-icon-border: var(--site-accent-border);
  --editorial-dialog-input-border: var(--site-accent-border);
  --editorial-dialog-action-line: rgba(217, 209, 197, .76);
  --editorial-dialog-on-accent: var(--site-on-accent);
  --editorial-dialog-shadow: 0 30px 90px rgba(20, 38, 65, .24), 0 2px 8px rgba(20, 38, 65, .08);
  --editorial-dialog-control-shadow: 0 8px 20px color-mix(in srgb, var(--site-accent) 12%, transparent);
  --editorial-dialog-button-shadow: 0 9px 22px rgba(25, 55, 91, .1);
  width: auto;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--editorial-dialog-ink);
  overflow: visible;
}

:root[data-theme="dark"] .editorial-dialog {
  --editorial-dialog-paper: #20262f;
  --editorial-dialog-paper-soft: #252d38;
  --editorial-dialog-ink: #edf3fa;
  --editorial-dialog-muted: #aab8ca;
  --editorial-dialog-line: #3f4b5a;
  --editorial-dialog-line-strong: var(--site-accent-border);
  --editorial-dialog-accent: var(--site-accent);
  --editorial-dialog-accent-soft: var(--site-accent-soft);
  --editorial-dialog-danger: #f08b92;
  --editorial-dialog-danger-soft: #3c272d;
  --editorial-dialog-danger-border: #70434a;
  --editorial-dialog-overlay: rgba(5, 9, 15, .7);
  --editorial-dialog-panel-border: rgba(130, 148, 170, .4);
  --editorial-dialog-panel-blue-glow: color-mix(in srgb, var(--site-accent) 20%, transparent);
  --editorial-dialog-panel-warm-glow: rgba(146, 111, 68, .11);
  --editorial-dialog-panel-sheen: rgba(255, 255, 255, .035);
  --editorial-dialog-paper-grain: rgba(222, 232, 244, .018);
  --editorial-dialog-control: rgba(40, 48, 59, .94);
  --editorial-dialog-control-soft: rgba(40, 48, 59, .82);
  --editorial-dialog-input: rgba(28, 34, 43, .9);
  --editorial-dialog-input-focus: #252e3a;
  --editorial-dialog-icon-border: var(--site-accent-border);
  --editorial-dialog-input-border: var(--site-accent-border);
  --editorial-dialog-action-line: rgba(121, 139, 161, .3);
  --editorial-dialog-on-accent: var(--site-on-accent);
  --editorial-dialog-shadow: 0 30px 90px rgba(0, 0, 0, .48), 0 2px 8px rgba(0, 0, 0, .25);
  --editorial-dialog-control-shadow: 0 8px 20px rgba(0, 0, 0, .24);
  --editorial-dialog-button-shadow: 0 9px 22px rgba(0, 0, 0, .2);
}

.editorial-dialog[open] {
  display: grid;
  place-items: center;
}

.editorial-dialog::backdrop {
  background: var(--editorial-dialog-overlay);
  backdrop-filter: blur(7px);
}

.editorial-dialog__panel {
  position: relative;
  display: grid;
  gap: 0;
  width: min(520px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  overflow: auto;
  padding: 34px 36px 28px;
  border: 1px solid var(--editorial-dialog-panel-border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 8%, var(--editorial-dialog-panel-blue-glow), transparent 28%),
    radial-gradient(circle at 9% 94%, var(--editorial-dialog-panel-warm-glow), transparent 31%),
    linear-gradient(145deg, var(--editorial-dialog-panel-sheen), transparent 46%),
    var(--editorial-dialog-paper);
  box-shadow: var(--editorial-dialog-shadow);
  font-family: var(--site-font-body, "Outfit", var(--cl-font-body, "Segoe UI", sans-serif));
  isolation: isolate;
}

.editorial-dialog__panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image:
    repeating-linear-gradient(0deg, var(--editorial-dialog-paper-grain) 0, var(--editorial-dialog-paper-grain) 1px, transparent 1px, transparent 4px);
  content: "";
  pointer-events: none;
}

.editorial-dialog__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--editorial-dialog-line);
  border-radius: 50%;
  background: var(--editorial-dialog-control);
  color: var(--editorial-dialog-muted);
  font-size: var(--font-size-300);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.editorial-dialog__close:hover,
.editorial-dialog__close:focus-visible {
  border-color: var(--editorial-dialog-line-strong);
  color: var(--editorial-dialog-accent);
  box-shadow: var(--editorial-dialog-control-shadow);
  transform: translateY(-1px);
}

.editorial-dialog__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border: 1px solid var(--editorial-dialog-icon-border);
  border-radius: 16px;
  background: var(--editorial-dialog-accent-soft);
  color: var(--editorial-dialog-accent);
  font-size: var(--font-size-500);
  box-shadow: inset 0 1px 0 var(--editorial-dialog-panel-sheen);
}

.editorial-dialog__kicker {
  margin: 0 58px 7px 0;
  color: var(--editorial-dialog-accent);
  font-size: var(--font-size-100);
  font-weight: var(--site-weight-bold, 800);
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.editorial-dialog__title {
  margin: 0 58px 0 0;
  color: var(--editorial-dialog-ink);
  font-family: var(--site-font-display, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif);
  font-size: clamp(var(--font-size-800), 5vw, var(--font-size-900));
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.editorial-dialog__title::after {
  display: block;
  width: 92px;
  height: 1px;
  margin: 16px 0 17px;
  background: linear-gradient(90deg, var(--editorial-dialog-accent), transparent);
  content: "";
}

.editorial-dialog__description {
  margin: 0;
  color: var(--editorial-dialog-muted);
  font-size: var(--font-size-200);
  font-weight: 500;
  line-height: 1.6;
  white-space: pre-line;
}

.editorial-dialog__description[hidden],
.editorial-dialog__field[hidden],
.editorial-dialog__button[hidden] {
  display: none;
}

.editorial-dialog__field {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  color: var(--editorial-dialog-ink);
  font-size: var(--font-size-100);
  font-weight: var(--site-weight-bold, 750);
}

.editorial-dialog__field input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid var(--editorial-dialog-input-border);
  border-radius: 14px;
  outline: none;
  background: var(--editorial-dialog-input);
  color: var(--editorial-dialog-ink);
  font:inherit;
  font-size: var(--font-size-200);
  font-weight: 600;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.editorial-dialog__field input:focus {
  border-color: var(--editorial-dialog-accent);
  background: var(--editorial-dialog-input-focus);
  box-shadow: 0 0 0 4px var(--site-accent-focus);
}

.editorial-dialog__status {
  min-height: 1.2em;
  margin: 12px 0 0;
  color: var(--editorial-dialog-danger);
  font-size: var(--font-size-100);
  font-weight: var(--site-weight-semibold, 650);
}

.editorial-dialog__status:empty {
  min-height: 0;
  margin: 0;
}

.editorial-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--editorial-dialog-action-line);
}

.editorial-dialog__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--editorial-dialog-line);
  border-radius: 13px;
  background: var(--editorial-dialog-control-soft);
  color: var(--editorial-dialog-muted);
  font:inherit;
  font-size: var(--font-size-100);
  font-weight: var(--site-weight-bold, 750);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.editorial-dialog__button:hover,
.editorial-dialog__button:focus-visible {
  border-color: var(--editorial-dialog-line-strong);
  color: var(--editorial-dialog-ink);
  box-shadow: var(--editorial-dialog-button-shadow);
  transform: translateY(-1px);
}

.editorial-dialog__button--primary {
  min-width: 132px;
  border-color: var(--editorial-dialog-accent);
  background: linear-gradient(180deg, var(--site-accent), var(--site-accent-hover));
  color: var(--editorial-dialog-on-accent);
  box-shadow: 0 11px 25px var(--site-accent-focus);
}

.editorial-dialog__button--primary:hover,
.editorial-dialog__button--primary:focus-visible {
  color: var(--editorial-dialog-on-accent);
}

.editorial-dialog--danger .editorial-dialog__icon {
  border-color: var(--editorial-dialog-danger-border);
  background: var(--editorial-dialog-danger-soft);
  color: var(--editorial-dialog-danger);
}

.editorial-dialog--danger .editorial-dialog__kicker {
  color: var(--editorial-dialog-danger);
}

.editorial-dialog--danger .editorial-dialog__title::after {
  background: linear-gradient(90deg, var(--editorial-dialog-danger), transparent);
}

.editorial-dialog--danger .editorial-dialog__button--primary {
  border-color: var(--editorial-dialog-danger);
  background: linear-gradient(180deg, #c86666, #ae4949);
  box-shadow: 0 11px 25px rgba(174, 73, 73, .2);
}

@media (max-width: 560px) {
  .editorial-dialog__panel {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
    padding: 30px 20px 20px;
    border-radius: 21px;
  }

  .editorial-dialog__close {
    top: 13px;
    right: 13px;
    width: 38px;
    height: 38px;
  }

  .editorial-dialog__icon {
    width: 46px;
    height: 46px;
  }

  .editorial-dialog__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .editorial-dialog__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-dialog *,
  .editorial-dialog *::before,
  .editorial-dialog *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}