/* Shared Vue dialog shell (kit Dialog, kit Popover). Behaviour is reka-ui's; this sheet
   owns the Planlined Signal · Precision Slate register exactly as the shipped CMF content
   modal paints it under the slate theme (measured live on app.html, 2026-10-23: Settings
   and ComplexModalFactory.confirm at 1280px): ink header 76px with the 2px Signal mark,
   42px icon tile, 20/24/700 title at -2% on paper-soft, radius 12 with the ring + lift +
   contact shadow stack, white body 14/20, white footer on a rule. Roles only, no literals
   beyond fallbacks; requires no CMF stylesheet. */
/* No z-index on the host: a stacking context would cap every dialog's lease z-index at 0. */
[data-ui-overlay-host] {
  position: relative;
}

.pl-dialog-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* The scrim is a pseudo-element so its fade-in is not an ancestor opacity of the
   dialog: a frozen animation timeline (background tab, throttled pane) then costs
   the dim, never the dialog. */
.pl-dialog-overlay::before {
  position: absolute;
  inset: 0;
  background: rgb(11 14 21 / 58%);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
  -webkit-backdrop-filter: blur(10px) saturate(1.18) brightness(0.86);
  backdrop-filter: blur(10px) saturate(1.18) brightness(0.86);
  content: '';
}

