/*
 * Flywheel layout and page-specific styles.
 * Pico base + palette: pico.min.css (upstream pico.classless.amber.min.css — see Pico version picker).
 */

/*
 * Server-rendered field errors: Pico’s pattern is invalid control + `<small>` helper directly under it.
 * Light typography + thin accent (not a heavy “alert” box). `padding-inline-start` gives a non-color-only cue.
 */
.field-error {
  display: block;
  margin-block-start: calc(var(--pico-spacing) * 0.25);
  margin-block-end: 0;
  padding: 0;
  padding-inline-start: 0.4rem;
  border: none;
  border-inline-start: 0.15rem solid var(--pico-del-color);
  border-radius: 0;
  background: none;
  color: var(--pico-del-color);
  font-size: 0.875em;
  line-height: 1.35;
}

/*
 * Collapse Pico's default margin-bottom on invalid inputs so the error message sits close.
 */
:is(input, select, textarea)[aria-invalid="true"] {
  margin-bottom: calc(var(--pico-spacing) * 0.15);
}

[role="group"]:has([aria-invalid="true"]) {
  margin-bottom: calc(var(--pico-spacing) * 0.15);
}

/*
 * Inside a group the input connects to the adjacent button; keep left radius, remove right.
 */
[role="group"] > .field_with_errors > :is(input, select, textarea),
[role="group"] > :is(input, select, textarea) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/*
 * DNS warning: full-bleed alert band (same tokens as .flash--alert); inner column matches Pico
 * classless `body > header` / `body > main` (see pico.min.css). The .flash inside is layout-only.
 */
body > .flywheel-dns-warning-strip {
  width: 100%;
  background-color: color-mix(
    in srgb,
    var(--pico-del-color) 10%,
    var(--pico-card-background-color, var(--pico-background-color))
  );
  border-bottom: var(--pico-border-width) solid
    color-mix(
      in srgb,
      var(--pico-del-color) 22%,
      var(--pico-muted-border-color, rgba(0, 0, 0, 0.12))
    );
  color: var(--pico-color);
  box-sizing: border-box;
}

.flywheel-body-chrome-width {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
}

@media (min-width: 576px) {
  .flywheel-body-chrome-width {
    max-width: 510px;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .flywheel-body-chrome-width {
    max-width: 700px;
  }
}

@media (min-width: 1024px) {
  .flywheel-body-chrome-width {
    max-width: 950px;
  }
}

@media (min-width: 1280px) {
  .flywheel-body-chrome-width {
    max-width: 1200px;
  }
}

@media (min-width: 1536px) {
  .flywheel-body-chrome-width {
    max-width: 1450px;
  }
}

/*
 * Spina public CMS (/articles): Spina::MenuPresenter emits `<nav>`; keep spacing inside Pico main.
 */
.flywheel-spina-main .flywheel-spina-toc {
  margin-bottom: var(--pico-block-spacing-vertical);
}

.flywheel-spina-main .flywheel-spina-toc nav ul {
  margin-bottom: 0;
}

/*
 * Flash banners: clear success vs error. Use :notice / :alert in controllers; reuse .flash--alert + .flash__list
 * for inline form error summaries inside yielded content (not only direct children of main).
 */
main .flash,
.toast-stack .flash {
  margin-bottom: var(--pico-block-spacing-vertical);
  padding: 0.85rem 1rem;
  border-radius: var(--pico-border-radius);
  border: var(--pico-border-width) solid transparent;
  border-inline-start-width: 0.28rem;
}

.flywheel-dns-warning-strip .flywheel-body-chrome-width .flash {
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

main .flash .flash__text,
.flywheel-dns-warning-strip .flywheel-body-chrome-width .flash .flash__text,
.toast-stack .flash .flash__text {
  margin: 0;
}

main .flash .flash__list,
.flywheel-dns-warning-strip .flywheel-body-chrome-width .flash .flash__list,
.toast-stack .flash .flash__list {
  margin: 0;
  padding-inline-start: 1.15rem;
  list-style-position: outside;
}

/* Shared inline banner (optional Font Awesome icon); reuses .flash / .flash--* tokens above. */
main .flash.banner,
.flywheel-dns-warning-strip .flywheel-body-chrome-width .flash.banner {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--pico-spacing, 1rem) * 0.65);
}

main .flash.banner .banner__icon,
.flywheel-dns-warning-strip .flywheel-body-chrome-width .flash.banner .banner__icon {
  flex-shrink: 0;
  line-height: 1.35;
  margin-top: 0.12rem;
  color: var(--pico-muted-color, inherit);
}

main .flash.banner .banner__content,
.flywheel-dns-warning-strip .flywheel-body-chrome-width .flash.banner .banner__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pico-typography-spacing-vertical, 1rem) * 0.35);
}

/*
 * Disclosure panel: bordered <details> with outline secondary summary button.
 * Strip summary's own border so it forms one cohesive panel.
 */
details.disclosure-panel {
  margin-bottom: var(--pico-spacing);
  overflow: hidden;
  border: var(--pico-border-width) solid var(--pico-secondary);
  border-radius: var(--pico-border-radius);
  background-color: transparent;
}

