@view-transition {
    navigation: auto;
}




/* RESET */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--color-gray-200);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  margin: 0;
  line-height: inherit;
  background-color: var(--color-white);
  color: var(--color-gray-900);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

ul, ol, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  line-height: inherit;
}

button {
  cursor: pointer;
  background: none;
}

:disabled {
  cursor: default;
}

table {
  border-collapse: collapse;
  border-color: inherit;
}

caption {
  text-align: left;
  color: var(--color-gray-500);
}

/* 8. Misc */
::placeholder {
  color: var(--color-gray-400);
  opacity: 1;
}


.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.intersect-hide {
    opacity: 0;
    transition: all 1s;
}

.intersect-show {
    opacity: 1;
}

.htmx-indicator{
    display:none;
    opacity:0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator{
    display:inline-block;
    opacity:1
}
.htmx-request.htmx-indicator{
    display:inline-block;
    opacity:1
}

.htmx-indicator-hide{
    display: block;
}

.htmx-request .htmx-indicator-hide{
    display: none;
}
.htmx-request.htmx-indicator-hide{
    display: none;
}

ruby {
    ruby-position: under;
}

/* [data-js-word].active {
    color: black;
} */

span.translating {
    text-decoration: underline #00a6f4;
}

[data-js-word].translating {
    text-decoration: underline #00a6f4;
}

#translate-widget.htmx-added {
    opacity: 0;
    transform: translateY(8px);
}

#translate-widget {
    opacity: 1;
    transition: all 100ms ease-in;
}

#speed-widget.htmx-added {
    opacity: 0;
    transform: translateY(8px);
}

#speed-widget {
    opacity: 1;
    transition: all 100ms ease-in;
}

/* button[data-speed].active {
    background-color: #3c82f6;
} */

.recording-item.htmx-added {
opacity: 0;
}

.recording-item {
opacity: 1;
transition: opacity 1s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes slide-from-right {
    from { transform: translateX(90px); }
}

@keyframes slide-to-left {
    to { transform: translateX(-90px); }
}

.slide-it {
    view-transition-name: slide-it;
}

::view-transition-old(slide-it) {
    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Page load indicator styles */

.page-indicator {
    display: none;
}

.htmx-request .page-indicator{
    display:inline;
}

.htmx-request.page-indicator{
    display:inline;
}

.animate-move {
    animation: move 1.5s linear infinite;
}

@keyframes move {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(500%);
    }
}

.new-hidden {
    display: none !important;
}

body {
    overflow-y: scroll;
}

.new-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0; 
}

.wrapper {
    max-width: 800px;
    margin-inline: auto;
}

.wrapper--small {
    max-width: 500px;
    margin-inline: auto;
}

.wrapper--form {
    max-width: 500px;
    margin-inline: auto;
}

