/* The "Get Your Team Connected" pop-up (inc/connector/request-dialog.php,
   js/ribbon-dialog.js), website#139. A centred dialog from 600px, a bottom
   sheet below. The overlay is shown by .is-open, or by :target until the
   script has taken over (.is-scripted), so the #get-connected link still
   reaches the form without JavaScript. Keep ad words out of this file's name
   and class names: ad blockers hide them.

   The design-system tokens it uses are declared here, scoped to it, as
   styles/ribbon.css does for the ribbon. The theme's own form and button
   rules reach in here, so the controls set what they rely on. */

.sn-ribbon-dialog {
  --color-text-primary: #000;
  --color-text-secondary: #333;
  --color-text-muted: #666;
  --color-text-accent-ink: #9A5A00;
  --color-text-link: #F15C30;
  --color-text-inverse: #fff;
  --color-surface-raised: #fff;
  --color-surface-sunken: #F2F2F2;
  --color-border-default: #E6E6E6;
  --color-border-strong: #162D54;
  --color-accent-default: #F15C30;
  --color-accent-hover: #D94A23;
  --color-accent-subtle: rgba(241, 92, 48, .14);
  --color-accent-highlight: #FF9A24;
  --color-focus-ring: rgba(22, 45, 84, .14);
  --elevation-300: 0 16px 40px rgba(22, 45, 84, .16);
  --elevation-focus: 0 0 0 3px var(--color-focus-ring);
  --radius-lg: 22px;
  --radius-sm: 8px;
  --font-family-display: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-body: 'Mona Sans', 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-heading-3: 700 28px/1.2 var(--font-family-display);
  --type-heading-3-tracking: -.3px;
  --type-label-base: 500 14px/1.4 var(--font-family-body);
  --type-label-sm: 500 12px/1.4 var(--font-family-body);
  --type-label-sm-tracking: .5px;
  --type-body-base: 400 16px/1.6 var(--font-family-body);
  --type-body-sm: 400 14px/1.5 var(--font-family-body);
  --type-control-base: 500 15px/1 var(--font-family-body);
  --motion-duration-fast: .15s;

  position: fixed;
  inset: 0;
  z-index: 1100; /* over the fixed <header> (styles/nav.css, 1000) */
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 0 0;
  box-sizing: border-box;
  background: rgba(15, 34, 68, .72);
  overflow: hidden;
  overscroll-behavior: contain;
  font: var(--type-body-base);
  color: var(--color-text-secondary);
  text-align: left;
}

.sn-ribbon-dialog.is-open,
.sn-ribbon-dialog:not(.is-scripted):target {
  display: flex;
}

/* The page behind doesn't scroll while it is open. */
html.has-sn-ribbon-dialog-open {
  overflow: hidden;
}

.sn-ribbon-dialog *,
.sn-ribbon-dialog *::before,
.sn-ribbon-dialog *::after {
  box-sizing: border-box;
}

/* Phones (< 600px) first: a bottom sheet. */
.sn-ribbon-dialog__panel {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--elevation-300);
}

.sn-ribbon-dialog__panel:focus {
  outline: none;
}

@media (min-width: 600px) {
  .sn-ribbon-dialog {
    align-items: center;
    padding: 24px 16px;
  }

  .sn-ribbon-dialog__panel {
    max-width: 560px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    border-radius: var(--radius-lg);
  }
}

/* Sticky, so the close button stays reachable while the form scrolls. */
.sn-ribbon-dialog__close-holder {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 0;
}

.sn-ribbon-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast);
}

.sn-ribbon-dialog__close:hover {
  background: var(--color-surface-sunken);
}

.sn-ribbon-dialog__close:focus {
  outline: none;
}

.sn-ribbon-dialog__close:focus-visible {
  box-shadow: var(--elevation-focus);
}

.sn-ribbon-dialog__form,
.sn-ribbon-dialog__done {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: clamp(24px, 5vw, 40px);
}

.sn-ribbon-dialog__done {
  gap: 24px;
}

.sn-ribbon-dialog [hidden] {
  display: none !important;
}

/* The honeypot: off screen, not display:none, which some bots skip. */
.sn-ribbon-dialog__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sn-ribbon-dialog__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 40px; /* clears the close button */
}

.sn-ribbon-dialog__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sn-ribbon-dialog__logo {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

.sn-ribbon-dialog__eyebrow {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent-ink);
}