details.disclosure-panel summary.disclosure-panel__summary[role="button"].outline.secondary {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--pico-spacing, 1rem) * 0.65);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

details.disclosure-panel summary.disclosure-panel__summary:focus-visible {
  outline: var(--pico-outline-width, 3px) solid var(--pico-primary-focus, var(--pico-primary));
  outline-offset: calc(var(--pico-outline-width, 3px) * -1);
  border-radius: var(--pico-border-radius);
}

details.disclosure-panel .disclosure-panel__icon {
  flex-shrink: 0;
  line-height: 1.35;
  margin-top: 0.12rem;
  color: var(--pico-muted-color, inherit);
}

details.disclosure-panel .disclosure-panel__summary-text {
  flex: 1;
  min-width: 0;
  text-align: start;
}

details.disclosure-panel[open] > summary {
  border-bottom: var(--pico-border-width) solid var(--pico-secondary);
}

details.disclosure-panel .disclosure-panel__body {
  /* Align body text with summary text (after icon + gap) */
  --disclosure-icon-offset: calc(1.15em + calc(var(--pico-spacing, 1rem) * 0.65));
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  padding-left: calc(var(--pico-form-element-spacing-horizontal) + var(--disclosure-icon-offset));
  background-color: transparent;
}

details.disclosure-panel .disclosure-panel__body p {
  margin: 0;
}

details.disclosure-panel .disclosure-panel__body p + p {
  margin-top: var(--pico-typography-spacing-vertical);
}

/* Success / error tints follow Pico semantic tokens (ins/del), so they stay correct per theme (e.g. amber). */
.flash--notice {
  border-inline-start-color: var(--pico-ins-color);
  background-color: color-mix(
    in srgb,
    var(--pico-ins-color) 11%,
    var(--pico-card-background-color, var(--pico-background-color))
  );
  border-color: color-mix(
    in srgb,
    var(--pico-ins-color) 24%,
    var(--pico-muted-border-color, rgba(0, 0, 0, 0.12))
  );
  color: var(--pico-color);
}

.flash--alert {
  border-inline-start-color: var(--pico-del-color);
  background-color: color-mix(
    in srgb,
    var(--pico-del-color) 10%,
    var(--pico-card-background-color, var(--pico-background-color))
  );
  border-color: color-mix(
    in srgb,
    var(--pico-del-color) 22%,
    var(--pico-muted-border-color, rgba(0, 0, 0, 0.12))
  );
  color: var(--pico-color);
}

.flywheel-dns-warning-strip .flywheel-body-chrome-width .flash.flash--alert {
  background-color: transparent;
  border-color: transparent;
}

/*
 * Toasts: Pico has no dedicated toast component; fixed stack reuses .flash--* semantic tints above.
 */
.toast-stack {
  position: fixed;
  z-index: 8888;
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  inset-inline-end: auto;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: min(26rem, calc(100vw - 1.5rem));
  pointer-events: none;
}

.toast-stack .flash.toast {
  pointer-events: auto;
  margin-bottom: 0;
  box-shadow:
    0 0.35rem 1.15rem color-mix(in srgb, var(--pico-color) 10%, transparent),
    0 0 0 var(--pico-border-width) var(--pico-muted-border-color, rgba(0, 0, 0, 0.08));
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.toast-stack .flash.toast.toast--leaving {
  opacity: 0;
  transform: translateY(0.35rem);
}

@media (prefers-reduced-motion: reduce) {
  .toast-stack .flash.toast {
    transition: none;
  }
}

/*
 * Pico classless (amber) ships without .secondary / .contrast on controls — only [type=reset] gets neutral styling.
 * Mirror @picocss/pico modular button variants so class="secondary" matches the amber theme (same tokens as full Pico).
 */
:is(button, [type=submit], [type=button], [role=button]).secondary {
  --pico-background-color: var(--pico-secondary-background);
  --pico-border-color: var(--pico-secondary-border);
  --pico-color: var(--pico-secondary-inverse);
  cursor: pointer;
}

:is(button, [type=submit], [type=button], [role=button]).secondary:is(
  [aria-current]:not([aria-current=false]),
  :hover,
  :active,
  :focus
) {
  --pico-background-color: var(--pico-secondary-hover-background);
  --pico-border-color: var(--pico-secondary-hover-border);
  --pico-color: var(--pico-secondary-inverse);
}

:is(button, [type=submit], [type=button], [role=button]).secondary:focus,
:is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false])):focus {
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}

/*
 * Hollow buttons — Pico’s .outline (transparent fill + border); classless build omits it.
 * https://picocss.com/docs/button — “outline style”. Use .outline.secondary for neutral Cancel-style controls.
 */
:is(button, [type=submit], [type=button], [role=button]).outline {
  --pico-background-color: transparent;
  --pico-color: var(--pico-primary);
  --pico-border-color: var(--pico-primary);
}