.heading {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.heading--large {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.heading--3xl {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
    font-weight: 600;
}

.divider {
    margin-block: 16px;
}

.link {
    color: var(--color-blue-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link:hover {
    color: var(--color-blue-600);
}

@media screen and (width <= 639px) {
    .wrapper {
        padding-inline: 8px;
    }

    .wrapper--small {
        padding-inline: 8px;
    }
}

.toast {
    position: fixed;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    max-width: 300px;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.toast.htmx-swapping {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.toast.success {
    background-color: var(--color-green-300);
    color: var(--color-black);
}

.toast.error {
    background-color: var(--color-red-300);
    color: var(--color-black);
}

/* SHARED FORMS */

.form {
    display: grid;
}

.form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.form__heading {
    font-size: var(--text-xl);
    font-weight: 600;
}

.form__label {
    margin-bottom: var(--space-1);
    font-weight:600;
}

.form__input--text {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-1);
    border: 1px solid var(--color-gray-400);
}

.form__error {
    color: var(--color-red-600);
    align-self: end;
    min-height: var(--error-height);
    font-size: var(--text-sm);
}

.form__textarea {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-1);
    border: 1px solid var(--color-gray-400);
}

.form__button {
    display: block;
    width: 100%;
    background-color: var(--color-gray-800);
    color: var(--color-white);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-1);
    transition: scale ease-in 100ms;
    place-self: start;
    cursor: pointer;
}

.form__level-list {
    /* clear fieldset styles */
    border: none;
    padding: 0;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: var(--space-4);
}

.form__level-list > label {
    border: 1px solid var(--color-gray-300);
    padding-block: var(--space-4);
    text-align: center;
    border-radius: var(--radius-2);
    cursor: pointer;
    font-weight: 600;
    
}
.form__level-list > label:hover {
    border: 1px solid var(--color-blue-300);
    background-color: var(--color-blue-100);
}

.form__level-list > label:has(input:checked) {
    border: 1px solid var(--color-blue-500);
    background-color: var(--color-blue-100);
}

.form__level-list > label > input {
    display: none;
}

.form__voice-list {
    /* reset fielset styles */
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(2, 1fr);
}

.form__voice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--color-gray-300);
    padding-block: var(--space-4);
    border-radius: var(--radius-2);
    cursor: pointer;
}

.form__voice-card:hover {
    background-color: var(--color-blue-100);
    border-color: var(--color-blue-300);
}

.form__voice-card:has(input:checked) {
    border: 1px solid var(--color-blue-500);
    background-color: var(--color-blue-100);
}

.form__voice-card > p {
    font-weight: 600;
}

.form__voice-card > input {
    display: none;
}


.form__color-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.form__color-group > label {
    margin-bottom: 0;
}

.form__input--color {
    border:none;
    padding: 0;
    border-radius: var(--radius-1);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    
}

.form__input--color::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: var(--radius-1);
}

.form__input--color::-webkit-color-swatch {
    border-radius: var(--radius-1); /* This styles the inner color square into a circle */
    border: none;
}

.form__input--color:hover {
    scale: 1.1;
}

.form__input--color:active {
    scale: 1.05;
}


/* main {
    min-height: 100vh;
    padding-top: 48px;
} */

/* header styles */

.header {
    isolation: isolate;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-gray-200);

    .wrapper {
        height: 48px;
        width: 100%;
        max-width: 800px;
        margin-inline: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    @media screen and (width <= 820px) {
        .wrapper {
            padding-inline: 8px;
        }
    }

    .content {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .logo {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .nav {
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 10001;
    }

    .open-button {
        display: none;
        stroke: black;
    }

    .open-button.white {
        stroke: white;
    }

    .close-button {
        display: none;
    }

    @media screen and (width <= 639px) {
        .nav {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: var(--color-white);
            color: black;
            font-size: 1.5rem;
            line-height: 2rem;
        }

        .open {
            display: grid;
            text-align: center;
            place-content: center;
            gap: 1rem;
        }

        .open-button {
            display: block;
        }

        .close-button {
            display: flex;
            justify-content: center;
            text-align: center;
        }
    }

    .active {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .language-select {
        display: flex;
        gap: 2px;
    }

    .select {
        border: 1px solid #e4e4e7;
        border-radius: 0.25rem;
        padding: 4px;
    }

    .select option {
        color: var(--color-gray-900);
    }

    .avatar {
        position: relative;
        color: white;
        font-weight: 600;
    }
}

.header.guest {
    color: var(--color-white);
    background-color: var(--color-gray-900);
}

.avatar {
    .icon {
        width: 2rem;
        height: 2rem;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .dropdown {
        width: 150px;
        font-weight: 400;
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 0.25rem;
        padding: 0.5rem;
        border-radius: 0.25rem;
        background-color: var(--color-white);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .dropdown.show {
        display: grid;
        color: var(--color-gray-900);
    }

    .dropdown a {
        border-radius: 0.25rem;
        margin-bottom: 0.25rem;
        padding-inline: 0.5rem;
    }

    .dropdown a:hover {
        background-color: var(--color-gray-200);
    }

    .dropdown select {
        width: 100%;
    }
}

.globe {
    width: 24px;
    aspect-ratio: 1;
}

.page {
    background-color: var(--color-gray-200);
    padding-block: calc(var(--nav-height) * 2);
    min-height: 100vh;
}

/* footer styles */

.footer {
    text-align: center;
    padding: 64px 0;
    font-size: 14px;
    color: var(--color-gray-100);
    background-color: var(--color-gray-900)

}