html body {
  font-family: var(--bb-body);
  --body-bg-color: var(--bb-wash);
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(#11201b0e 1px, #0000 1px), linear-gradient(90deg, #11201b0e 1px, #0000 1px);
  background-size: 96px 32px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(70% 80% at 20% 0, #000 20%, #0000 75%);
  mask-image: radial-gradient(70% 80% at 20% 0, #000 20%, #0000 75%);
}

body {
  --bb-ink: #11201b;
  --bb-ink-2: #1a2e27;
  --bb-muted: #56645e;
  --bb-wash: #f3f6f2;
  --bb-line: #dfe6e0;
  --bb-card-line: #d3ddd6;
  --bb-lime: #9f0;
  --bb-lime-wash: #effcdc;
  --bb-lime-ink: #3f7a0a;
  --bb-lime-ink-2: #176b2e;
  --bb-link: #0369b4;
  --bb-sky: #00b3fe;
  --bb-amber: #92400e;
  --bb-amber-wash: #fdf1de;
  --bb-rose: #b3261e;
  --bb-rose-wash: #fbe9e8;
  --bb-display: "Schibsted Grotesk",
    "Inter",
    ui-sans-serif,
    system-ui,
    sans-serif;
  --bb-body: "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  --bb-mono: "Geist Mono",
    ui-monospace,
    "SFMono-Regular",
    Menlo,
    Consolas,
    monospace;
  --aaqt-focus-ring-color: var(--bb-link);
  --aaqt-focus-ring-width: 3px;
  --aaqt-focus-ring-offset: 4px;
  --bux-input-padding: .7rem .9rem;
  --bux-input-select-padding: .7rem 2.4rem .7rem .9rem;
  --bux-input-bg: #fff;
  --bux-input-border-color: var(--bb-card-line);
  --bux-input-border-radius: 8px;
  --bux-input-box-shadow: none;
  --bux-input-invalid-bg: #ffb6c1;
  --bux-input-invalid-border-color: red;
  --bux-input-label-font-family: var(--bb-mono);
  --bux-input-label-font-size: 11px;
  --bux-input-label-letter-spacing: .07em;
  --bux-input-label-text-transform: uppercase;
  --bux-input-label-color: var(--bb-muted);
  --bux-input-label-margin-bottom: .5rem;
  --bux-input-label-font-weight: bold;
  --bux-insight-deck-icon-color: var(--bb-lime-ink);
  --bux-insight-deck-label-font-family: var(--bb-mono);

  & h1, & h2, & h3, & h4, & h5, & h6 {
    font-family: var(--bb-display);
  }

  & a {
    color: var(--bb-link);
    text-decoration: none;

    &:hover {
      color: var(--bb-link);
      text-decoration: underline;
      text-decoration-color: var(--bb-lime);
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }
  }

  & code, & bux-display-date-time {
    display: inline;
    font-family: var(--bb-mono);
    font-size: .875rem;
    color: var(--bb-muted);
  }

  & p#footer-copyright {
    font-family: var(--bb-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bb-muted);

    & small {
      font-size: inherit;
    }
  }

  & legend {
    font-family: var(--bux-input-label-font-family);
    font-size: var(--bux-input-label-font-size);
    letter-spacing: var(--bux-input-label-letter-spacing);
    text-transform: var(--bux-input-label-text-transform);
    color: var(--bux-input-label-color);
    margin-bottom: var(--bux-input-label-margin-bottom);
    font-weight: var(--bux-input-label-font-weight);
    display: inline-block;
  }

  & select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23666666' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: .75em;
  }

  & bux-chip {
    font-family: var(--bb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
    padding: .35em .7em;
    border-radius: 99px;

    &[color="primary"] {
      background: #e6f2fa;
      color: var(--bb-link);
    }

    &[color="secondary"] {
      background: var(--bb-wash);
      color: var(--bb-muted);
    }

    &[color="success"] {
      background: var(--bb-lime-wash);
      color: var(--bb-lime-ink-2);
    }

    &[color="info"] {
      background: #e6f2fa;
      color: var(--bb-link);
    }

    &[color="warning"] {
      background: var(--bb-amber-wash);
      color: var(--bb-amber);
    }

    &[color="danger"] {
      background: var(--bb-rose-wash);
      color: var(--bb-rose);
    }

    & > .x-chip-text {
      line-height: inherit;
      margin-block: 0;
    }
  }

  & a.btn:hover, & a.x-chip-link:hover {
    text-decoration: none;
  }

  & a.btn:hover {
    color: var(--bux-btn-color);
  }

  & alert {
    &.primary, &.info {
      background-color: #e6f2fa;
      border-color: #c7e2f2;
      color: #0a3f66;

      & a {
        color: #084298;
      }
    }

    &.success {
      background-color: var(--bb-lime-wash);
      border-color: #cdeea6;
      color: #2c5807;

      & a {
        color: #0f5132;
      }
    }

    &.warning {
      background-color: var(--bb-amber-wash);
      border-color: #f2ddba;
      color: var(--bb-amber);

      & a {
        color: #664d03;
      }
    }

    &.danger {
      background-color: var(--bb-rose-wash);
      border-color: #f3ccca;
      color: var(--bb-rose);

      & a {
        color: #842029;
      }
    }
  }

  & panel {
    border-radius: 1.15rem;
    margin-bottom: 1.25rem;
    border-color: var(--bb-card-line);

    & > :is(header, bux-header) {
      padding: 1.25rem 1.5rem;
      border-radius: calc(1.15rem - 1px) calc(1.15rem - 1px) 0 0;
      border-bottom: 1px solid var(--bb-line);
      background-color: #fff;

      & h5, & h4, & h2 {
        font-family: var(--bb-display);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--bb-ink);
        margin-bottom: .35rem;

        &:last-child {
          margin-bottom: 0;
        }
      }

      & p, & text-wrapper > p {
        color: var(--bb-muted);
      }
    }

    & > content {
      padding: 1.5rem;

      & p {
        color: #666;
      }

      & alert p {
        color: inherit;
      }
    }

    & > footer {
      background-color: var(--bb-wash);
      border-top: 1px solid var(--bb-line);
      border-radius: 0 0 calc(1.15rem - 1px) calc(1.15rem - 1px);
      padding: 1rem 1.5rem;
    }
  }

  & panel.data-panel > header, & insight-deck panel > header {
    border-bottom: 1px solid var(--bb-line) !important;
    padding-top: 1.25rem !important;
  }

  & insight-deck panel > header > div, & panel.data-panel > header > text-wrapper {
    & h5 {
      font-family: var(--bb-display);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--bb-ink);
      margin-bottom: .35rem;

      &:last-child {
        margin-bottom: 0;
      }
    }

    & p {
      color: var(--bb-muted);
    }
  }

  & insight-intro {
    & panel {
      & content {
        & h1 {
          font-size: 24px;
          font-weight: 700;
          letter-spacing: -.025em;
        }
      }
    }
  }

  & insight-deck dl dt > span {
    font-family: var(--bb-body);
  }

  & button, & a.btn {
    --bux-btn-color: var(--bb-ink);
    --bux-btn-bg: #fff;
    --bux-btn-border-color: #c9d3cc;
    font-family: var(--bb-body);
    font-size: 15px;
    font-weight: 600;
    padding: .55rem 1rem;

    &.lg {
      font-size: 16px;
      padding: .8rem 1.4rem;
    }

    &.sm {
      font-size: 13.5px;
      padding: .35rem .75rem;
    }

    &.xs {
      font-size: 12px;
      padding: .2rem .5rem;
    }
  }

  & button:hover, & a.btn:hover {
    --bux-btn-bg: #fff;
    --bux-btn-border-color: var(--bb-ink);
    background-color: var(--bux-btn-bg);
    border-color: var(--bux-btn-border-color);
  }

  & button.primary, & a.btn.primary {
    --bux-btn-color: #fff;
    --bux-btn-bg: var(--bb-ink);
    --bux-btn-border-color: var(--bb-ink);
  }

  & button.primary:hover, & a.btn.primary:hover {
    --bux-btn-bg: var(--bb-ink-2);
    --bux-btn-border-color: var(--bb-ink-2);
    background-color: var(--bux-btn-bg);
    border-color: var(--bux-btn-border-color);
  }

  & button.success, & a.btn.success {
    --bux-btn-color: var(--bb-ink);
    --bux-btn-bg: var(--bb-lime);
    --bux-btn-border-color: var(--bb-lime);
  }

  & button.success:hover, & a.btn.success:hover {
    --bux-btn-bg: #b4ff4a;
    --bux-btn-border-color: #b4ff4a;
    background-color: var(--bux-btn-bg);
    border-color: var(--bux-btn-border-color);
  }

  & filter-actions :is(button, a.btn) {
    font-size: 1rem;
    line-height: 1.5;
    padding-top: .7rem;
    padding-bottom: .7rem;
  }

  & bux-component-detail-table filter-fields > filter-actions {
    padding-bottom: 0;
    margin-bottom: 1rem;
  }

  & button.intuit, & a.btn.intuit {
    --bux-btn-color: #fff;
    --bux-btn-bg: #2ca01c;
    --bux-btn-border-color: #2ca01c;
  }

  & button.intuit:hover, & a.btn.intuit:hover {
    --bux-btn-bg: #2ca01c;
    --bux-btn-border-color: #2ca01c;
    background-color: var(--bux-btn-bg);
    border-color: var(--bux-btn-border-color);
  }

  & button.primary:focus-visible, & a.btn.primary:focus-visible, & button.success:focus-visible, & a.btn.success:focus-visible, & button.intuit:focus-visible, & a.btn.intuit:focus-visible {
    color: var(--bux-btn-color);
    background-color: var(--bux-btn-bg);
    border-color: var(--bux-btn-border-color);
  }

  & button:disabled:hover, & a.btn.disabled:hover {
    border-color: #c9d3cc;
  }

  & button.primary:disabled:hover, & a.btn.primary.disabled:hover {
    background-color: var(--bb-ink);
    border-color: var(--bb-ink);
  }

  & button.success:disabled:hover, & a.btn.success.disabled:hover {
    background-color: var(--bb-lime);
    border-color: var(--bb-lime);
  }
}