:is(button, [type=submit], [type=button], [role=button]).outline:is(
  [aria-current]:not([aria-current=false]),
  :hover,
  :active,
  :focus
) {
  --pico-background-color: transparent;
  --pico-color: var(--pico-primary-hover);
  --pico-border-color: var(--pico-primary-hover);
}

:is(button, [type=submit], [type=button], [role=button]).outline:focus,
:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false])):focus {
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}

:is(button, [type=submit], [type=button], [role=button]).outline.secondary {
  --pico-color: var(--pico-secondary);
  --pico-border-color: var(--pico-secondary);
}

:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is(
  [aria-current]:not([aria-current=false]),
  :hover,
  :active,
  :focus
) {
  --pico-background-color: transparent;
  --pico-color: var(--pico-secondary-hover);
  --pico-border-color: var(--pico-secondary-hover);
}

:is(button, [type=submit], [type=button], [role=button]).outline.secondary:focus,
:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false])):focus {
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}

/* Pico: summary[role=button] chevron is inverted for filled primary; outline accordions need the default glyph. */
details summary[role=button].outline::after {
  filter: none;
}

/*
 * Destructive fill: use --pico-del-color. Do not use --pico-primary-inverse for label text — in Pico amber,
 * primary-inverse stays #000 in light mode while del is a dark red, so contrast collapses. Del is light in
 * dark scheme; switch label to a dark color there.
 */
:is(button, [type=submit], [type=button], [role=button]).danger {
  --pico-danger-on-fill: #fff;
  --pico-background-color: var(--pico-del-color);
  --pico-border-color: var(--pico-del-color);
  --pico-color: var(--pico-danger-on-fill);
  --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light])
    :is(button, [type=submit], [type=button], [role=button]).danger {
    --pico-danger-on-fill: #121212;
  }
}

:root[data-theme="dark"] :is(button, [type=submit], [type=button], [role=button]).danger {
  --pico-danger-on-fill: #121212;
}

:root[data-theme="light"] :is(button, [type=submit], [type=button], [role=button]).danger {
  --pico-danger-on-fill: #fff;
}

:is(button, [type=submit], [type=button], [role=button]).danger:is(
  [aria-current]:not([aria-current=false]),
  :hover,
  :active,
  :focus
) {
  --pico-background-color: color-mix(
    in srgb,
    var(--pico-del-color) 85%,
    var(--pico-danger-on-fill)
  );
  --pico-border-color: color-mix(
    in srgb,
    var(--pico-del-color) 85%,
    var(--pico-danger-on-fill)
  );
  --pico-color: var(--pico-danger-on-fill);
}

:is(button, [type=submit], [type=button], [role=button]).danger:focus,
:is(button, [type=submit], [type=button], [role=button]).danger:is([aria-current]:not([aria-current=false])):focus {
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--pico-outline-width) color-mix(in srgb, var(--pico-del-color) 45%, transparent);
}

/*
 * Sending domain show: modal open control is type=button, so classless Pico does not apply submit’s width:100%.
 * Match the former button_to strip so the destructive action stays a full-width primary affordance below the table.
 */
main button.danger[data-sending-domain-remove-open] {
  width: 100%;
  margin-top: var(--pico-block-spacing-vertical);
  margin-bottom: 0;
}

/*
 * Modal delete: form wraps confirm field + footer actions (footer is inside form, not article’s direct child).
 */
dialog#sending-domain-remove-dialog .sending-domain-remove-dialog__confirm-field {
  margin-bottom: var(--pico-spacing);
}

dialog#sending-domain-remove-dialog .sending-domain-remove-dialog__confirm-field label {
  margin-bottom: calc(var(--pico-spacing) * 0.375);
}

dialog#sending-domain-remove-dialog > article > form.sending-domain-remove-dialog__delete-form > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--pico-spacing) * 0.5);
  width: 100%;
  margin-bottom: 0;
  text-align: right;
}

dialog#sending-domain-remove-dialog > article > form.sending-domain-remove-dialog__delete-form > footer > button {
  width: auto;
  margin-bottom: 0;
  margin-left: 0;
}

/* Tab order follows DOM (submit then cancel); visual order stays secondary left, danger right. */
dialog#sending-domain-remove-dialog > article > form.sending-domain-remove-dialog__delete-form > footer > button[data-sending-domain-remove-dismiss] {
  order: 1;
}

dialog#sending-domain-remove-dialog > article > form.sending-domain-remove-dialog__delete-form > footer > button[type="submit"] {
  order: 2;
}

/*
 * Rails wraps invalid fields in div.field_with_errors. Pico [role=group] flex expects the text control
 * and the adjacent button as direct children; without this, the wrapper does not flex-grow and the
 * visibility button steals horizontal space.
 */
[role="group"] > .field_with_errors {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
}

[role="group"] > .field_with_errors > :is(input, select, textarea) {
  width: 100%;
}

/* Password visibility toggle: compact icon-only button alongside input in [role=group]. */
.session-show-password {
  --pico-form-element-spacing-horizontal: 0.5rem;
  --pico-form-element-spacing-vertical: 0.35rem;
  min-width: 2.5rem;
  flex: 0 0 auto;
}

