/* FXAbsolute editorial layer
   The existing SEO pages have several shells. This file adds one shared,
   accessible layer without forcing every article into the same template. */

body.fxa-editorialized {
  background-image:
    radial-gradient(circle at 12% 7%, rgba(56, 189, 248, .055), transparent 26rem),
    radial-gradient(circle at 88% 32%, rgba(237, 37, 78, .045), transparent 30rem);
  background-attachment: fixed;
}

body.fxa-editorialized::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .14;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 79px,
    rgba(255, 255, 255, .018) 80px
  );
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

body.fxa-editorialized .wrap {
  position: relative;
  z-index: 1;
}

body.fxa-editorialized ::selection {
  color: #fff;
  background: rgba(237, 37, 78, .58);
}

.fxa-page-review {
  margin: 5px 0 24px !important;
  color: rgba(148, 163, 184, .58) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px !important;
  letter-spacing: .045em;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

.fxa-editorial {
  --fxa-note: 96, 165, 250;
  position: relative;
  margin: 46px -10px 54px 9px;
  padding: 28px 30px 25px;
  overflow: visible;
  border: 1px solid rgba(var(--fxa-note), .28);
  border-radius: 7px 19px 15px 11px;
  background:
    linear-gradient(rgba(var(--fxa-note), .035), rgba(var(--fxa-note), .012)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, .018) 0,
      rgba(255, 255, 255, .018) 1px,
      transparent 1px,
      transparent 31px
    ),
    rgba(8, 11, 20, .96);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .22),
    inset 0 1px rgba(255, 255, 255, .045);
}

.fxa-editorial--nudge-right {
  margin-left: -5px;
  margin-right: 4px;
  border-radius: 17px 8px 20px 12px;
}

.fxa-editorial--field-test { --fxa-note: 56, 189, 248; }
.fxa-editorial--workbook { --fxa-note: 52, 211, 153; }
.fxa-editorial--checklist { --fxa-note: 251, 191, 36; }
.fxa-editorial--counterpoint { --fxa-note: 248, 113, 113; }
.fxa-editorial--decision { --fxa-note: 167, 139, 250; }

.fxa-editorial::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: -4px;
  width: 7px;
  border-radius: 20px 4px 4px 20px;
  background: rgb(var(--fxa-note));
  box-shadow: 0 0 24px rgba(var(--fxa-note), .28);
}

.fxa-editorial::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 46px;
  width: 78px;
  height: 17px;
  transform: rotate(1.7deg);
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(230, 225, 204, .12);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .17);
}

.fxa-editorial--nudge-right::after {
  right: auto;
  left: 52px;
  transform: rotate(-2.1deg);
}

.fxa-editorial__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 7px;
}

