/* ==========================================================================
   Dialogs — the native <dialog>, the prose and changelog blocks that only
   appear inside one, and the full-screen blocking overlay.
   ========================================================================== */

@layer components {
  /* dialog (native <dialog>, replaces SweetAlert2) */
  .zr-dialog {
    /* `margin: auto` is what centres a modal <dialog>; the reset in layer 1
       zeroes every margin, so it has to be restored explicitly here. */
    margin: auto;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 2 * var(--zr-6));
    padding: 0;
    border: 1px solid var(--zr-line);
    border-radius: var(--zr-r-lg);
    background: var(--zr-surface);
    color: var(--zr-text);
    box-shadow: var(--zr-shadow-lg);
    overflow: auto;
  }
  .zr-dialog::backdrop {
    background: var(--zr-scrim);
    backdrop-filter: blur(2px);
  }
  /* For a dialog whose content sets its own line length — a run log, a table —
     rather than prose that reads better narrow. */
  .zr-dialog--wide {
    width: min(600px, calc(100vw - 32px));
  }
  /* The sheet before a run and the gate into advanced mode: wider, rounder,
     the title without a rule under it and the buttons without a bar behind
     them. The contents come from js/modules/review-sheet.js and review-mode.js. */
  .zr-dialog--sheet {
    width: min(520px, calc(100vw - 32px));
    border-radius: 20px;
  }
  .zr-dialog--gate {
    width: min(420px, calc(100vw - 32px));
    border-radius: 20px;
  }
  .zr-dialog--sheet .zr-dialog__head,
  .zr-dialog--gate .zr-dialog__head {
    padding: var(--zr-5) var(--zr-5) 0;
    border-bottom: 0;
    font-size: var(--zr-fs-lg);
  }
  .zr-dialog--sheet .zr-dialog__body,
  .zr-dialog--gate .zr-dialog__body {
    padding: var(--zr-3) var(--zr-5) var(--zr-5);
    color: var(--zr-text);
  }
  .zr-dialog--sheet .zr-dialog__foot,
  .zr-dialog--gate .zr-dialog__foot {
    padding: var(--zr-4) var(--zr-5);
    background: transparent;
  }
  /* The head lays its own contents out — a title, sometimes a badge or a close
     button beside it — so it does not need .zr-row on top. The three flex
     declarations are exactly what that utility contributes. */
  .zr-dialog__head {
    display: flex;
    align-items: center;
    gap: var(--zr-2);
    padding: var(--zr-3);
    border-bottom: 1px solid var(--zr-line);
    font-weight: 600;
  }
  .zr-dialog__body {
    padding: var(--zr-3);
    color: var(--zr-text-muted);
  }
  /* Prose inside a dialog — help texts and the like. The reset zeroes every
     margin, so the spacing has to be handed back here. */
  .zr-prose > * + * {
    margin-top: var(--zr-2);
  }
  .zr-prose strong {
    color: var(--zr-text);
  }
  .zr-prose ul {
    padding-left: var(--zr-4);
  }
  .zr-prose li + li {
    margin-top: 2px;
  }
  .zr-prose code {
    font-family: var(--zr-font-mono);
    font-size: var(--zr-fs-sm);
    padding: 1px 4px;
    border-radius: var(--zr-r-sm);
    background: var(--zr-surface-sunken);
    color: var(--zr-text);
  }
  .zr-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--zr-2);
    padding: var(--zr-3);
    border-top: 1px solid var(--zr-line);
    background: var(--zr-surface-2);
  }

  .zr-dialog__foot--split {
    justify-content: space-between;
  }
  .zr-changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zr-2);
  }
  .zr-changelog-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--zr-2);
    color: var(--zr-text);
  }
  .zr-changelog-list li .zr-icon {
    color: var(--zr-brand);
    flex: none;
    margin-top: 3px;
  }

  /* Welcome / support & release dialog (ported from Mailrobbe) */
  @keyframes zr-welcome-pop {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.97);
    }
  }

  @keyframes zr-welcome-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  .zr-welcome {
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(22, 24, 29, 0.28);
    animation: zr-welcome-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .zr-welcome[open] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .zr-welcome__story {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 26px;
    background: #16181d;
    color: #ffffff;
  }

  .zr-welcome__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--zr-font-brand);
    font-size: 18px;
    font-weight: 700;
  }

  .zr-welcome__story-text {
    margin: 0;
    color: #c9ced6;
    font-size: 14px;
    line-height: 1.6;
  }

  .zr-welcome__figures {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 4px 0 0;
  }

  .zr-welcome__figures > div {
    animation: zr-welcome-rise 0.5s ease-out both;
  }

  .zr-welcome__figures > div:nth-child(1) {
    animation-delay: 0.35s;
  }

  .zr-welcome__figures > div:nth-child(2) {
    animation-delay: 0.5s;
  }

  .zr-welcome__figures > div:nth-child(3) {
    animation-delay: 0.65s;
  }

  .zr-welcome__figures dt {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
  }

  .zr-welcome__figures dd {
    margin: 0;
    color: #c9ced6;
    font-size: 13px;
  }

  .zr-welcome__value {
    color: #8db0fa;
  }

  .zr-welcome__warm {
    color: #f2c94c;
  }

  .zr-welcome__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 32px 24px;
  }

  .zr-welcome__title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
  }

  .zr-welcome__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
  }

  .zr-welcome__worth-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
  }

  .zr-welcome__worth-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
  }

  .zr-welcome__worth-head span,
  .zr-welcome__who,
  .zr-welcome__contact-text span {
    color: var(--zr-text-muted);
    font-size: 13px;
  }

  .zr-welcome__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .zr-welcome__tiles li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 14px;
    background: var(--zr-surface-sunken);
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }

  .zr-welcome__tiles li.zr-welcome__tile--featured {
    background: var(--zr-brand-soft);
    box-shadow: inset 0 0 0 2px var(--zr-brand);
  }

  .zr-welcome__amount {
    color: var(--zr-brand);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
  }

  .zr-welcome__tile-title {
    font-size: 14px;
    font-weight: 600;
  }

  .zr-welcome__who {
    font-size: 12px;
    line-height: 1.45;
  }

  .zr-welcome__pay {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .zr-welcome__pay a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid var(--zr-line-strong);
    border-radius: 10px;
    color: var(--zr-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }

  .zr-welcome__tiles li:hover,
  .zr-welcome__pay a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(22, 24, 29, 0.12);
  }

  .zr-welcome__contact {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--zr-surface-sunken);
  }

  .zr-welcome__contact-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--zr-brand-soft);
    color: var(--zr-brand);
  }

  .zr-welcome__contact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .zr-welcome__contact-text a {
    color: var(--zr-brand);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }

  .zr-welcome__pgp {
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid var(--zr-line-strong);
    border-radius: 8px;
    background: var(--zr-surface);
    color: var(--zr-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }

  .zr-welcome__changelog {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--zr-line);
    border-radius: 12px;
    background: var(--zr-surface-2);
  }

  .zr-welcome__changelog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .zr-welcome__changelog-title {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .zr-welcome__changelog-title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
  }

  .zr-welcome__changelog-title .zr-icon {
    color: var(--zr-brand);
  }

  .zr-welcome__changelog-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--zr-brand);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }

  .zr-welcome__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
  }

  .zr-welcome__later,
  .zr-welcome__start {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }

  .zr-welcome__later {
    padding: 0 16px;
    background: transparent;
    color: var(--zr-text-muted);
  }

  .zr-welcome__start {
    padding: 0 22px;
    background: var(--zr-brand);
    color: var(--zr-on-brand);
    font-weight: 600;
  }

  .zr-welcome__start:hover {
    background: var(--zr-brand-hover);
  }

  @media (max-width: 720px) {
    .zr-welcome[open] {
      grid-template-columns: minmax(0, 1fr);
    }

    .zr-welcome__tiles {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .zr-welcome,
    .zr-welcome__figures > div {
      animation: none;
    }

    .zr-welcome__tiles li,
    .zr-welcome__pay a {
      transition: none;
    }
  }

  /* full-screen blocking overlay — restart and model-test flows */
  .zr-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--zr-4);
    background: color-mix(in srgb, var(--zr-canvas) 82%, transparent);
    backdrop-filter: blur(4px);
  }
  .zr-fullscreen__card {
    width: 100%;
    max-width: 520px;
    padding: var(--zr-6);
    background: var(--zr-surface);
    border: 1px solid var(--zr-line);
    border-radius: var(--zr-r-lg);
    box-shadow: var(--zr-shadow-lg);
  }
  .zr-fullscreen__seal {
    font-size: 34px;
    line-height: 1;
    flex: none;
  }
}