.session-show-password-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.session-show-password-icons svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* Sign-up: vertical rhythm between fields. Zero margin on inputs and groups inside the wrapper
 * so spacing comes from the wrapper alone, not Pico defaults stacking. */
.user-sign-up .user-sign-up-field {
  margin-bottom: var(--pico-typography-spacing-vertical);
}

.user-sign-up .user-sign-up-field > :is(input, select, textarea, [role="group"]) {
  margin-bottom: 0;
}

/* ALTCHA widget: align with Pico form element styling. */
.altcha-widget-wrapper {
  margin-bottom: var(--pico-spacing);
}

altcha-widget {
  --altcha-border-radius: var(--pico-border-radius);
  --altcha-border-width: var(--pico-border-width);
  --altcha-color-border: var(--pico-form-element-border-color);
  --altcha-color-border-focus: var(--pico-primary-focus);
  --altcha-color-text: var(--pico-color);
  --altcha-color-base: var(--pico-form-element-background-color);
  --altcha-max-width: 100%;
}

/* Sign-in: secondary links below primary submit (Pico + predictable tab order). */
.session-sign-in-secondary {
  margin-top: var(--pico-spacing);
}

.session-sign-in-secondary ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.session-sign-in-secondary-or {
  color: var(--pico-muted-color, inherit);
  font-size: 0.9em;
  user-select: none;
}

/* Onboarding: unobtrusive skip (not a primary action).
   Match article inner horizontal inset so the link lines up with full-width controls inside Pico cards. */
main .onboarding-skip {
  margin-block-start: var(--pico-typography-spacing-vertical, 1rem);
  margin-block-end: 0;
  padding-inline-end: var(--pico-block-spacing-horizontal, var(--pico-spacing, 1rem));
  text-align: right;
}

main .onboarding-skip__link {
  font-size: 0.8125rem;
  font-weight: normal;
  color: var(--pico-muted-color, inherit);
  text-decoration: none;
}

main .onboarding-skip__link:hover {
  color: var(--pico-color);
  text-decoration: underline;
}

main .onboarding-skip__link:focus-visible {
  outline: var(--pico-outline-width, 2px) solid var(--pico-primary-focus, var(--pico-primary));
  outline-offset: 2px;
}

a.flywheel-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

a.flywheel-nav-brand .flywheel-brand-mark {
  display: block;
  height: 2.5rem;
  width: auto;
  flex-shrink: 0;
}

/* Current-user dropdown trigger: keep the bar compact on long emails. */
nav[aria-label="Main navigation"] summary[aria-haspopup="listbox"] {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep primary nav actions on one row when space allows. */
nav[aria-label="Main navigation"] > ul:last-of-type {
  flex-wrap: nowrap;
}

/* Do not let the trial CTA flex-grow to fill space between brand and account (was ~400px wide). */
nav[aria-label="Main navigation"] > ul:last-of-type > li:has(a.nav-trial-status) {
  flex: 0 0 auto;
  min-width: 0;
}

/*
 * Trial CTA: same token stack as Pico’s default primary button (--pico-primary-background, not --pico-primary).
 * https://picocss.com/docs/button — classless maps submit to primary-background + primary-border + button-box-shadow.
 */
nav[aria-label="Main navigation"] a.nav-trial-status {
  --pico-background-color: var(--pico-primary-background);
  --pico-border-color: var(--pico-primary-border);
  --pico-color: var(--pico-primary-inverse);
  --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));

  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: min(12.5rem, calc(100vw - 9rem));
  box-sizing: border-box;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  outline: none;
  background-color: var(--pico-background-color);
  box-shadow: var(--pico-box-shadow);
  color: var(--pico-color);
  font-weight: var(--pico-font-weight);
  font-size: 1rem;
  line-height: var(--pico-line-height);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--pico-transition),
    border-color var(--pico-transition),
    color var(--pico-transition),
    box-shadow var(--pico-transition);
}

nav[aria-label="Main navigation"] a.nav-trial-status:is(:hover, :active) {
  --pico-background-color: var(--pico-primary-hover-background);
  --pico-border-color: var(--pico-primary-hover-border);
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  --pico-color: var(--pico-primary-inverse);
}

nav[aria-label="Main navigation"] a.nav-trial-status:focus-visible {
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}

nav[aria-label="Main navigation"] a.nav-trial-status .nav-trial-status__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  text-align: center;
  text-wrap: balance;
}