.sn-ribbon-dialog__title {
  margin: 0;
  padding: 0;
  font: var(--type-heading-3);
  letter-spacing: var(--type-heading-3-tracking);
  text-transform: none;
  color: var(--color-text-primary);
}

.sn-ribbon-dialog__title:focus {
  outline: none;
}

/* Text stays black: Flamingo text fails contrast at 14px. */
.sn-ribbon-dialog__summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-subtle);
  font: var(--type-body-sm);
  color: var(--color-text-primary);
}

.sn-ribbon-dialog__summary-mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-accent-default);
  color: var(--color-text-inverse);
  font: 700 13px/20px var(--font-family-body);
  text-align: center;
}

/* Name and company side by side when there is room, stacked on phones. */
.sn-ribbon-dialog__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 20px 16px;
}

.sn-ribbon-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-weight: inherit;
}

.sn-ribbon-dialog__label {
  font: var(--type-label-base);
  color: var(--color-text-primary);
}

.sn-ribbon-dialog__optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.sn-ribbon-dialog__hint {
  margin-top: -4px;
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

/* 16px text: anything smaller makes iOS zoom in on focus. */
.sn-ribbon-dialog__input {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: none;
  font: var(--type-body-base);
  color: var(--color-text-primary);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.sn-ribbon-dialog__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.sn-ribbon-dialog__input:focus {
  border-color: var(--color-border-strong);
  box-shadow: var(--elevation-focus);
}

.sn-ribbon-dialog__input[aria-invalid="true"] {
  border: 2px solid var(--color-accent-default);
  padding: 0 13px;
}

.sn-ribbon-dialog__error {
  display: flex;
  gap: 6px;
  font: var(--type-body-sm);
  color: var(--color-text-primary);
}

.sn-ribbon-dialog__bang {
  color: var(--color-accent-default);
  font-weight: 700;
}

.sn-ribbon-dialog__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-weight: inherit;
  cursor: pointer;
}

.sn-ribbon-dialog__check {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--color-accent-default);
  cursor: pointer;
}

.sn-ribbon-dialog__check:focus-visible {
  outline: none;
  box-shadow: var(--elevation-focus);
}

.sn-ribbon-dialog__consent-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}

.sn-ribbon-dialog__note {
  margin: 0;
  font: var(--type-body-sm);
}

.sn-ribbon-dialog a {
  color: var(--color-text-link);
  font-weight: 600;
}

.sn-ribbon-dialog a:hover {
  color: var(--color-accent-hover);
}

.sn-ribbon-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 4px;
}

/* The kit's Button: solid and outline, the same height, square corners. */
.sn-ribbon-dialog__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 24px 48px;
  border: 0;
  border-radius: 0;
  background: var(--color-accent-default);
  color: var(--color-text-inverse);
  font: var(--type-control-base);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast),
              color var(--motion-duration-fast),
              border-color var(--motion-duration-fast);
}

.sn-ribbon-dialog__button:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-inverse);
}

.sn-ribbon-dialog__button--outline,
.sn-ribbon-dialog__button--outline:hover {
  padding: 22px 46px;
  border: 2px solid var(--color-accent-default);
  background: transparent;
  color: var(--color-text-accent-ink);
}

.sn-ribbon-dialog__button--outline:hover {
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover);
}

.sn-ribbon-dialog__button:focus {
  outline: none;
}

.sn-ribbon-dialog__button:focus-visible {
  box-shadow: var(--elevation-focus);
}

.sn-ribbon-dialog__button:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Success. */
.sn-ribbon-dialog__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--color-accent-highlight);
  color: #000;
}

.sn-ribbon-dialog__done-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sn-ribbon-dialog__thanks {
  margin: 0;
}

.sn-ribbon-dialog__steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-ribbon-dialog__steps li {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--color-border-default);
}

.sn-ribbon-dialog__steps li:last-child {
  border-bottom: 1px solid var(--color-border-default);
}

.sn-ribbon-dialog__steps strong {
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.sn-ribbon-dialog__step-number {
  flex: none;
  width: 28px;
  font: 700 18px/1.4 var(--font-family-display);
  color: var(--color-text-accent-ink);
}

.sn-ribbon-dialog__call {
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sn-ribbon-dialog__close,
  .sn-ribbon-dialog__button {
    transition: none;
  }
}