.fxa-editorial__eyebrow {
  margin: 0 !important;
  color: rgb(var(--fxa-note)) !important;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.fxa-editorial__stamp {
  flex: 0 0 auto;
  margin-top: -9px;
  padding: 4px 8px;
  transform: rotate(2.4deg);
  border: 1px solid rgba(var(--fxa-note), .32);
  border-radius: 4px;
  color: rgba(255, 255, 255, .42);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

body.fxa-editorialized .fxa-editorial h2,
.fxa-editorial__title {
  max-width: 680px;
  margin: 7px 0 15px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #f8fafc !important;
  font-size: clamp(21px, 3.1vw, 28px) !important;
  font-weight: 850 !important;
  letter-spacing: -.025em;
  line-height: 1.18 !important;
  text-wrap: balance;
}

/* Several legacy article shells draw their own h2 marker with a pseudo-element.
   The editorial card already has a margin rail, so inheriting both can place a
   decorative line through the first letter of its title. */
body.fxa-editorialized .fxa-editorial__title::before,
body.fxa-editorialized .fxa-editorial__title::after {
  content: none !important;
  display: none !important;
}

.fxa-editorial__copy > p {
  max-width: 70ch;
  margin: 0 0 15px !important;
  color: rgba(241, 245, 249, .74) !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

.fxa-editorial__modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 23px 0 21px;
}

.fxa-editorial__module {
  position: relative;
  min-width: 0;
  padding: 14px 14px 13px;
  border: 1px solid rgba(var(--fxa-note), .14);
  border-radius: 5px 11px 8px 7px;
  background: rgba(var(--fxa-note), .035);
}

.fxa-editorial__module:nth-child(2) {
  top: 3px;
  border-radius: 11px 6px 10px 5px;
}

.fxa-editorial__module:nth-child(3) {
  top: -2px;
}

body.fxa-editorialized .fxa-editorial__module h3 {
  margin: 0 0 7px !important;
  padding: 0 !important;
  border: 0 !important;
  color: rgba(var(--fxa-note), .9) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .085em;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

.fxa-editorial__module p {
  margin: 0 !important;
  color: rgba(226, 232, 240, .69) !important;
  font-size: 12.5px !important;
  line-height: 1.58 !important;
}

.fxa-editorial__points {
  display: grid;
  gap: 8px;
  margin: 20px 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: editorial-point;
}

.fxa-editorial__points li {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 !important;
  color: rgba(226, 232, 240, .78) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  counter-increment: editorial-point;
}

.fxa-editorial__points li::before {
  content: counter(editorial-point, decimal-leading-zero);
  margin-top: .14em;
  color: rgba(var(--fxa-note), .82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.fxa-editorial__sources {
  margin: 20px 0 0;
  border: 1px solid rgba(var(--fxa-note), .2);
  border-radius: 10px;
  background: rgba(2, 6, 23, .34);
  overflow: hidden;
}

.fxa-editorial__sources summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  color: rgba(241, 245, 249, .82);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  list-style-position: inside;
  text-transform: uppercase;
}

.fxa-editorial__sources summary span {
  color: rgba(var(--fxa-note), .76);
  font-size: 9px;
  letter-spacing: .045em;
  text-align: right;
}

.fxa-editorial__sources[open] summary {
  border-bottom: 1px dashed rgba(255, 255, 255, .09);
}

.fxa-editorial__sources ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
  margin: 0 !important;
  padding: 14px 16px 8px 30px !important;
}

.fxa-editorial__sources li {
  margin: 0 !important;
  color: rgba(148, 163, 184, .7) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.fxa-editorial__sources a {
  color: rgba(226, 232, 240, .78) !important;
  text-decoration-color: rgba(var(--fxa-note), .42) !important;
  text-underline-offset: 3px;
}

.fxa-editorial__sources a:hover {
  color: rgb(var(--fxa-note)) !important;
}

.fxa-editorial__sources > p {
  margin: 0 !important;
  padding: 2px 14px 13px !important;
  color: rgba(148, 163, 184, .52) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px !important;
  line-height: 1.55 !important;
}

.fxa-editorial__afterthought {
  position: relative;
  margin: 22px 0 0 !important;
  padding: 13px 15px 13px 17px;
  border-left: 2px solid rgba(var(--fxa-note), .62);
  border-radius: 0 8px 8px 0;
  background: rgba(var(--fxa-note), .055);
  color: rgba(255, 255, 255, .66) !important;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: 13.5px !important;
  font-style: italic;
  line-height: 1.6 !important;
}

.fxa-editorial__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 19px;
  padding-top: 15px;
  border-top: 1px dashed rgba(255, 255, 255, .1);
}

.fxa-editorial__reviewed {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .31);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.fxa-editorial__related {
  color: rgb(var(--fxa-note)) !important;
  font-size: 12.5px !important;
  font-weight: 750;
  line-height: 1.4;
  text-align: right;
  text-decoration: none !important;
  text-underline-offset: 3px;
}

.fxa-editorial__related::after {
  content: "  →";
}

.fxa-editorial__related:hover {
  text-decoration: underline !important;
}

.fxa-editorial__related:focus-visible {
  outline: 2px solid rgb(var(--fxa-note));
  outline-offset: 4px;
  border-radius: 2px;
}

.fxa-evidence-note {
  margin: 24px 0 30px;
  padding: 15px 17px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-left: 3px solid rgba(251, 191, 36, .72);
  border-radius: 4px 11px 11px 4px;
  background: rgba(251, 191, 36, .045);
}

.fxa-evidence-note > strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(253, 230, 138, .88) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fxa-evidence-note > p {
  margin: 0 !important;
  color: rgba(226, 232, 240, .68) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

/* Long-form research components used on SEO articles only. They give dense
   material a visible hierarchy while preserving each page's original shell. */
.fxa-data-table {
  margin: 21px 0 28px;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 12px;
  background: rgba(15, 23, 42, .38);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  scrollbar-color: rgba(148, 163, 184, .35) transparent;
}

.fxa-data-table:focus-visible {
  outline: 2px solid rgba(96, 165, 250, .82);
  outline-offset: 3px;
}

.fxa-data-table::before {
  display: none;
}

body.fxa-editorialized .fxa-data-table table {
  min-width: 660px;
  margin: 0 !important;
  border: 0 !important;
}

body.fxa-editorialized .fxa-data-table th,
body.fxa-editorialized .fxa-data-table td {
  vertical-align: top;
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
}

body.fxa-editorialized .fxa-data-table tr:last-child td {
  border-bottom: 0 !important;
}

.fxa-formula {
  display: grid;
  gap: 7px;
  margin: 21px 0 23px;
  padding: 17px 18px 16px;
  border: 1px solid rgba(96, 165, 250, .2);
  border-left: 3px solid rgba(96, 165, 250, .7);
  border-radius: 5px 12px 12px 5px;
  background:
    linear-gradient(105deg, rgba(96, 165, 250, .07), transparent 68%),
    rgba(2, 6, 23, .42);
  color: rgba(226, 232, 240, .76);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}

.fxa-formula strong {
  margin-bottom: 2px;
  color: rgba(147, 197, 253, .92) !important;
  font-size: 10px;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.fxa-formula span {
  display: block;
  overflow-wrap: anywhere;
}

.fxa-protocol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 20px 0 26px;
}

.fxa-protocol-grid article {
  min-width: 0;
  padding: 16px 16px 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 10px 5px 12px 7px;
  background: rgba(255, 255, 255, .025);
}

.fxa-protocol-grid article:nth-child(even) {
  transform: translateY(3px);
  border-radius: 5px 12px 7px 10px;
}

.fxa-protocol-grid strong {
  display: block;
  margin-bottom: 6px;
  color: rgba(241, 245, 249, .9) !important;
  font-size: 13px;
  letter-spacing: .012em;
}

.fxa-protocol-grid p {
  margin: 0 !important;
  color: rgba(203, 213, 225, .66) !important;
  font-size: 13px !important;
  line-height: 1.62 !important;
}

.fxa-source-note {
  position: relative;
  margin: 25px 0 30px !important;
  padding: 15px 17px 15px 19px;
  border: 1px solid rgba(251, 191, 36, .17);
  border-radius: 4px 12px 12px 4px;
  background: rgba(251, 191, 36, .045);
  color: rgba(226, 232, 240, .7) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.fxa-source-note::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -1px;
  width: 3px;
  border-radius: 4px;
  background: rgba(251, 191, 36, .68);
}

@media (max-width: 650px) {
  body.fxa-editorialized {
    background-attachment: scroll;
  }

  body.fxa-editorialized::before {
    display: none;
  }

  .fxa-editorial,
  .fxa-editorial--nudge-right {
    margin: 38px 0 45px;
    padding: 24px 20px 21px;
    border-radius: 10px 17px 14px 10px;
  }

  .fxa-editorial::after {
    right: 30px;
    left: auto;
    width: 62px;
  }

  .fxa-editorial__header {
    gap: 10px;
  }

  .fxa-editorial__modules {
    grid-template-columns: 1fr;
  }

  .fxa-protocol-grid {
    grid-template-columns: 1fr;
  }

  .fxa-protocol-grid article:nth-child(n) {
    transform: none;
  }

  .fxa-data-table {
    margin-right: -4px;
    border-radius: 8px;
  }

  .fxa-data-table::before {
    content: "Swipe table to compare  →";
    position: sticky;
    left: 0;
    z-index: 1;
    display: block;
    width: max-content;
    padding: 8px 11px 7px;
    color: rgba(148, 163, 184, .68);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .fxa-editorial__module:nth-child(n) {
    top: auto;
  }

  .fxa-editorial__sources summary {
    align-items: flex-start;
  }

  .fxa-editorial__sources ul {
    grid-template-columns: 1fr;
  }

  .fxa-editorial__footer {
    display: grid;
    gap: 10px;
  }

  .fxa-editorial__related {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fxa-editorial,
  .fxa-editorial::after,
  .fxa-editorial__stamp {
    transform: none !important;
  }
}

@media print {
  body.fxa-editorialized {
    background: #fff !important;
  }

  body.fxa-editorialized::before,
  .fxa-editorial::after {
    display: none;
  }

  .fxa-editorial {
    break-inside: avoid;
    box-shadow: none;
    background: #fff;
    border-color: #888;
  }
}