nav[aria-label="Main navigation"] a.nav-trial-status .nav-trial-status__action {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

nav[aria-label="Main navigation"] a.nav-trial-status .nav-trial-status__time {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.92;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  nav[aria-label="Main navigation"] a.nav-trial-status {
    transition: none;
  }
}

/* Public landing (/) */
.landing-root {
  padding-bottom: 1rem;
}

.landing-hero {
  margin-bottom: 2.5rem;
  padding: 2rem 0;
  text-align: center;
}

.landing-hero h1 {
  margin-bottom: 0.75rem;
}

.landing-lede {
  font-size: 1.15rem;
  max-width: 36rem;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
}

.landing-section {
  margin-bottom: 2.75rem;
}

.landing-section h2 {
  margin-bottom: 0.5rem;
}

.landing-how {
  text-align: center;
}

.landing-how h2 {
  margin-bottom: 1.5rem;
}

.landing-how-illustration {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.landing-how-illustration svg {
  width: 100%;
  max-width: 44rem;
  height: auto;
}

.landing-how pre {
  max-width: 40rem;
  margin: 0 auto;
  text-align: left;
}

.landing-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .landing-grid {
    grid-template-columns: 1fr;
  }
}

.landing-card {
  margin-bottom: 0;
  padding: 1.25rem 1.2rem 1.35rem;
  border-radius: calc(var(--pico-border-radius, 0.25rem) * 1.5);
  border: var(--pico-border-width, 1px) solid var(--pico-muted-border-color, rgba(0, 0, 0, 0.12));
  background: var(--pico-card-background-color, var(--pico-background-color));
  box-shadow: 0 0.15rem 0.75rem color-mix(in srgb, var(--pico-color) 6%, transparent);
  transition:
    border-color var(--pico-transition, 0.2s ease),
    box-shadow var(--pico-transition, 0.2s ease),
    transform 0.22s ease;
}

.landing-card:hover {
  border-color: color-mix(in srgb, var(--pico-primary) 35%, var(--pico-muted-border-color));
  box-shadow: 0 0.35rem 1.1rem color-mix(in srgb, var(--pico-primary) 12%, transparent);
}

.landing-card h3 {
  margin-bottom: 0.45rem;
  font-size: 1.05rem;
}

.landing-card p {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pico-muted-color, inherit);
}

.landing-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  color: var(--pico-primary-inverse, #fff);
  background: var(--pico-primary);
  box-shadow: 0 0.2rem 0.5rem color-mix(in srgb, var(--pico-primary) 35%, transparent);
}

.landing-card-icon svg {
  opacity: 0.95;
}

.landing-trust {
  margin-bottom: 2.75rem;
}

.landing-cta-band {
  margin-top: 2rem;
  padding: 2rem 1.25rem 1.5rem;
  border-radius: calc(var(--pico-border-radius, 0.25rem) * 1.5);
  border: var(--pico-border-width, 1px) solid var(--pico-muted-border-color, rgba(0, 0, 0, 0.1));
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--pico-primary) 10%, var(--pico-card-background-color)) 0%,
    var(--pico-card-background-color) 55%
  );
  text-align: center;
}

.landing-cta-band h2 {
  margin-bottom: 0.5rem;
}

.landing-cta-band p:last-child {
  margin-bottom: 0;
}

.landing-cta-band.landing-cta-band--live {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--pico-border-radius, 0.25rem) * 2);
  box-shadow: 0 0.5rem 2rem color-mix(in srgb, var(--pico-primary) 12%, transparent);
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--pico-primary) 14%, var(--pico-card-background-color)) 0%,
    var(--pico-card-background-color) 45%,
    color-mix(in srgb, var(--pico-primary) 9%, var(--pico-card-background-color)) 100%
  );
  background-size: 200% 200%;
}

@media (prefers-reduced-motion: no-preference) {
  .landing-hero > h1,
  .landing-hero > .landing-lede,
  .landing-hero > .landing-hero-actions {
    animation: landing-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .landing-hero > h1 {
    animation-delay: 0.02s;
  }

  .landing-hero > .landing-lede {
    animation-delay: 0.08s;
  }

  .landing-hero > .landing-hero-actions {
    animation-delay: 0.14s;
  }

  .landing-card:hover {
    transform: translateY(-4px);
  }

  .landing-card:hover .landing-card-icon {
    transform: scale(1.06);
  }

  .landing-cta-band--live {
    animation: landing-cta-shimmer 12s ease-in-out infinite;
  }

  .landing-cta-band--live > * {
    animation: landing-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .landing-cta-band--live > *:nth-child(1) {
    animation-delay: 0.04s;
  }

  .landing-cta-band--live > *:nth-child(2) {
    animation-delay: 0.1s;
  }

  .landing-cta-band--live > *:nth-child(3) {
    animation-delay: 0.15s;
  }

  .landing-cta-band--live p:last-child a[role="button"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .landing-cta-band--live p:last-child a[role="button"]:hover {
    transform: translateY(-2px) scale(1.02);
  }

  @keyframes landing-fade-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes landing-cta-shimmer {
    0%,
    100% {
      background-position: 0% 40%;
    }

    50% {
      background-position: 100% 60%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-cta-band--live {
    animation: none;
  }

  .landing-card:hover {
    transform: none;
  }

  .landing-card:hover .landing-card-icon {
    transform: none;
  }

  .landing-cta-band--live p:last-child a[role="button"]:hover {
    transform: none;
  }
}

/* Dashboard: DNS verification row status (CSS spinner). */
.dns-check-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--pico-primary);
}

.spinner-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--pico-primary);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate 0.75s linear infinite;
}

@keyframes spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner-icon {
    animation: none;
    border-right-color: var(--pico-primary);
  }
}

