{"version":3,"file":"static/css/3290.1165b42b.chunk.css","mappings":"AAAA,cACE,uCACA,WACA,gBACA,WAGF,oBACE,sDACA,2CACA,YACA,uBACA,WAGF,kCACE,GACE,kCAGF,IACE,mCAGF,GACE,uCAIJ,+BACE,oBACE,wBC5BF,0DACE,2CAEA,+EACE,+BAEA,yBAHF,+EAII,6BACA,4BAKN,kCACE,iCAGE,uIAEE,qBACA,kBACA,gBAIJ,yCACE,kBAGF,0CACE,aACA,iCACA,+BACA,8BAEA,qDACE,eAGF,gEACE,cAEA,oEACE,YACA,eACA,WAIJ,wBApBF,0CAqBI,oCACE,CAGF,gEACE,mBAKN,qCACE,oBAGF,oCACE,yCAIA,oDACE,aACA,YAEA,mEACE,4CACA,oBACA,kBAGF,kEACE,yCACA,WAGF,0DACE,uCACA,2CACA,+CACA,4CACA,YACA,iBACA,WAEA,uEACE,kBACA,uBAIJ,2DACE,yCACA,gDACA,6CACA,gCACA,eACA,4BACA,eACA,eAEA,iEACE,uCAGF,kEACE,wCAKN,6CACE,mBACA,aACA,iBAGF,4DACE,eAEA,mBACA,cAIJ,wCACE,iCACA,mCACA,cAEA,2CACE,iBAGF,+CACE,aACA,sBAEA,kDACE,mBAMA,yFACE,qCAGF,yFACE,8EAOF,yFACE,iCASA,6RACE,+BAMR,wBACE,oDACE,cAGF,kDACE,qBAGF,kDACE,oBAGF,6CACE,qBAGJ,wBACE,sDACE,mBAGF,+CACE,cAGJ,6CACE,oDACE,WAIJ,+CACE,kBACA,aACA,2BACA,+BAGE,4DACE,+BACA,SChOZ,aACE,iDAAkD,CAClD,0CAA2C,CAE3C,wCACE,aAIA,wBADF,sBAEI,kBAMF,2FACE,yCACA,kBAEA,0MAEE,qBCrBN,kCACE,SACA,yBACA,mBACA,YAEA,qCACE,iDACA,kBAEA,6CACE,uCAIJ,0EAEE,uBACA,SACA,6BACA,gBACA,UAGF,qCACE,eACA,mBAGF,qCACE,UAEA,yCACE,sBAKN,2BACE,kBAEA,kCACE,mCACA,kBACA,iBACA,UACA,kBAGF,0CACE,kBAAmB,CACnB,+CACA,mCACA,iDACA,SACA,gBACA,2BACA,eACA,kBACA,kBACA,SACA,4C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","sources":["observatory/progress/index.scss","observatory/landing.scss","observatory/docs/index.scss","observatory/tooltip/index.scss","observatory/benchmark-chart/index.scss","observatory/results.scss","observatory/index.scss"],"sourcesContent":[".progress-bar {\n  background-color: var(--observatory-bg);\n  height: 4px;\n  overflow: hidden;\n  width: 100%;\n}\n\n.progress-bar-value {\n  animation: indeterminateAnimation 2.5s infinite linear;\n  background-color: var(--observatory-accent);\n  height: 100%;\n  transform-origin: 0% 50%;\n  width: 100%;\n}\n\n@keyframes indeterminateAnimation {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .progress-bar-value {\n    animation-duration: 60s;\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.observatory {\n  .observatory-landing.observatory-landing-top {\n    background: var(--observatory-bg-secondary);\n\n    .observatory-wrapper {\n      grid-template-areas: \"header .\";\n\n      @media (max-width: #{$screen-xl - 1}) {\n        grid-template-areas: \"header\";\n        grid-template-columns: auto;\n      }\n    }\n  }\n\n  .observatory-landing {\n    background: var(--observatory-bg);\n\n    .observatory-wrapper {\n      .feedback-link,\n      .faq-link {\n        display: inline-block;\n        margin-right: 1rem;\n        margin-top: 2rem;\n      }\n    }\n\n    .place {\n      grid-area: sidebar;\n    }\n\n    .header {\n      display: grid;\n      gap: 0 6.25rem;\n      grid-template-areas: \"form svg\";\n      grid-template-columns: 2fr 1fr;\n\n      .scan-form {\n        grid-area: form;\n      }\n\n      .landing-illustration {\n        grid-area: svg;\n\n        svg {\n          height: auto;\n          max-width: 50vw;\n          width: 100%;\n        }\n      }\n\n      @media (max-width: #{$screen-md - 1}) {\n        grid-template:\n          \"form\" auto\n          \"svg\" auto;\n\n        .landing-illustration {\n          text-align: center;\n        }\n      }\n    }\n\n    h1 {\n      margin-bottom: unset;\n    }\n\n    p {\n      color: var(--observatory-color-secondary);\n    }\n\n    form {\n      .input-group {\n        display: flex;\n        height: 3rem;\n\n        :focus-visible {\n          outline: 1px solid var(--observatory-accent);\n          outline-offset: -1px;\n          outline-width: 1px;\n        }\n\n        ::placeholder {\n          color: var(--observatory-color-secondary);\n          opacity: 0.8;\n        }\n\n        input {\n          background-color: var(--observatory-bg);\n          border: 1px solid var(--observatory-border);\n          border-bottom-left-radius: var(--border-radius);\n          border-top-left-radius: var(--border-radius);\n          flex-grow: 1;\n          padding: 0 0.75rem;\n          width: 100%;\n\n          &::placeholder {\n            overflow-x: hidden;\n            text-overflow: ellipsis;\n          }\n        }\n\n        button {\n          background: var(--button-primary-default);\n          border-bottom-right-radius: var(--border-radius);\n          border-top-right-radius: var(--border-radius);\n          color: var(--background-primary);\n          cursor: pointer;\n          font: var(--type-emphasis-m);\n          font-size: 1rem;\n          padding: 0 2rem;\n\n          &:hover {\n            background: var(--button-primary-hover);\n          }\n\n          &:active {\n            background: var(--button-primary-active);\n          }\n        }\n      }\n\n      label {\n        align-items: center;\n        display: flex;\n        margin: 1.75rem 0;\n      }\n\n      input[type=\"checkbox\"] {\n        height: 1.25rem;\n        margin: 0;\n        margin-right: 0.5rem;\n        width: 1.25rem;\n      }\n    }\n\n    .main {\n      background: var(--observatory-bg);\n      border-radius: var(--border-radius);\n      margin: 1rem 0;\n\n      h2 {\n        margin-top: unset;\n      }\n\n      .about {\n        display: flex;\n        flex-direction: column;\n\n        h2 {\n          margin-bottom: 2rem;\n        }\n\n        // Make a gradient from the accent color to the background color,\n        // replacing the light-mode-only colors in the original SVG data.\n        svg.lines defs#defs3 #gradient {\n          stop#stop1 {\n            stop-color: var(--observatory-accent);\n          }\n\n          stop#stop2 {\n            stop-color: color-mix(\n              in srgb,\n              var(--observatory-accent),\n              var(--observatory-bg)\n            );\n          }\n\n          stop#stop3 {\n            stop-color: var(--observatory-bg);\n          }\n        }\n\n        figure {\n          &.assessment,\n          &.scanning,\n          &.security,\n          &.mdn {\n            svg path {\n              fill: var(--observatory-accent);\n            }\n          }\n        }\n      }\n\n      @media (min-width: $screen-md) {\n        .assessment {\n          margin-left: 0;\n        }\n\n        .scanning {\n          margin-left: 3.125rem;\n        }\n\n        .security {\n          margin-left: 6.25rem;\n        }\n\n        .mdn {\n          margin-left: 9.75rem;\n        }\n      }\n      @media (max-width: #{$screen-md - 1}) {\n        figure ~ figure {\n          margin-top: 1.75rem;\n        }\n\n        .lines {\n          display: none;\n        }\n      }\n      @media (min-width: $screen-md) and (max-width: #{$screen-lg - 1}) {\n        .about-copy {\n          width: 80%;\n        }\n      }\n\n      figure {\n        align-items: start;\n        display: grid;\n        gap: 1.5rem;\n        grid-template-columns: 2rem 1fr;\n\n        figcaption {\n          p {\n            color: var(--observatory-color);\n            margin: 0;\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.observatory {\n  --background-toc-active: var(--observatory-border);\n  --category-color: var(--observatory-accent);\n\n  .article-actions-container {\n    display: flex;\n  }\n\n  .sidebar {\n    @media (min-width: $screen-md) {\n      padding-top: 3rem;\n    }\n  }\n\n  &,\n  .observatory-wrapper {\n    .document-toc-heading {\n      font-size: var(--type-base-font-size-rem);\n      margin-top: 1.5rem;\n\n      a,\n      a:hover {\n        text-decoration: none;\n      }\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.observatory {\n  .tooltip-popup table {\n    border: 0;\n    border-collapse: collapse;\n    white-space: nowrap;\n    width: 10rem;\n\n    tr {\n      color: var(--observatory-inverse-color-secondary);\n      font-size: 0.875rem;\n\n      &.current {\n        color: var(--observatory-inverse-color);\n      }\n    }\n\n    th,\n    td {\n      background-color: unset;\n      border: 0;\n      font-weight: var(--font-body);\n      text-align: left;\n      width: 50%;\n    }\n\n    th {\n      font-size: 1rem;\n      padding: 0 0 0.75rem;\n    }\n\n    td {\n      padding: 0;\n\n      svg {\n        vertical-align: -0.3rem;\n      }\n    }\n  }\n\n  .info-tooltip {\n    position: relative;\n\n    .arrow {\n      fill: var(--button-primary-default);\n      margin-left: -20px;\n      margin-top: -2rem;\n      padding: 0;\n      position: absolute;\n    }\n\n    .tooltip-popup {\n      --tooltip-offset: 0;\n      background-color: var(--button-primary-default);\n      border-radius: var(--border-radius);\n      color: var(--observatory-inverse-color-secondary);\n      left: 50%;\n      margin-top: 2rem;\n      max-width: min(100vw, 20rem);\n      padding: 1.5rem;\n      position: absolute;\n      text-align: center;\n      top: 100%;\n      transform: translateX(var(--tooltip-offset));\n      visibility: hidden;\n      width: max-content;\n      z-index: 1;\n    }\n\n    &:hover,\n    &:focus {\n      .tooltip-popup {\n        visibility: visible;\n      }\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.observatory {\n  svg.chart {\n    background-color: var(--background-primary);\n    border-radius: var(--border-radius);\n\n    .tick text {\n      fill: var(--observatory-color-secondary);\n      font-family: var(--font-body);\n      font-size: 1rem;\n      font-weight: 300;\n      transform: scale(1);\n\n      &.x-labels {\n        text-anchor: middle;\n\n        &.current {\n          fill: var(--grade-border);\n        }\n      }\n\n      &.y-labels {\n        text-anchor: end;\n      }\n    }\n\n    .tick line {\n      color: var(--observatory-color-secondary);\n      opacity: 0.9;\n      stroke: var(--observatory-border);\n      stroke-dasharray: 5, 5;\n      stroke-width: 1px;\n    }\n\n    .bar {\n      fill: var(--grade-bg);\n      stroke: var(--grade-bg);\n      stroke-width: 1;\n\n      &.current-grade {\n        stroke: var(--grade-border);\n      }\n    }\n\n    .you-are-here {\n      polyline {\n        fill: var(--background-primary);\n        filter: drop-shadow(0 0 3px rgb(170 170 170));\n        z-index: 9;\n      }\n\n      text {\n        fill: var(--text-primary);\n        font-family: var(--font-body);\n        font-size: 0.85rem;\n        font-weight: 300;\n      }\n    }\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.observatory-results {\n  .sidebar {\n    grid-area: sidebar;\n    padding-top: 0;\n\n    .place {\n      display: flex;\n    }\n  }\n\n  h2::before {\n    background-color: var(--observatory-color);\n    content: \"\";\n    display: inline-block;\n    mask-position: left;\n    mask-repeat: no-repeat;\n    mask-size: contain;\n  }\n\n  h2.summary::before {\n    height: 1.4rem;\n    mask-image: url(\"../../public/assets/observatory/summary-icon.svg\");\n    width: 2rem;\n  }\n\n  h2.result::before {\n    height: 1.2rem;\n    mask-image: url(\"../../public/assets/observatory/results-icon.svg\");\n    width: 2rem;\n  }\n\n  h2.summary .host {\n    font-weight: initial;\n  }\n\n  .heading-and-actions {\n    align-items: start;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1.5rem;\n    justify-content: space-between;\n    margin-bottom: 3rem;\n\n    h1 {\n      align-self: flex-start;\n    }\n\n    .actions {\n      align-self: center;\n    }\n  }\n\n  h1 {\n    letter-spacing: var(--heading-letter-spacing);\n    margin-bottom: unset;\n  }\n\n  h2 {\n    font-size: 1.375rem;\n    font-weight: 600;\n    letter-spacing: var(--heading-letter-spacing);\n    margin-bottom: 1rem;\n    margin-top: 1.5rem;\n  }\n\n  p {\n    font-weight: 400;\n    letter-spacing: -0.03rem;\n  }\n\n  code {\n    font-weight: 600;\n  }\n\n  .arrow-down {\n    color: var(--observatory-arrow-down-color);\n  }\n\n  .arrow-up {\n    color: var(--observatory-arrow-up-color);\n  }\n\n  .grade-trend {\n    grid-area: grade;\n    justify-self: start;\n\n    .trend {\n      color: var(--observatory-color-secondary);\n      font-weight: 400;\n      margin-top: 1rem;\n    }\n  }\n\n  .scan-results {\n    .footnote {\n      font-size: var(--type-smaller-font-size);\n      margin-top: 1rem;\n    }\n\n    .detail-header {\n      display: flex;\n      gap: 0.5rem;\n      padding: 0 1.5rem 0 0;\n\n      .arrow {\n        color: var(--observatory-color-secondary);\n      }\n\n      .detail-header-title {\n        font-weight: 600;\n        padding-right: 0.2rem;\n      }\n\n      p {\n        margin: 1rem 0;\n      }\n    }\n\n    .iso-date {\n      code {\n        font-weight: initial;\n      }\n    }\n\n    .humanized-duration {\n      font-size: var(--type-smaller-font-size);\n    }\n\n    table {\n      background: var(--observatory-table-bg);\n      border: none;\n      min-width: calc($screen-lg - 2rem - 12rem);\n\n      th {\n        background: var(--observatory-table-header-bg);\n        color: var(--text-secondary);\n        font-weight: 500;\n        vertical-align: top;\n      }\n\n      tr:nth-child(odd) {\n        background-color: var(--observatory-table-bg-alternate);\n      }\n\n      td {\n        overflow-wrap: anywhere;\n        padding: 0.5rem 1.5rem;\n        vertical-align: top;\n\n        &.cookie-name:first-child {\n          max-width: 15rem;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        &.score > span {\n          display: flex;\n          flex-direction: row;\n          justify-content: space-between;\n        }\n      }\n\n      a {\n        color: var(--observatory-color);\n        text-decoration: underline;\n        text-decoration-color: var(--observatory-color-secondary);\n\n        &:hover,\n        &:active {\n          text-decoration: none;\n        }\n      }\n\n      span.not-counted {\n        color: var(--observatory-color-secondary);\n\n        a {\n          text-decoration: none;\n        }\n      }\n\n      // Some column width hints on the different result table.\n      &.tests {\n        th,\n        td {\n          &:first-of-type {\n            width: 25%;\n          }\n        }\n\n        td.score {\n          white-space: nowrap;\n        }\n      }\n\n      &.csp {\n        th,\n        td {\n          &:first-of-type {\n            width: 45%;\n          }\n        }\n      }\n\n      &.headers {\n        th,\n        td {\n          &:first-of-type {\n            width: 30%;\n          }\n        }\n      }\n\n      &.cookies {\n        th,\n        td {\n          &:nth-of-type(n + 3) {\n            text-align: center;\n          }\n        }\n      }\n\n      th,\n      td {\n        border: none;\n        padding: 1.5rem;\n\n        :first-child {\n          margin-top: 0;\n        }\n\n        :last-child {\n          margin-bottom: 0;\n        }\n      }\n\n      .icon {\n        height: 1.3rem;\n        width: 1.3rem;\n      }\n\n      @media (max-width: #{$screen-sm - 0.02}) {\n        td {\n          .iso-date {\n            code {\n              font-size: x-small;\n            }\n          }\n        }\n      }\n\n      @media (max-width: #{$screen-lg - 0.02}) {\n        // responsive table\n        min-width: 0;\n\n        thead {\n          display: none;\n        }\n\n        tbody {\n          display: block;\n        }\n\n        tr {\n          display: grid;\n          grid-template-columns: max-content auto;\n        }\n\n        tr:nth-of-type(odd) {\n          background: var(--observatory-table-header-bg);\n        }\n\n        td {\n          column-gap: 2em;\n          display: grid;\n          grid-auto-flow: column;\n          grid-column: span 2;\n          grid-template-columns: subgrid;\n\n          .humanized-duration {\n            display: none;\n          }\n        }\n\n        td:before {\n          content: attr(data-header);\n          display: inline;\n          font-weight: 600;\n        }\n\n        &.tests,\n        &.csp,\n        &.headers,\n        &.cookies {\n          td:first-of-type {\n            width: auto;\n          }\n        }\n\n        td:not(:last-of-type) {\n          padding-bottom: 0;\n        }\n\n        td:nth-of-type(n + 2) {\n          padding-top: 0.75rem;\n        }\n\n        &.cookies {\n          td:nth-of-type(n + 3) {\n            text-align: left;\n          }\n        }\n\n        td.score {\n          display: grid;\n\n          > span {\n            display: block;\n          }\n\n          .obs-pass-icon {\n            display: inline-block;\n            height: 1.5em;\n            vertical-align: top;\n          }\n        }\n      }\n    }\n\n    input[type=\"radio\"]:not(:checked) ~ .tab-content {\n      display: none;\n    }\n\n    ol.tabs-list {\n      column-gap: 3rem;\n      display: grid;\n      grid-template-areas:\n        \"tab-0 tab-1 tab-2 tab-3 tab-4 tab-5 .\"\n        \"hr    hr    hr    hr    hr    hr    hr \"\n        \"mod   mod   mod   mod   mod   mod   mod\";\n      grid-template-columns: repeat(6, max-content) 1fr;\n      margin: 0;\n      overflow-x: auto;\n      overscroll-behavior-x: none;\n      padding: 0;\n\n      @media (max-width: #{$screen-lg - 0.02}) {\n        column-gap: 1.75rem;\n        grid-template-columns: repeat(6, max-content) auto;\n      }\n\n      &::before {\n        border: none;\n        border-top: 1px solid var(--observatory-border);\n        content: \"\";\n        grid-area: hr;\n        margin: 0;\n        width: 100%;\n      }\n\n      li.tabs-list-item {\n        display: contents;\n\n        > input:checked + label {\n          border-bottom: 2px solid var(--observatory-accent);\n          color: var(--text-primary);\n        }\n\n        > input:not(:checked) + label:hover {\n          border-bottom: 2px solid var(--observatory-accent-light);\n          color: var(--text-primary);\n        }\n\n        > input:checked:focus-visible + label {\n          outline-color: var(--accent-primary);\n          outline-offset: 1px;\n          outline-style: auto;\n        }\n\n        > input:not(:checked) + label {\n          color: var(--text-secondary);\n          opacity: 0.775;\n        }\n\n        > label {\n          cursor: pointer;\n          height: 2.2rem;\n          width: max-content;\n        }\n\n        &#tabs-0 {\n          > label,\n          > input {\n            grid-area: tab-0;\n          }\n        }\n\n        &#tabs-1 {\n          > label,\n          > input {\n            grid-area: tab-1;\n          }\n        }\n\n        &#tabs-2 {\n          > label,\n          > input {\n            grid-area: tab-2;\n          }\n        }\n\n        &#tabs-3 {\n          > label,\n          > input {\n            grid-area: tab-3;\n          }\n        }\n\n        &#tabs-4 {\n          > label,\n          > input {\n            grid-area: tab-4;\n          }\n        }\n\n        &#tabs-5 {\n          > label,\n          > input {\n            grid-area: tab-5;\n          }\n        }\n\n        > section.tab-content {\n          grid-area: mod;\n          left: 0;\n          margin: 0;\n          position: sticky;\n\n          @media (max-width: #{$screen-lg - 0.02}) {\n            width: calc(\n              100vw - 12rem - 3rem\n            ); // 12rem: placement width; 3rem: padding\n          }\n          @media (max-width: #{$screen-md - 0.02}) {\n            width: calc(100vw - 2rem); // 2rem: padding\n          }\n        }\n      }\n    }\n  }\n\n  section.scan-rescan {\n    background-color: var(--background-primary);\n    border-radius: var(--border-radius);\n    justify-content: space-between;\n    margin-bottom: 3rem;\n    max-width: var(--max-width);\n    padding: var(--spacing);\n  }\n\n  section.scan-result {\n    background-color: var(--background-primary);\n    border-radius: var(--border-radius);\n    column-gap: var(--spacing);\n    display: grid;\n    grid-template-areas: \"grade data actions\";\n    grid-template-columns: auto 1fr auto;\n    justify-content: space-between;\n    margin-bottom: 3rem;\n    max-width: var(--max-width);\n    padding: var(--spacing);\n\n    .progress {\n      border-radius: 50%;\n      display: block;\n      height: 0.8rem;\n      width: 0.8rem;\n    }\n\n    a {\n      color: var(--observatory-color);\n      text-decoration: none;\n    }\n\n    a:hover {\n      text-decoration: underline;\n      text-decoration-color: var(--observatory-color-secondary);\n    }\n\n    .scan-another {\n      font-size: var(--type-smaller-font-size);\n      font-weight: 400;\n      margin-top: 1.2rem;\n\n      a {\n        color: var(--observatory-color-secondary);\n\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n    }\n\n    .label {\n      font-weight: 600;\n    }\n\n    .actions {\n      grid-area: actions;\n\n      .button-wrap {\n        width: 9rem;\n      }\n    }\n\n    .data {\n      grid-area: data;\n    }\n\n    @media (max-width: #{$screen-xl - 1}) {\n      align-items: flex-start;\n      grid-template-areas: \"grade data actions\";\n      grid-template-columns: auto 1fr auto;\n      justify-content: space-between;\n      row-gap: calc(var(--spacing) / 2);\n\n      .data {\n        align-self: start;\n      }\n    }\n\n    @media (max-width: #{$screen-lg - 1}) {\n      grid-template-areas: \"grade data\" \". actions\";\n      grid-template-columns: min-content 1fr;\n    }\n\n    @media (max-width: #{$screen-md - 1}) {\n      padding: calc(var(--spacing) / 2);\n    }\n  }\n\n  .grade {\n    background: var(--grade-bg);\n    border: 1px solid var(--grade-border);\n    border-radius: 0.2em;\n    color: var(--grade-border);\n    display: inline-block;\n    font-size: 1.7rem;\n    font-weight: 600;\n    height: 5rem;\n    line-height: 5rem;\n    text-align: center;\n    width: 5rem;\n  }\n\n  .grade-a {\n    --grade-bg: var(--observatory-grade-a-bg);\n    --grade-border: var(--observatory-grade-a-border);\n  }\n\n  .grade-b {\n    --grade-bg: var(--observatory-grade-b-bg);\n    --grade-border: var(--observatory-grade-b-border);\n  }\n\n  .grade-c {\n    --grade-bg: var(--observatory-grade-c-bg);\n    --grade-border: var(--observatory-grade-c-border);\n  }\n\n  .grade-d {\n    --grade-bg: var(--observatory-grade-d-bg);\n    --grade-border: var(--observatory-grade-d-border);\n  }\n\n  .grade-f {\n    --grade-bg: var(--observatory-grade-f-bg);\n    --grade-border: var(--observatory-grade-f-border);\n  }\n}\n","@use \"../ui/vars\" as *;\n\n.observatory {\n  --border-radius: 0.3rem;\n  --code-background-block: var(--observatory-bg-code);\n  --spacing: 2rem;\n  background-color: var(--observatory-bg);\n\n  h1,\n  h2 {\n    font-style: normal;\n    font-weight: 600;\n    letter-spacing: var(--heading-letter-spacing);\n  }\n\n  .obs-none {\n    color: var(--observatory-color-secondary);\n  }\n\n  .obs-score-value {\n    margin-right: 0.5rem;\n  }\n\n  .obs-pass-icon {\n    svg.pass {\n      path {\n        fill: var(--observatory-pass-icon-bg);\n      }\n\n      circle {\n        fill: var(--observatory-pass-icon-color);\n      }\n    }\n\n    svg.fail {\n      path {\n        fill: var(--observatory-fail-icon-bg);\n      }\n\n      circle {\n        fill: var(--observatory-fail-icon-color);\n      }\n    }\n  }\n\n  .accent {\n    color: var(--observatory-accent);\n  }\n\n  .observatory-wrapper {\n    display: grid;\n    grid-template-areas: \"header header header\" \"main main main\" \". sidebar .\";\n    grid-template-columns: 1rem 1fr 1rem;\n    max-width: var(--max-width);\n    padding: 1.5rem 1rem;\n\n    section.header {\n      grid-area: header;\n    }\n\n    section.main {\n      grid-area: main;\n    }\n\n    a {\n      color: var(--observatory-color);\n      text-decoration: underline;\n      text-decoration-color: var(--observatory-color-secondary);\n\n      &:hover,\n      &:active {\n        text-decoration: none;\n      }\n    }\n\n    .feedback-link {\n      --feedback-link-icon: var(--observatory-color-secondary);\n      --text-link: var(--observatory-color-secondary);\n      color: var(--observatory-color-secondary);\n      display: block;\n      font-size: var(--type-tiny-font-size);\n      margin-top: 1.5rem;\n    }\n\n    .feedback-link.faq-link::before {\n      mask-image: url(\"../assets/icons/message-question.svg\");\n    }\n\n    .error {\n      color: var(--form-invalid-color);\n      margin-top: 0.5rem;\n\n      &::before {\n        background-color: var(--form-invalid-color);\n        content: \"\";\n        display: inline-block;\n        height: 1.15rem;\n        margin-bottom: 0.25rem;\n        margin-right: 0.5rem;\n        mask-image: url(\"../assets/icons/alert-circle.svg\");\n        mask-position: center;\n        mask-repeat: no-repeat;\n        vertical-align: middle;\n        width: 1.5em;\n      }\n\n      + form input {\n        outline-color: var(--observatory-border-accent);\n      }\n    }\n\n    @media (min-width: $screen-md) {\n      column-gap: 1rem;\n      grid-template-areas: \"header sidebar\" \"main sidebar\";\n      grid-template-columns: minmax(0, 1fr) 12rem;\n      padding-left: 1rem;\n      padding-right: 1rem;\n\n      section.header,\n      section.main {\n        padding: 0;\n      }\n    }\n\n    @media (min-width: $screen-xl) {\n      column-gap: 3rem;\n      grid-template-areas: \"header sidebar\" \"main sidebar\";\n      grid-template-columns: 2fr minmax(0, 200px);\n    }\n  }\n\n  .scroll-container {\n    margin-bottom: 1.5rem;\n    margin-top: 0.8rem;\n    overflow-x: auto;\n    overscroll-behavior-x: none;\n  }\n}\n"],"names":[],"sourceRoot":""}