.pl-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--semantic-surface-canvas, var(--pl-paper, #fff));
  color: var(--semantic-text-primary, var(--pl-text-strong, var(--pl-ink)));
  box-shadow:
    0 0 0 1px var(--pl-rule-strong, #c4d0de),
    0 24px 56px -20px color-mix(in srgb, var(--pl-ink, #172d43) 45%, transparent),
    0 2px 6px color-mix(in srgb, var(--pl-ink, #172d43) 12%, transparent);
  font: 400 14px/20px var(--font-ui, ui-sans-serif, sans-serif);
  outline: none;
}

/* Band: 76px solid ink, title and context on on-ink, the Signal mark under the title. */
.pl-dialog__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 76px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--pl-ink-edge, rgb(255 255 255 / 16%));
  background: var(--pl-ink, #172d43);
  color: var(--pl-on-ink, #fff);
}

.pl-dialog__header::after {
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 92px;
  height: 2px;
  background: var(--pl-signal, #c8402a);
  content: '';
}

.pl-dialog__heading {
  flex: 1;
  min-width: 0;
}

.pl-dialog__title {
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pl-paper-soft, #f7f9fc);
}

.pl-dialog__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--pl-on-ink-muted, rgb(255 255 255 / 70%));
}

.pl-dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--pl-ink-edge, rgb(255 255 255 / 16%));
  border-radius: 8px;
  background: var(--pl-ink-tile, rgb(255 255 255 / 8%));
  color: var(--pl-signal-tint, #fbede9);
}

.pl-dialog__icon svg,
.pl-dialog__icon .kit-icon {
  width: 16px;
  height: 16px;
}

.pl-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pl-on-ink-muted, #c9cdd6);
  cursor: pointer;
  transition:
    background var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease);
}

.pl-dialog__close:hover {
  background: var(--pl-ink-tile, rgb(255 255 255 / 8%));
  color: var(--pl-on-ink, #fff);
}

.pl-dialog__close:focus-visible {
  outline: 2px solid var(--pl-on-ink, #fff);
  outline-offset: 2px;
}

.pl-dialog__close:disabled {
  opacity: 0.45;
  cursor: default;
}

.pl-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--pl-dialog-body-padding, 16px 20px 28px);
}

.pl-dialog__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 60px;
  padding: 10px 20px;
  border-top: 1px solid var(--semantic-border-subtle, var(--pl-rule, #dce4ee));
  background: var(--semantic-surface-canvas, var(--pl-paper, #fff));
}

/* Header actions sit between the heading and the close control; a consumer's
   walkthrough button keeps CMF's header-button recipe on the ink band. */
.pl-dialog__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.pl-dialog__actions .cmf-walkthrough-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: var(--pl-ink-tile, rgb(255 255 255 / 20%));
  color: var(--pl-on-ink, #fff);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease);
}

.pl-dialog__actions .cmf-walkthrough-btn:hover {
  background: rgb(255 255 255 / 30%);
}

/* A consumer that paints its own header (plans PageDialog) keeps the accessible
   name on a visually hidden title. */
.pl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* CMF's footer halves: the left group takes the slack so the right group stays
   flush with the edge, as in the CMF content modal. */
.pl-dialog__footer > .cmf-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.pl-dialog__footer > .cmf-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Anchored panel from the kit Popover: a floating surface (radius 6, lifted). */
.pl-popover {
  z-index: var(--z-detached-menu, 100000);
  min-width: 220px;
  max-width: min(360px, calc(100vw - 16px));
  padding: 12px 14px;
  border: 1px solid var(--semantic-border-subtle, var(--pl-rule, #dce4ee));
  border-radius: 6px;
  background: var(--semantic-surface-canvas, var(--pl-paper, #fff));
  color: var(--semantic-text-primary, var(--pl-text-strong, var(--pl-ink)));
  box-shadow: var(--pl-elevation-panel-hover, 0 12px 32px rgb(23 45 67 / 18%));
  font: 400 13px/20px var(--font-ui, ui-sans-serif, sans-serif);
  outline: none;
}
.pl-dialog--danger .pl-dialog__icon {
  border-color: color-mix(in srgb, var(--pl-danger-ink, #a61e2b) 55%, transparent);
  background: color-mix(in srgb, var(--pl-danger-ink, #a61e2b) 35%, transparent);
  color: var(--pl-on-ink, #fff);
}

.pl-dialog--danger .pl-dialog__header::after {
  background: var(--pl-danger-ink, #a61e2b);
}

/* Preserve the approved Planlined request-dialog geometry after the CMF host
   is removed. The page service supplies the request class; this uses only
   shared roles and the Vue Dialog shell. */
.pl-dialog-overlay:has(> .pl-dialog--page-request) {
  backdrop-filter: blur(10px) saturate(1.18) brightness(0.86);
}

.pl-dialog--page-request {
  border: 0;
  box-shadow:
    0 0 0 1px var(--pl-rule-strong),
    0 24px 56px -20px rgb(23 45 67 / 45%),
    0 2px 6px rgb(23 45 67 / 12%);
}

.pl-dialog--page-request .pl-dialog__header {
  position: relative;
  align-items: center;
  min-height: 76px;
  padding: 12px 20px;
  border-bottom-color: var(--pl-ink-edge, rgb(255 201 188 / 32%));
  background: var(--pl-ink);
  color: var(--pl-paper-soft);
}

.pl-dialog--page-request.pl-dialog--info .pl-dialog__header::after {
  position: absolute;
  bottom: -1px;
  left: 20px;
  width: 92px;
  height: 2px;
  background: var(--pl-signal);
  content: '';
}

.pl-dialog--page-request .pl-dialog__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pl-ink-edge, rgb(255 201 188 / 32%));
  border-radius: 8px;
  background: var(--pl-ink-tile, rgb(255 248 241 / 8%));
  color: var(--pl-signal-tint);
}

.pl-dialog--page-request .pl-dialog__icon svg {
  width: 16px;
  height: 16px;
}

.pl-dialog--page-request .pl-dialog__title {
  font-size: 20px;
  line-height: 22px;
  color: var(--pl-paper-soft);
}

.pl-dialog--page-request .pl-dialog__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--pl-on-ink-muted);
}

.pl-dialog--page-request .pl-dialog__close:hover {
  background: var(--pl-ink-tile, rgb(255 248 241 / 8%));
}

.pl-dialog--page-request .pl-dialog__body {
  padding: 16px 20px 28px;
  line-height: 20px;
}

.pl-dialog--page-request .page-dialog-request__message {
  line-height: 20px;
}

.pl-dialog--page-request .page-dialog-request .cmf-form-input {
  width: calc(100% - 11px);
  margin-top: 0;
}

html[data-product-theme='planlined'] .pl-dialog--page-request .page-dialog-request .cmf-form-input {
  height: 41px;
}

.pl-dialog--page-request .pl-dialog__footer {
  min-height: 60px;
  padding: 10px 20px;
  background: var(--semantic-surface-canvas, var(--pl-paper));
}

.page-dialog-request__message {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* dialogs.select: list below the search field, rows on the kit spacing scale. */
.page-dialog-select__list,
.pl-dialog .kit-radio-group {
  display: grid;
  gap: var(--pl-space-8, 8px);
  margin-top: var(--pl-space-12, 12px);
}

.page-dialog-select__empty {
  margin: var(--pl-space-12, 12px) 0 0;
  color: var(--cmf-visual-ink-secondary);
}
.page-dialog-request__review > p {
  margin: 0 0 12px;
  line-height: 1.5;
}
.page-dialog-request__review dl {
  margin: 0;
}
.page-dialog-request__row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--semantic-border-subtle, var(--pl-rule));
}
.page-dialog-request__row dt {
  font-weight: 600;
}
.page-dialog-request__row dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.page-dialog-request__error {
  margin: 8px 0 0;
  color: var(--semantic-state-danger-ink, var(--pl-danger-ink));
}
.page-dialog-request .cmf-form-input {
  width: 100%;
  margin-top: 12px;
}
/* Phones: a bottom sheet (the one deliberate departure from CMF's 90vh card),
   carrying CMF's measured narrow-shell details at 375px: 64px header at 14 16 12,
   16/20 title, no icon tile, 44px close and footer controls, stacked footer. */
@media (max-width: 600px) {
  .pl-dialog-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .pl-dialog {
    width: 100% !important;
    max-height: min(94dvh, 940px) !important;
    border-radius: 12px 12px 0 0;
  }

  .pl-dialog__header {
    gap: 8px;
    min-height: 64px;
    padding: 14px 16px 12px;
  }

  .pl-dialog__title {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.015em;
  }

  .pl-dialog__subtitle {
    margin-top: 2px;
  }

  .pl-dialog__icon {
    display: none;
  }

  .pl-dialog__close {
    width: 44px;
    height: 44px;
  }

  .pl-dialog__body {
    padding: 12px 16px 20px;
  }

  .pl-dialog__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px 14px;
  }

  .pl-dialog__footer .cmf-btn {
    width: 100%;
    min-height: 44px;
  }
}

@media (width <= 600px) {
  .pl-dialog-overlay:has(> .pl-dialog--page-request) {
    align-items: flex-start;
    padding: 0 2.5vw;
  }

  .pl-dialog.pl-dialog--page-request {
    width: 95vw !important;
    height: 90vh;
    max-height: 90vh !important;
    border-radius: 0;
  }

  .pl-dialog--page-request .pl-dialog__header {
    height: 64px;
    min-height: 64px;
    flex-basis: 64px;
    box-sizing: border-box;
    padding: 14px 16px 12px;
  }

  .pl-dialog--page-request .pl-dialog__icon {
    display: none;
  }

  .pl-dialog--page-request .pl-dialog__title {
    font-size: 16px;
    line-height: 20px;
  }

  .pl-dialog--page-request .pl-dialog__body {
    padding: 12px;
  }

  .pl-dialog--page-request .pl-dialog__footer {
    min-height: 111px;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 14px;
  }

  .pl-dialog--page-request .pl-dialog__footer button {
    width: 100%;
  }

  html[data-product-theme='planlined'] .pl-dialog--page-request .pl-dialog__header {
    height: 71px;
    min-height: 71px;
    flex-basis: 71px;
  }

  html[data-product-theme='planlined'] .pl-dialog--page-request .pl-dialog__footer {
    min-height: 131px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pl-dialog-overlay::before {
    animation: pl-dialog-enter 0.16s var(--ease-out, ease-out);
  }

  .pl-dialog {
    animation: pl-dialog-rise 0.2s var(--ease-out, ease-out);
  }

  .pl-popover[data-state='open'] {
    animation: pl-float-in 0.14s var(--ease-out, ease-out);
  }

  @keyframes pl-dialog-enter {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* Transform only: a dialog's visibility must never depend on an animation
     timeline advancing (background tabs and throttled panes freeze it at frame 0,
     which left the dialog at opacity 0). The overlay carries the fade, as in CMF. */
  @keyframes pl-dialog-rise {
    from {
      transform: translateY(8px) scale(0.985);
    }

    to {
      transform: none;
    }
  }
}

/* Preview entries inherit the dialog header's on-ink roles after teleport. */
.cmf-header .kit-layout-preview__entry {
  --cmf-visual-ink-secondary: var(--cmf-header-ink, var(--pl-on-ink));
  --cmf-visual-command: var(--cmf-header-ink, var(--pl-on-ink));
  --cmf-state-info-ink: var(--cmf-header-ink, var(--pl-on-ink));
  --cmf-state-info-bg: transparent;
  --cmf-state-info-border: var(--cmf-header-ink-secondary, var(--pl-on-ink-muted));
}

@media (max-width: 600px) {
  .cmf-modal > .cmf-header:has(.kit-layout-preview__entry:not([hidden])) {
    flex-wrap: wrap;
    grid-template-columns: minmax(0, 1fr);
  }
  .cmf-modal > .cmf-header:has(.kit-layout-preview__entry:not([hidden])) > .cmf-header-content {
    flex-basis: 100%;
  }
  .cmf-modal > .cmf-header:has(.kit-layout-preview__entry:not([hidden])) > .cmf-header-actions {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}