/* DNS verification status icons with Font Awesome */
td [aria-label*="verified"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--pico-ins-color);
}

td [aria-label*="verified"] i {
  font-size: 1.1em;
}

td span[title*="24 hours"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--pico-muted-color);
}

td span[aria-label*="pending"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--pico-muted-color);
}

td span[aria-label*="not complete"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--pico-muted-color);
}

/* Dashboard: DNS records table (wrap long TXT/DKIM; copy actions). */
.dns-records-table-region {
  max-width: 100%;
  margin-bottom: var(--pico-block-spacing-vertical, 1rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dns-records-table-region h2 {
  margin-top: 0;
  margin-bottom: var(--pico-typography-spacing-vertical, 1rem);
  font-size: 1.25rem;
}

table.dns-records-table {
  width: 100%;
  min-width: 56rem;
  table-layout: fixed;
}

/* Status: ~half prior width; icon-only in view, full label in aria / visually-hidden. */
.dns-records-table th.dns-record-cell--status,
.dns-records-table td.dns-record-cell--status {
  width: 2.5rem;
  padding-inline: 0.125rem;
  text-align: center;
  vertical-align: middle;
}

.dns-records-table td.dns-record-cell--status .dns-check-loading,
.dns-records-table td.dns-record-cell--status > span {
  justify-content: center;
}

/* Type */
.dns-records-table th:nth-child(2),
.dns-records-table td:nth-child(2) {
  width: 5rem;
  white-space: nowrap;
}

/* Host */
.dns-records-table th:nth-child(3),
.dns-records-table td:nth-child(3) {
  width: 18rem;
}

/* Value column: let Pico [role=group] flex; cell only supplies min-width for table shrink. */
.dns-records-table td.dns-record-cell--value {
  min-width: 0;
}

.dns-records-table .dns-record-cell {
  vertical-align: top;
}

/*
 * Pico [role=group] semantics + one visual frame: shared border/background (segmented
 * control), divider between code and copy — reads as a single grouped control.
 */
.dns-records-table .dns-record-group[role="group"] {
  display: inline-flex;
  margin-bottom: 0;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  border: var(--pico-border-width, 0.0625rem) solid var(--pico-muted-border-color, rgba(0, 0, 0, 0.12));
  border-radius: var(--pico-border-radius, 0.25rem);
  background-color: var(--pico-code-background-color);
  overflow: hidden;
  box-shadow: none;
  vertical-align: middle;
}

.dns-records-table .dns-record-group[role="group"] > .dns-record-code {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dns-records-table .dns-record-group[role="group"] > .dns-record-copy-btn {
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-left: var(--pico-border-width, 0.0625rem) solid var(--pico-muted-border-color, rgba(0, 0, 0, 0.12));
  box-shadow: none;
  background: transparent;
  --pico-form-element-spacing-horizontal: 0.5rem;
  --pico-form-element-spacing-vertical: 0.25rem;
}

.dns-records-table .dns-record-group[role="group"] > .dns-record-copy-btn:hover,
.dns-records-table .dns-record-group[role="group"] > .dns-record-copy-btn:focus {
  background-color: color-mix(in srgb, var(--pico-primary) 8%, transparent);
}

.dns-records-table .dns-record-group[role="group"] > .dns-record-copy-btn:focus-visible {
  position: relative;
  z-index: 1;
  outline: var(--pico-outline-width, 0.125rem) solid var(--pico-primary-focus);
  outline-offset: -0.125rem;
}

.dns-record-copy-btn {
  padding: 0.2rem 0.35rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1;
  border-color: var(--pico-muted-border-color);
  color: var(--pico-muted-color);
}

.dns-record-copy-btn:hover,
.dns-record-copy-btn:focus {
  border-color: var(--pico-primary);
  color: var(--pico-primary);
}

.dns-records-table .dns-record-group code.dns-record-code {
  padding: 0.15rem 0.35rem;
  font-size: 0.8125rem;
}

/* Host & value: single line; ellipsis when overflowing (full string still in DOM for Copy). */
.dns-records-table td.dns-record-cell--host .dns-record-group code.dns-record-code,
.dns-records-table td.dns-record-cell--value .dns-record-group code.dns-record-code {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/*
 * Backoffice outbound-send audit tables + Pico tooltips (https://picocss.com/docs/tooltip).
 * Default placement is top with horizontal centering (left: 50%; translate(-50%)), so bubbles clip
 * at the viewport edge for left-column triggers. Long single-line tooltips also overflow
 * (https://github.com/picocss/pico/issues/277). Chromium can mis-place inline triggers
 * (https://github.com/picocss/pico/issues/678); inline-block gives a stable positioning box.
 */
#correlated-audit-events [data-tooltip],
#backoffice-outbound-send-audit-index [data-tooltip] {
  display: inline-block;
}

#correlated-audit-events [data-tooltip]::before,
#backoffice-outbound-send-audit-index [data-tooltip]::before {
  /* Shrink-to-fit used the narrow icon cell; min-width ~3× that so copy wraps readably. */
  width: max-content;
  min-width: 18rem;
  max-width: min(28rem, calc(100vw - 1.5rem));
  white-space: normal;
  text-overflow: unset;
}

/*
 * ChatKit support widget (SupportChat::Engine — application layout, chatkit_widget)
 * ================================================================================
 * ChatKit’s widget.css hardcodes light grays/whites. The host page sets
 * <meta name="color-scheme" content="light dark">, so native inputs can follow the OS
 * dark scheme while panels stay light — fix by scoping color-scheme here and driving every
 * surface from Pico tokens (matches prefers-color-scheme via Pico; data-theme="dark" mirror).
 * Filled chrome (header, send) uses --pico-primary-background like Pico’s default buttons, not --pico-primary (link/accent).
 */

/* Align native form controls with the widget shell (not OS-only half-dark). */
#__sc_widget__container {
  --primary-color: var(--pico-primary-background);
  color-scheme: light;
  font-family: var(--pico-font-family);
  color: var(--pico-color);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) #__sc_widget__container {
    color-scheme: dark;
  }
}

