/*
-----
GLOBAL STYLES
-----
*/

:root {
  /* colors */
  --color-accent-1: hsl(25, 100%, 50%);
  --color-accent-1-lighter: hsl(25, 100%, 97%);
  --color-accent-2: hsl(339, 67%, 38%);
  --color-accent-2-lighter: hsl(339, 67%, 97%);
  --color-accent-3-raw: 187, 54%, 70%;
  --color-accent-3: hsl(var(--color-accent-3-raw));
  --color-accent-3-lighter: hsl(187, 54%, 97%);
  --color-accent-3-darker: hsl(187, 100%, 28%);

  --color-dark-1: hsl(105, 4%, 22%);
  --color-dark-2: hsl(267, 57%, 15%);

  --color-light-1: hsl(0, 0%, 100%);
  --color-light-2: hsl(216, 29%, 97%);

  /* color uses */
  --color-text-1: var(--color-dark-1);
  --color-text-2: var(--color-dark-2);

  --color-text-inverse-1: var(--color-light-1);

  --color-bg-1: var(--color-light-1);
  --color-bg-2: var(--color-light-2);

  --color-positive: var(--color-accent-3);
  --color-negative: var(--color-accent-2);
  --color-warning: var(--color-accent-1);

  --color-namespace: var(--color-accent-2);
  --color-namespace-light: var(--color-accent-2-lighter);
  --color-deployment: var(--color-accent-1);
  --color-deployment-light: var(--color-accent-1-lighter);
  --color-container: var(--color-accent-3);
  --color-container-light: var(--color-accent-3-lighter);

  /* gaps/spacing */
  --gap--2: 5px;
  --gap--1: var(--step--1);
  --gap-0: var(--step-0);
  --gap-1: var(--step-1);
  --gap-2: var(--step-2);
  --gap-3: var(--step-3);
  --gap-4: var(--step-4);
  --gap-5: var(--step-5);

  /* misc */
  --box-shadow-dimensions: 0 1.25rem 3.4375rem 0;
  --scale: 1.1;
  --transition: all 250ms ease;
}

html {
  background: var(--color-bg-1);
  color: var(--color-text-1);
  font-family: "Muli", Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
}

body {
  accent-color: var(--color-accent-2);
}

/*
-----
ELEMENTS
-----
*/

a,
a:link,
a:visited {
  color: var(--color-text-2);
  text-decoration: none;
}

a:focus,
a:hover,
a:active {
  text-decoration: underline;
}

a.--link-1,
a.--link-1:link,
a.--link-1:visited {
  color: var(--color-accent-2);
  text-decoration: underline;
}

a.--link-1:focus,
a.--link-1:hover,
a.--link-1:active {
  text-decoration: none;
}

