/*! amoeba 0.1.0-alpha */

:root {

  --measure: 60ch;
  --font-size-base: 0.875rem;

  --spacer-0: 0.25rem;
  --spacer-1: 0.5rem;
  --spacer-2: 1rem;
  --spacer-3: 2rem;

  --type-scale: 1.125; /* major second */

  --font-size-0: calc(var(--font-size-base) / var(--type-scale));
  --font-size-1: calc(var(--font-size-base) * var(--type-scale));
  --font-size-2: calc(var(--font-size-1) * var(--type-scale));
  --font-size-3: calc(var(--font-size-2) * var(--type-scale));
  --font-size-4: calc(var(--font-size-3) * var(--type-scale));
  --font-size-5: calc(var(--font-size-4) * var(--type-scale));
  --font-size-6: calc(var(--font-size-5) * var(--type-scale));

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);

  font-family: var(--font-family-sans-serif);
}

/* reset */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, figure, blockquote, pre, hr {
  margin-block: 0;
}

/* layout primitives */

.box {
  border: 1px solid #000;
  padding: var(--spacer-1);
  background-color: #f0f0f0;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacer-1);

  &.center {
    justify-content: center;
  }

  &.between {
    justify-content: space-between;
  }

  &.end {
    justify-content: flex-end;
  }

  &.middle {
    align-items: center;
  }

  &.top {
    align-items: flex-start;
  }

  &.bottom {
    align-items: flex-end;
  }

  &.looser {
    gap: var(--spacer-2);
  }
  &.flush {
    gap: 0;
  }
  &.tighter {
    gap: var(--spacer-0.5);
  }

}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-1);

  &.looser {
    gap: var(--spacer-2);
  }

  &.tighter {
    gap: var(--spacer-0);
  }

}

.has-sidebar {
	display: flex;
	flex-wrap: wrap;
  align-items: stretch;
	gap: var(--spacer-2);
  min-height: 100dvh;

  .sidebar {
		flex-basis: 20rem;
		flex-grow: 1;
	}

	.content {
		flex-basis: 0;
		flex-grow: 999;
		min-inline-size: 50%;
    margin-block: var(--spacer-2);
	}

}

.switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacer-1);

	&> * {
		flex-grow: 1;
		flex-basis: calc((30rem - 100%) * 999);
	}

}

.grid {
	display: grid;
	gap: var(--spacer-1);
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.center {
  box-sizing: content-box;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline-start: var(--spacer-1);
  padding-inline-end: var(--spacer-1);
}

.cover {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  &> .cover-child {
    margin-block: auto;
  }
}

/* typography */

h1,
.title {
  font-size: var(--font-size-5);
  font-weight: 700;
}

h2,
.heading {
  font-size: var(--font-size-4);
  font-weight: 700;
}

h3,
.subheading {
  font-size: var(--font-size-3);
  font-weight: 700;
}

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

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

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

p,
.body {
  font-size: var(--font-size-1);
  font-weight: 400;
}

.body-lg {
  font-size: var(--font-size-2);
  font-weight: 400;
}

.caption {
  font-size: var(--font-size-0);
  font-weight: 700;
  text-transform: uppercase;
}

.display {
  font-size: var(--font-size-6);
  font-weight: 700;
}

/*aesthetics*/

a {
  color: #000;

  &:hover {
    color: #666;
  }
  
}

blockquote {
  border-left: 0.25rem solid #000;
  padding: var(--spacer-1) var(--spacer-2);
}

code {
  font-family: monospace;
  background-color: #f0f0f0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

pre {
  font-family: monospace;
  background-color: #f0f0f0;
  padding: var(--spacer-1);
  border-radius: 0.25rem;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #000;
  padding: var(--spacer-1);
}





dialog {
  max-inline-size: min(100%, 30rem);
  padding: var(--spacer-2);
  border: 1px solid #000;
  background: #fff;
  opacity: 0;
  transform: translateY(0.5rem) scale(0.96);
  transition:
    display 220ms allow-discrete,
    overlay 220ms allow-discrete,
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

dialog:not([open]) {
  display: none;
}

dialog[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
  }
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
  opacity: 0;
  transition:
    display 220ms allow-discrete,
    overlay 220ms allow-discrete,
    opacity 220ms var(--ease-out);
}

dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}

[popover] {
  padding: var(--spacer-1);
  border: 1px solid #000;
  background: #fff;
  opacity: 0;
  transform: translateY(-0.35rem) scale(0.96);
  transition:
    display 180ms allow-discrete,
    overlay 180ms allow-discrete,
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

[popover]:not(:popover-open) {
  display: none;
}

[popover]:popover-open {
  opacity: 1;
  transform: none;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.96);
  }
}

nav[popover],
menu[popover] {
  margin: 0;
  padding: 0;
  inset: auto;
  list-style: none;
  transform-origin: top right;
  position-area: block-end span-inline-start;
}

menu[popover] li {
  display: contents;
}

nav[popover] a,
menu[popover] button {
  display: block;
  padding: var(--spacer-1);
  font: inherit;
  color: inherit;
  text-align: start;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  nav[popover] a:hover,
  menu[popover] button:hover {
    background: #f0f0f0;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog,
  dialog::backdrop,
  [popover],
  nav[popover] a,
  menu[popover] button {
    transition: none;
  }
}

.sidebar {
  background-color: #eee;
  border-radius: var(--spacer-1);
  padding: var(--spacer-2);
}

button {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
input[type="tel"],
select,
textarea {
  padding: 0.5rem;
  border: 1px solid #000;
}