html:root {
  & :focus-visible, & button:focus-visible, & a.btn:focus-visible {
    outline: var(--aaqt-focus-ring-width) solid var(--aaqt-focus-ring-color);
    outline-offset: var(--aaqt-focus-ring-offset);
  }

  & button:focus-visible, & a.btn:focus-visible {
    box-shadow: none;
  }

  & table-wrapper.data-list {
    & table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid var(--bb-line);
      border-radius: 12px;

      & thead tr:first-child th:first-child {
        border-top-left-radius: 12px;
      }

      & thead tr:first-child th:last-child {
        border-top-right-radius: 12px;
      }

      & tbody tr:last-child td:first-child {
        border-bottom-left-radius: 12px;
      }

      & tbody tr:last-child td:last-child {
        border-bottom-right-radius: 12px;
      }

      & thead {
        & tr {
          & th {
            font-family: var(--bb-mono);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: var(--bb-muted);
            background-color: var(--bb-wash);
            border-bottom: 2px solid var(--bb-ink);
            padding: .7rem 1rem;
            vertical-align: middle;
          }

          & th:last-child {
            text-align: left;
          }
        }
      }

      & tbody {
        & tr {
          & th, & td {
            vertical-align: middle;
            font-size: 15px;
          }

          & td:last-child {
            text-align: left;
          }

          &:last-child {
            & th, & td {
              border-bottom: none;
            }
          }

          &:hover {
            background-color: #f3fff4;
          }
        }

        & a:not(.btn) {
          color: var(--bb-link);
          font-weight: 500;
        }
      }

      @container content-container (width >= 768px) {
        & tbody {
          & tr {
            & th, & td {
              padding: .85rem 1rem;
            }

            & td:first-child {
              padding-top: .85rem;
            }

            & td:last-child {
              padding-bottom: .85rem;
            }
          }
        }
      }
    }
  }
}