:root[data-theme="dark"] #__sc_widget__container {
  color-scheme: dark;
}

#__sc_widget__window {
  background-color: var(--pico-card-background-color, var(--pico-background-color));
  color: var(--pico-color);
  border-radius: var(--pico-border-radius);
  border: var(--pico-border-width, 1px) solid var(--pico-muted-border-color, rgba(0, 0, 0, 0.12));
  box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--pico-color) 12%, transparent);
}

#__sc_widget__container .__sc_widget__header {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

#__sc_widget__container .__sc_widget__header h3 {
  color: inherit;
}

#__sc_widget__container .__sc_widget__header p {
  color: inherit;
  opacity: 0.92;
}

/* ChatKit forces white; on Pico amber fill, text must be --pico-primary-inverse (#000). */
#__sc_widget__container #__sc_widget__close,
#__sc_widget__container .__sc_widget__header .__sc_widget__close_btn {
  color: var(--pico-primary-inverse);
}

#__sc_widget__container #__sc_widget__close:hover,
#__sc_widget__container .__sc_widget__header .__sc_widget__close_btn:hover {
  background-color: color-mix(in srgb, var(--pico-primary-inverse) 14%, transparent);
}

/* Explicit field colors so they always match Pico (avoids system dark inputs on light chrome). */
#__sc_widget__container #__sc_widget__guest_form input,
#__sc_widget__container #__sc_widget__guest_form textarea,
#__sc_widget__container #__sc_widget__message_input {
  border-radius: var(--pico-border-radius);
  border-color: var(--pico-muted-border-color, var(--pico-border-color));
  background-color: var(--pico-background-color);
  color: var(--pico-color);
  font-family: inherit;
}

#__sc_widget__container #__sc_widget__guest_form button,
#__sc_widget__container #__sc_widget__send {
  border-radius: var(--pico-border-radius);
  font-family: inherit;
  background-color: var(--pico-primary-background);
  border-color: var(--pico-primary-border);
  color: var(--pico-primary-inverse);
}

#__sc_widget__container #__sc_widget__guest_form button:hover:not(:disabled),
#__sc_widget__container #__sc_widget__send:hover:not(:disabled) {
  background-color: var(--pico-primary-hover-background);
  border-color: var(--pico-primary-hover-border);
  color: var(--pico-primary-inverse);
}

/*
 * Launcher bubble + “Start New Conversation”: ChatKit sets --primary-color inline from config
 * (DB default indigo), which beats :root tokens. Override with Pico primary fill (+ icon on bubble).
 */
#__sc_widget__container #__sc_widget__bubble,
#__sc_widget__container .__sc_widget__bubble {
  background-color: var(--pico-primary-background);
  border: var(--pico-border-width) solid var(--pico-primary-border);
  color: var(--pico-primary-inverse);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pico-primary-background) 35%, transparent);
}

#__sc_widget__container #__sc_widget__bubble:hover,
#__sc_widget__container .__sc_widget__bubble:hover {
  background-color: var(--pico-primary-hover-background);
  border-color: var(--pico-primary-hover-border);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pico-primary-background) 40%, transparent);
}

#__sc_widget__container #__sc_widget__bubble svg path,
#__sc_widget__container .__sc_widget__bubble svg path {
  fill: var(--pico-primary-inverse);
}

#__sc_widget__container #__sc_widget__new_conversation,
#__sc_widget__container .__sc_widget__new_conversation_btn {
  border-radius: var(--pico-border-radius);
  font-family: inherit;
  background-color: var(--pico-primary-background);
  border: none;
  color: var(--pico-primary-inverse);
}

#__sc_widget__container #__sc_widget__new_conversation:hover:not(:disabled),
#__sc_widget__container .__sc_widget__new_conversation_btn:hover:not(:disabled) {
  background-color: var(--pico-primary-hover-background);
  border-color: var(--pico-primary-hover-border);
  color: var(--pico-primary-inverse);
  opacity: 1;
}