abbr {
  text-decoration-color: var(--color-accent-3);
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

blockquote > cite {
  display: block;
  margin-top: var(--gap-0);
  text-align: right;
}

dd {
  margin: var(--gap-0);
}

dl {
  display: grid;
  grid-gap: var(--gap-3);
  grid-template-columns: repeat(auto-fill, 45ch);
  justify-content: space-evenly;
}

dl > .dl-entry {
  border: 2px solid var(--color-accent-2);
}

dl a {
  color: var(--color-accent-3);
}

dt {
  background: var(--color-accent-2);
  color: var(--color-text-inverse-1);
  font-weight: bold;
  padding: var(--gap--2);
}

dt::after {
  content: ":";
}

footer {
  font-size: var(--step--1);
  background: var(--color-bg-2);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

h1 {
  color: var(--color-text-2);
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

h5 {
  font-size: var(--step-1);
}

h6 {
  font-size: var(--step-0);
}

[hidden] {
  display: none !important;
}

i.error {
  color: var(--color-negative);
}

i.success {
  color: var(--color-positive);
}

i.warning {
  color: var(--color-warning);
}

img.logo {
  margin-right: auto;
  margin-left: auto;
  max-height: var(--step-5);
  object-fit: contain;
}

img.logo--secondary {
  max-height: var(--step-3);
}

main {
  padding: var(--gap-5) var(--gap-0);
}

nav > ul {
  padding: 0;
}

nav > ul li + li {
  margin-top: var(--gap-1);
}

pre {
  border: 1px solid var(--color-accent-3);
  border-radius: var(--gap-0);
}

ul[role="list"] {
  /*
    role="list" is required in the html for accessibility
    when removing list styles,
    see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
    */
  list-style: none;
}

ul.navList li {
  border-bottom: 1px solid var(--color-accent-3);
  padding-bottom: var(--gap-0);
}

td {
  padding: 0;
}

th {
  padding: 0;
}

th[scope="row"] {
  padding-right: var(--cellspacing);
  text-align: right;
}

table {
  --cellspacing: var(--gap--1);

  border-spacing: var(--cellspacing);
}

/*
-----
COMPONENTS
-----
*/

.badge {
  background: var(--color-accent-2);
  color: var(--color-bg-1);
  display: block;
  font-size: var(--step--1);
  font-weight: normal;
  margin-bottom: var(--gap--2);
  max-width: max-content;
  padding: var(--gap--2);
  text-transform: uppercase;
}

.buttonLink {
  border: 1px solid var(--color-accent-3);
  border-radius: 999em;
  display: block;
  padding: var(--gap-0);
  text-decoration: none;
  transition: var(--transition);
}

.buttonLink.--withIcon {
  align-items: center;
  display: grid;
  grid-gap: var(--gap--1);
  grid-template-columns: 1fr auto;
}

.buttonLink:focus,
.buttonLink:hover,
.buttonLink:active {
  background: var(--color-dark-2);
  box-shadow: var(--box-shadow-dimensions) hsla(var(--color-accent-3-raw), 0.3);
  color: var(--color-light-2);
  text-decoration: none;
  transform: scale(var(--scale));
}

@media (prefers-reduced-motion) {
  .buttonLink:focus,
  .buttonLink:hover,
  .buttonLink:active {
    transform: none;
  }
}

.callout {
  background: var(--color-bg-2);
  border: 1px solid var(--color-accent-3);
  border-radius: var(--gap-0);
  padding: var(--gap-0);
}

.compTable td:first-of-type,
.compTable th[scope="col"]:first-of-type {
  text-align: right;
}

.controls {
  border-block-end: 2px solid var(--color-accent-2);
  margin-block: var(--gap-0);
  padding-block-end: var(--gap-0);
}

.control-block input {
  display: block;
  inline-size: min(30ch, 100%);
  margin-block: var(--gap--2);
}

.control-block .control-block__description {
  display: inline;
}

.detailBadge {
  margin-left: calc(-1 * var(--gap-detail, var(--gap-0)));
}

.detailBadge.--namespace {
  background: var(--color-namespace);
  color: var(--color-bg-1);
}

.detailBadge.--deployment {
  background: var(--color-deployment);
  color: var(--color-text-2);
}

.detailBadge.--container {
  background: var(--color-container);
  color: var(--color-text-1);
}

.detailInfo:not(.--qos) {
  --gap-detail: var(--gap-0);

  border: 2px solid;
  margin-top: var(--gap-0);
  padding: 0 var(--gap-0) var(--gap-0) var(--gap-0);
}

.detailInfo.--container {
  background: var(--color-accent-3-lighter);
  border-color: var(--color-accent-3);
}

.detailInfo.--deployment {
  background: var(--color-accent-1-lighter);
  border-color: var(--color-accent-1);
}

.detailInfo.--empty {
  padding-top: var(--gap-0);
  border: none;
}

.detailInfo.--namespace {
  background: var(--color-accent-2-lighter);
  border-color: var(--color-accent-2);
}

.detailInfo.--qos {
  margin: var(--gap-0);
}

.detailLink.--namespace {
  color: var(--color-accent-2);
}

.layoutCluster {
  align-items: center;
  gap: var(--gap--2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.layoutCluster.--start {
  justify-content: start;
}

.layoutLineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.layoutSidebar {
  display: flex;
  flex-wrap: wrap;
}

.layoutSidebar .layoutSidebar__main {
  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-grow: 999;
  min-width: 75%;
}

.layoutSidebar .layoutSidebar__main > :not(footer) {
  flex-grow: 999;
}

.layoutSidebar .layoutSidebar__sidebar {
  background: var(--color-bg-2);
  flex-grow: 1;
  padding: var(--gap-5) var(--gap-0);
}

.layoutSidebar .layoutSidebar__sidebar > *:last-child {
  margin-bottom: var(--gap-0);
}

.layoutSidebar .layoutSidebar__sidebar > * + * {
  margin-top: var(--gap-3);
}

.linkIcon {
  align-items: center;
  display: grid;
  grid-gap: var(--gap-0);
  grid-template-columns: auto 1fr;
}

.logoSupport {
  text-align: center;
  white-space: nowrap;
}

.namespaceList {
  font-size: var(--step-1);
  display: grid;
  grid-gap: var(--gap-3);
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  margin: var(--gap-1);
}

.banner img {
  max-width: 750px;
  height: auto;
  object-fit: contain;
}

/*
-----
UTILITIES
-----
*/

body:not([data-javascript-available]) [data-javascript-required] {
  display: none;
}

.indent {
  margin-left: var(--gap-1);
}

.verticalRhythm > * {
  --gap-rhythm: var(--gap-0);
}

.verticalRhythm.--rhythm-3 > * {
  --gap-rhythm: var(--gap-3);
}

.verticalRhythm > *:not(summary):not(.visually-hidden) + * {
  margin-top: max(var(--gap-rhythm), 1em);
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.email-box {
  background: #4c415f;
  display: none;
  padding: 1.375rem 0.8125rem;
  width: 100%;
}

.email-box__toggle-title {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
}

.email-box__content p {
  color: #fff;
  padding: 0.75rem 0 1.5rem 0;
}

.email-box__email-label {
  display: block;
  position: relative;
}

.email-box__email-label span {
  color: #575757;
  font-weight: 400;
  left: 0;
  left: 0.5rem;
  position: absolute;
  top: 14%;
}

.email-box__email-input {
  background: #fff;
  border-radius: 0.25rem;
  border: 1px solid #d3d3d3;
  margin-bottom: 1rem;
  padding: 0.5rem;
  width: 71%;
}

#email-box__input-error {
  color: #ffd8d8;
  display: block;
  display: none;
  font-size: 1rem;
  padding-bottom: 0.5rem;
}

.email-box__email-input:focus-visible {
  outline: thick solid #4d90fe;
}

.email-box__checkbox-label {
  color: #fff;
  display: inline;
  font-size: 1rem;
}

#email-box__checkbox {
  accent-color: #dae0ec;
}

.email-box__privacy-wrapper {
  color: #fff;
  padding-bottom: 0 !important;
}

.email-box__privacy {
  color: #d7e4fe !important;
  text-decoration: underline !important;
}

.email-box__submit-btn {
  background-color: #baecf5;
  color: #454545;
  border-radius: 0.25rem;
  border: none;
  font-weight: 600;
  margin-top: 1rem;
  padding: 8px 24px;
}

.email-box__submit-btn:hover {
  cursor: pointer;
}

.email-box__submit-btn:focus-visible {
  outline: thick solid #4d90fe;
}

.api-token-box {
  background: #4c415f;
  display: none;
  padding: 1.375rem 0.8125rem;
  position: relative;
  width: 100%;
}

#api-token__disable-cost-settings {
  background: transparent;
  border: none;
  color: #cce8ec;
  position: absolute;
  right: 0.675rem;
  top: 1.25rem;
}

#api-token__disable-cost-settings:hover {
  cursor: pointer;
}

.api-token-box__toggle-title {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
}

.api-token-box__content p {
  color: #fff;
  padding: 0.75rem 0 1.5rem 0;
}

.api-token-box__api-token-label {
  display: block;
  position: relative;
}

.api-token-box__api-token-label span {
  color: #575757;
  font-weight: 400;
  left: 0;
  left: 0.5rem;
  position: absolute;
  top: 14%;
}

.api-token-box__api-token-input {
  background: #fff;
  border-radius: 0.25rem;
  border: 1px solid #d3d3d3;
  margin-bottom: 1rem;
  padding: 0.5rem;
  width: 71%;
}

#api-token-box__input-error {
  color: #ffd8d8;
  display: block;
  display: none;
  font-size: 1rem;
  padding-bottom: 0.5rem;
}

.api-token-box__api-token-input:focus-visible {
  outline: thick solid #4d90fe;
}

.api-token-box__submit-btn {
  background-color: #baecf5;
  color: #454545;
  border-radius: 0.25rem;
  border: none;
  font-weight: 600;
  margin-top: 1rem;
  padding: 8px 24px;
}

.api-token-box__submit-btn:hover {
  cursor: pointer;
}

.api-token-box__submit-btn:focus-visible {
  outline: thick solid #4d90fe;
}

.cost-settings-box {
  background: #fff;
  border: 1px solid #201238;
  display: none;
  padding: 1.375rem 0.8125rem;
  position: relative;
  width: 100%;
}

#cost-settings__disable-cost-settings {
  background: transparent;
  border: none;
  color: #445688;
  position: absolute;
  right: 0.675rem;
  top: 1.25rem;
}