bux-chip {
  --x-chip-h: 210;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  padding: .25rem .5rem;
  border: 1px solid #0000;
  border-radius: .5rem;
  background-clip: border-box;
  font-size: .8rem;
  line-height: 1;
  vertical-align: middle;
  box-sizing: border-box;

  &[color="hash"], &:not([color]) {
    border-color: hsl(var(--x-chip-h) 40% 78%);
    background: hsl(var(--x-chip-h) 55% 92%);
    color: hsl(var(--x-chip-h) 45% 28%);
  }

  &[color="inherit"] {
    border-color: var(--bux-chip-border-color, currentColor);
    background: var(--bux-chip-bg-color, transparent);
  }

  &[color="primary"] {
    background: var(--bux-color-primary);
    color: #fff;
  }

  &[color="secondary"] {
    background: var(--bux-color-secondary);
    color: #fff;
  }

  &[color="success"] {
    background: var(--bux-color-success);
    color: #fff;
  }

  &[color="info"] {
    background: var(--bux-color-info);
    color: #212529;
  }

  &[color="warning"] {
    background: var(--bux-color-warning);
    color: #212529;
  }

  &[color="danger"] {
    background: var(--bux-color-danger);
    color: #fff;
  }

  & > .x-chip-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    margin-block: -.125em;
  }

  & > button.x-chip-remove {
    flex: none;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: .8rem;
    line-height: 1;
    display: inline-flex;
  }
}

a.x-chip-link {
  text-decoration: none;
  color: inherit;

  &:hover > bux-chip {
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent);
  }
}