/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* 4. Add accessible line-height and
   5. Improve text rendering on high-DPI screens */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults (block instead of inline and match parent width) */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* 10. Create a root stacking context */
#root, #__next {
  isolation: isolate;
}

/* Basic theme styles */
body {
  padding: 16px;
  font-family: 'Wotfard', sans-serif;
}

section {
  margin-top: 32px;
}

form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

table form {
  flex-wrap: nowrap;
}

.inline-form {
  display: inline-flex;
}

label {
  font-weight: 600;
}

input,
select,
button {
  border: 1px solid hsl(0deg 0% 40%);
  border-radius: 6px;
  padding: 6px 10px;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

section a {
  margin-right: 12px;
}

.invite-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

th {
  text-align: left;
  border-bottom: 3px solid hsl(0deg 0% 25%);
}

th[scope="col"] {
  text-align: right;
  border-right: 3px solid hsl(0deg 0% 25%);
  border-bottom: none;
  padding-right: 8px;
}

tr:not(:last-of-type) th[scope="col"],
tr:not(:last-of-type) td {
  border-bottom: 1px solid hsl(0deg 0% 50%);
}

/* Custom fonts */
@font-face {
  font-family: 'Wotfard';
  src: url('https://sandpack-bundler.vercel.app/fonts/wotfard/wotfard-semibold-webfont.woff2')
    format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: 'Wotfard';
  src: url('https://sandpack-bundler.vercel.app/fonts/wotfard/wotfard-medium-webfont.woff2')
    format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: 'Wotfard';
  src: url('https://sandpack-bundler.vercel.app/fonts/wotfard/wotfard-regular-webfont.woff2')
    format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

:root {
  --font-family: 'Wotfard', sans-serif;
}

/* AGENT BROKER CUSTOM STYLES */
h1 {
  color: dodgerblue;
}

dialog::backdrop {
  background: #fff5;
  backdrop-filter: blur(4px);
}