#cost-settings__disable-cost-settings:hover {
  cursor: pointer;
}

.cost-settings-box__toggle-title {
  color: #201238;
  font-size: 1.125rem;
  font-weight: 1000;
}

.cost-settings-box__content p {
  color: #201238;
  font-size: 0.875rem;
  padding: 0.75rem 0 1.5rem 0;
}

.cost-settings-box__options-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 11.0625rem);
}

.cost-settings-box__options-container label {
  color: #201238;
  font-size: 1rem;
  font-weight: 700;
}

.cost-settings-box__select-container {
  position: relative;
}

.cost-settings-box__select-container img {
  height: 0.5rem;
  position: absolute;
  right: 0.75rem;
  top: 1.75rem;
  width: 0.5rem;
}

.cost-settings-box__options-container select {
  background: #201238;
  border-radius: 0.25rem;
  border: 1px solid #201238;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.625rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.cost-settings-box__options-container select:focus-visible {
  outline: thick solid #4d90fe;
}

.cost-settings-box__inputs-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 11.0625rem);
  margin-top: 0.625rem;
}

.cost-settings-box__inputs-container span {
  color: #201238;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.cost-settings-box__inputs-container input {
  border-radius: 0.25rem;
  border: 1px solid #ccc;
  color: #201238;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

.cost-settings-box__inputs-container input:focus-visible {
  outline: thick solid #4d90fe;
}

.cost-settings-box__submit-btn {
  background-color: #201238;
  color: #fff;
  border-radius: 0.25rem;
  border: none;
  font-weight: 600;
  margin-top: 1rem;
  padding: 8px 24px;
}

.cost-settings-box__submit-btn:hover {
  cursor: pointer;
}

.cost-settings-box__submit-btn:focus-visible {
  outline: thick solid #4d90fe;
}

.footer__top,
.footer__bottom {
  align-items: center;
  display: flex;
  font-size: 1rem;
  gap: 1.875rem;
  justify-content: center;
  padding: 1.875rem 0;
}

.footer__middle {
  align-items: center;
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding-bottom: 1.875rem;
}

.footer__logo {
  align-items: center;
  display: flex;
  justify-content: center;
}

form:invalid button {
  background-color: #c4c4c4;
  color: #2b2b2b;
  pointer-events: none;
}

input:disabled {
  background: #ccc;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.top-number {
  font-size: 1.25rem;
  font-weight: normal;
}

.lower-number {
  font-size: 1.25rem;
}

.lower-number--negative {
  color: #529877;
}

.lower-number--positive {
  color: #445688;
}