/* Close = secondary affordance (Pico’s [type=reset] / .secondary stack), not primary or destructive. */
#__sc_widget__container #__sc_widget__close_conversation,
#__sc_widget__container .__sc_widget__close_conversation_btn {
  border-radius: var(--pico-border-radius);
  font-family: inherit;
  background-color: var(--pico-secondary-background);
  border: var(--pico-border-width) solid var(--pico-secondary-border);
  color: var(--pico-secondary-inverse);
}

#__sc_widget__container #__sc_widget__close_conversation:hover:not(:disabled),
#__sc_widget__container .__sc_widget__close_conversation_btn:hover:not(:disabled) {
  background-color: var(--pico-secondary-hover-background);
  border-color: var(--pico-secondary-hover-border);
  color: var(--pico-secondary-inverse);
}

/* Replace ChatKit hardcoded #F9FAFB / white shells */
#__sc_widget__container .__sc_widget__messages {
  background-color: color-mix(
    in srgb,
    var(--pico-muted-color, #6b7280) 8%,
    var(--pico-background-color)
  );
}

#__sc_widget__container .__sc_widget__input_container,
#__sc_widget__container .__sc_widget__actions {
  background-color: var(--pico-card-background-color, var(--pico-background-color));
  border-top-color: var(--pico-muted-border-color, var(--pico-border-color));
}

#__sc_widget__container .__sc_widget__message_agent .__sc_widget__message_content {
  background-color: var(--pico-card-background-color, var(--pico-background-color));
  color: var(--pico-color);
  border: var(--pico-border-width, 1px) solid var(--pico-muted-border-color, rgba(0, 0, 0, 0.08));
  box-shadow: none;
}

/* Outgoing guest bubbles: primary fill + inverse text (ChatKit widget.css loads after us and sets color: white). */
#__sc_widget__container #__sc_widget__messages .__sc_widget__message_guest .__sc_widget__message_content {
  background-color: var(--pico-primary-background);
  border: var(--pico-border-width, 1px) solid var(--pico-primary-border);
  color: var(--pico-primary-inverse);
  box-shadow: none;
}

#__sc_widget__container .__sc_widget__message_time {
  color: var(--pico-muted-color);
}

#__sc_widget__container .__sc_widget__greeting {
  color: var(--pico-color);
}

/* ChatKit hardcodes “Powered by ChatKit” in widget.js; the gem exposes no toggle — hide the footer. */
#__sc_widget__container .__sc_widget__footer {
  display: none;
}

#__sc_widget__container .__sc_widget__system_message {
  background-color: color-mix(in srgb, var(--pico-primary-background) 14%, var(--pico-background-color));
  color: var(--pico-color);
}

#__sc_widget__container .__sc_widget__messages::-webkit-scrollbar-thumb {
  background: var(--pico-muted-border-color, #d1d5db);
}

#__sc_widget__container .__sc_widget__messages::-webkit-scrollbar-thumb:hover {
  background: var(--pico-muted-color);
}

/* Sticky page footer: short pages keep the footer at the viewport bottom; tall pages scroll normally.
   Pico: `header` / `main` / `footer` as `body` children; `body > footer` matches the classless container
   (see https://picocss.com/docs/landmarks-section). */
html,
body {
  min-height: 100vh;
  min-height: 100dvh;
}

body > footer {
  position: sticky;
  top: 100vh;
  top: 100dvh;
}

/* Public legal (Markdown) + app shell utility footer: semantic nav + list, wrap on narrow viewports, readable scope line, copyright. */
.site-footer {
  margin-top: var(--pico-typography-spacing-vertical, 1.5rem);
  padding: var(--pico-block-spacing-vertical, 1rem) var(--pico-block-spacing-horizontal, 1rem)
    calc(var(--pico-block-spacing-vertical, 1rem) * 1.25);
  font-size: 0.9em;
  color: var(--pico-muted-color);
  border-top: 1px solid var(--pico-muted-border-color, var(--pico-border-color));
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pico-typography-spacing-vertical, 1.25rem);
  max-width: 100%;
}

.site-footer__nav {
  width: 100%;
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.35rem;
  column-gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list a {
  display: inline-flex;
  min-height: 2.75rem; /* target touch size without cluttering light mouse UIs (WCAG 2.2 target, wrap-friendly) */
  align-items: center;
  text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

.site-footer__scope {
  margin: 0;
  line-height: 1.5;
  font-size: 0.92em;
  max-width: 42rem;
  color: var(--pico-muted-color);
}

.site-footer__copyright {
  margin: 0;
  line-height: 1.35;
  font-size: 0.88em;
  color: var(--pico-muted-color);
}

.legal-page {
  max-width: 50rem;
  margin: 0 auto;
}

.legal-page__meta {
  color: var(--pico-muted-color);
  font-size: 0.9em;
}

.legal-page__body :is(p, li) {
  max-width: 48rem;
}

.legal-page__body h2 {
  margin-top: 1.75em;
}

.user-sign-up-field--legal {
  max-width: 32rem;
}

.user-sign-up-field--legal :is(p, label) {
  line-height: 1.4;
}