@import url("./header.css");
@import url("./card.css");
@import url("./synonyms.css");

.study__mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(852px, 100%);
    margin: 0 auto 24px;
}

.study__mode[hidden],
.study__card-layout[hidden],
.study__navigation[hidden],
.study-complete[hidden] {
    display: none;
}

.study-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: min(852px, 100%);
    min-height: 440px;
    margin: 0 auto;
    padding: 48px;
    gap: 16px;
    border: 0.0625rem solid var(--lines);
    border-radius: var(--big-border-radius);
    color: var(--font-on-dark-bgc);
    background: var(--bgc-card);
    box-shadow: var(--shadow);
    text-align: center;
    animation: study-complete-enter var(--motion-standard) var(--ease-out-strong) both;
}

.study-complete:focus {
    outline: none;
}

.study-complete__eyebrow {
    color: var(--lavanda);
    font-size: var(--small-text);
    font-weight: var(--extra-weight);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
}

.study-complete h2 {
    margin: 8px 0 0;
    color: var(--font-on-dark-bgc);
    font-family: var(--font);
    font-size: var(--h2);
    line-height: var(--line-height);
}

.study-complete p {
    max-width: 560px;
    margin: 0;
    color: var(--color-main-elements);
    font-size: var(--medium-text);
    line-height: 1.5;
}

.study-complete__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.study-complete__primary,
.study-complete__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 20px;
    border: 0.0625rem solid var(--lines);
    border-radius: var(--extra-border-radius);
    font-family: var(--font);
    font-size: var(--small-text);
    font-weight: var(--bold-weight);
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-out-strong),
    background-color var(--motion-quick) var(--ease-out-strong),
    transform var(--motion-quick) var(--ease-out-strong);
}

.study-complete__primary {
    color: var(--font-on-dark-bgc);
    background: var(--zatmenie-btn);
}

.study-complete__primary svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.study-complete__secondary {
    color: var(--font-on-light-bgc);
    background: var(--surface);
}

.study-complete__primary:focus-visible,
.study-complete__secondary:focus-visible {
    outline: 4px solid var(--zatmenie-btn);
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .study-complete__primary:hover,
    .study-complete__secondary:hover {
        transform: translateY(-4px);
    }

    .study-complete__secondary:hover {
        background: var(--light-lavanda);
    }
}

@keyframes study-complete-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.study__mode > span {
    color: var(--lavanda);
    font-size: var(--small-text);
    font-weight: var(--extra-weight);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
}

.mode-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 0.0625rem solid var(--lines);
    border-radius: var(--extra-border-radius);
    background: var(--surface);
}

.mode-switch__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--extra-border-radius);
    background: transparent;
    font-size: var(--medium-text);
    font-weight: var(--bold-weight);
    cursor: pointer;
    transition: color var(--200-transition) ease-out, background-color var(--200-transition) ease-out;
}

.mode-switch__button.is-active {
    color: var(--font-on-dark-bgc);
    background: var(--zatmenie-btn);
}

.mode-switch__button:hover:not(.is-active) {
    background: var(--surface);
}

.page-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.study {
    min-height: calc(100vh - 84px);
    padding: clamp(40px, 7vw, 40px) 0 40px;
}

.study__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 372px);
    align-items: end;
    gap: 48px;
    margin-bottom: clamp(44px, 6vw, 72px);
}

.study h1 {
    max-width: 760px;
    margin: 0;
    font-family: var(--font);
    font-size: var(--h1);
    font-weight: var(--normal-weight);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
}

.study h1 em {
    color: var(--lavanda);
    font-weight: 400;
}

.study__lead {
    margin: 0 0 4px;
    color: var(--color-main-elements);
    font-size: 16px;
    line-height: 1.65;
}

.personal-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 20px;
    width: min(852px, 100%);
    margin: 0 auto 32px;
    padding: 20px 24px;
    border: 0.0625rem solid var(--lines);
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.64);
}

.personal-progress > div:first-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.personal-progress span,
.personal-progress small {
    color: var(--color-main-elements);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.personal-progress strong {
    color: var(--lavanda);
    font-family: var(--font);
    font-size: var(--extra-text);
    font-weight: var(--normal-weight);
    line-height: var(--line-height);
}

.personal-progress small {
    justify-self: end;
    letter-spacing: 0;
    text-transform: none;
}

.personal-progress__track {
    height: 4px;
    overflow: hidden;
    background: var(--lines);
}

.personal-progress__track span {
    display: block;
    width: var(--personal-progress, 0%);
    height: 100%;
    background: var(--lavanda);
    transition: width 220ms ease-out;
}

.study__navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 36px;
    width: min(852px, 100%);
    margin: 8px auto 0;
}

.study__progress {
    display: flex;
    align-items: center;
    flex: 0 0 100%;
    order: 1;
    gap: 20px;
    width: 100%;
    margin: 0;
}

.study__progress p {
    font-family: var(--font);
    margin: 0;
    font-size: var(--small-text);
    font-weight: var(--bold-weight);
    letter-spacing: var(--letter-spacing);
}

.study__progress p span:not(:first-child) {
    color: var(--zatmenie);
}

.progress-track {
    flex: 1 1 auto;
    height: 0.125rem;
    overflow: hidden;
    background: var(--lavanda);
}

.progress-track span {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    background: var(--zatmenie);
    transform-origin: left center;
    transition: width var(--200-transition) ease-out;
}

.study__controls {
    display: contents;
}

.study__controls .previous-button {
    order: 2;
}

.study__controls .continue-button {
    order: 4;
}

.study__controls .keyboard-hint {
    flex: 1 1 auto;
    order: 3;
    justify-content: center;
}

.keyboard-hint {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--space-btn);
    font-size: var(--small-text);
    justify-self: center;
    font-family: var(--font);
}

kbd {
    font-family: var(--font);
    padding: 4px 12px;
    border: 0.0625rem solid var(--lines);
    border-bottom-width: 0.125rem;
    border-radius: 8px;
    background: var(--surface);
    font-size: var(--small-text);
    font-weight: var(--extra-weight);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
}

.continue-button,
.previous-button,
.form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    min-height: 56px;
    padding: 0 20px 0 24px;
    border: 0;
    border-radius: var(--extra-border-radius);
    color: var(--surface);
    background: var(--lavanda);
    font-size: var(--medium-text);
    font-weight: var(--bold-weight);
    cursor: pointer;
    transition: transform var(--200-transition) ease-out, background-color var(--200-transition) ease-out;
}
.resume-button.mobile {
    display: none;
}

.previous-button {
    gap: 12px;
    border: 0.0625rem solid var(--lines);
    color: var(--zatmenie);
    background: var(--surface);
}

.previous-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.continue-button svg,
.previous-button svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform var(--200-transition) ease-out;
}

.continue-button:hover,
.form-button:hover {
    background: var(--strong-lavanda);
    transform: translateY(-0.125rem);
}

.previous-button:hover:not(:disabled) {
    background: var(--light-lavanda);
    transform: translateY(-0.125rem);
}

.continue-button:hover svg {
    transform: translateX(0.1875rem);
}

.continue-button:active,
.previous-button:active,
.form-button:active {
    transform: translateY(0);
}

.resume-button-container {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.resume-button {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
    gap: 8px;
    min-height: 48px;
    margin: 0 auto;
    padding: 0 20px;
    border: 0.0625rem solid var(--lines);
    border-radius: 1000px;
    color: var(--font-on-dark-bgc);
    background: var(--zatmenie-btn);
    font-weight: 700;
    cursor: pointer;
    transition: var(--200-transition);
}

.resume-button:hover {
    transform: scale(1.04);
}

.resume-button[hidden] {
    display: none;
}

.empty-state {
    font-family: var(--font);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    min-height: 332px;
    padding: clamp(32px, 6vw, 72px);
    border: 0.0625rem solid var(--lines);
    border-radius: var(--big-border-radius);
    color: var(--zatmenie);
    background: var(--bgc-card);
    box-shadow: 0 0 40px 0 var(--bgc-card);
}

.filter-empty {
    width: min(852px, 100%);
    margin: 0 auto;
}

.study__progress[hidden],
.study__controls[hidden],
.filter-empty[hidden] {
    display: none;
}

.empty-state__number {
    color: var(--font-on-dark-bgc);
    font-family: var(--font);
    font-size: clamp(112px, 20vw, 220px);
    line-height: 0.7;
}

.empty-state h2 {
    color: var(--font-on-dark-bgc);
    margin: 0 0 12px;
    font-family: var(--font);
    font-size: var(--h2);
    font-weight: var(--normal-weight);
    letter-spacing: var(--letter-spacing-h2);
}

.empty-state p {
    max-width: 520px;
    margin: 0;
    color: var(--font-on-dark-bgc);
}

.library {
    padding: 0 0 clamp(60px, 10vw, 120px);
}

.library details {
    border-top: 0.0625rem solid var(--lines);
    border-bottom: 0.0625rem solid var(--lines);
}

.library summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 88px;
    cursor: pointer;
    list-style: none;
    font-size: var(--normal-text);
    font-weight: var(--bold-weight);
    letter-spacing: var(--letter-spacing);
}

.library summary::-webkit-details-marker {
    display: none;
}

.library summary > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.summary__plus {
    position: relative;
    width: 28px;
    aspect-ratio: 1;
    border: 0.0625rem solid var(--lines);
    border-radius: 50%;
}

.summary__plus::before,
.summary__plus::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 0.0625rem;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
    transition: transform 180ms ease-out;
}

.summary__plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

details[open] .summary__plus::after {
    transform: translate(-50%, -50%) rotate(0);
}

.word-count {
    color: var(--font-on-light-bgc);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.library__content {
    padding: 16px 0 52px;
}

.library__forms {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
    gap: clamp(24px, 4vw, 48px);
}

.word-form,
.upload-form {
    padding: clamp(24px, 4vw, 44px);
    border-radius: 24px;
    background: var(--surface);
}

.upload-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    color: var(--surface);
    background: var(--lavanda);
}

.form-heading {
    margin-bottom: 28px;
}

.word-form h2,
.upload-form h2,
.word-list-wrap h2 {
    margin: 0;
    font-family: var(--font);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.035em;
}

.upload-form p:not(.eyebrow) {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.field-grid label,
.file-field {
    display: grid;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.field-grid small {
    color: var(--ink-soft);
    font-weight: 500;
}

input,
textarea {
    width: 100%;
    border: 0.0625rem solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: #f8f6ef;
    transition: border-color 140ms ease-out, background-color 140ms ease-out;
}

input {
    min-height: 48px;
    padding: 8px 12px;
}

textarea {
    min-height: 104px;
    padding: 12px 16px;
    resize: vertical;
}

input:hover,
textarea:hover {
    border-color: rgba(23, 35, 31, 0.38);
}

input::placeholder,
textarea::placeholder {
    color: #929990;
}

.word-form .form-button {
    margin-top: 24px;
}

.file-field input {
    min-height: 0;
    padding: 12px;
    color: var(--surface);
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    color: var(--lavanda);
    background: var(--zatmenie);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.form-button--secondary {
    color: var(--ink);
    background: var(--acid);
}

.form-button--secondary:hover {
    background: #d0ea4d;
}

.word-list-wrap {
    margin-top: 52px;
}

.word-list {
    margin: 24px 0 0;
    padding: 0;
    border-top: 0.0625rem solid var(--line);
    list-style: none;
}

.word-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 64px;
    border-bottom: 0.0625rem solid var(--line);
}

.word-list li > span:first-child {
    font-family: var(--font);
    font-size: 20px;
}

.word-list__translation {
    color: var(--ink-soft);
    font-size: 16px;
}

.delete-button {
    padding: 8px 0 8px 16px;
    border: 0;
    color: var(--danger);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.mute-block {
    display: none;
}

@media (max-width: 960px) {
    .keyboard-hint {
        display: none !important;
    }

    .mute-block {
        display: block;
    }

}

@media (max-width: 820px) {
    .mode-switch__button {
        flex: 1;
        justify-content: center;
    }

    .study {
        min-height: auto;
    }

    .study__intro {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .study__lead {
        max-width: 560px;
    }

    .library__forms {
        grid-template-columns: 1fr;
    }


}

@media (max-width: 620px) {
    .study-complete {
        min-height: 400px;
        padding: 32px 20px;
    }

    .study-complete__actions,
    .study-complete__primary,
    .study-complete__secondary {
        width: 100%;
    }

    .study__navigation {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
    }

    .resume-button {
        align-self: center;
        order: 2;
        margin-top: 4px;
    }

    .study__controls {
        display: flex;
        align-items: center;
        order: 3;
        gap: 16px;
        width: 100%;
        margin-top: 8px;
    }

    .study__controls .previous-button,
    .study__controls .continue-button {
        flex: 1 1 0;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .study-complete {
        animation: none;
    }

    .study-complete__primary,
    .study-complete__secondary {
        transition-property: color, background-color;
    }
}

@media (max-width: 560px) {
    :root {
        --radius: 24px;
    }

    body {
        background-size: 36px 36px;
    }

    .study__mode {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .mode-switch {
        width: 100%;
    }

    .mode-switch__button {
        min-height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }

    .page-shell {
        width: min(100% - 28px, 1180px);
    }

    .study {
        padding: 44px 0 56px;
    }

    .study h1 {
        font-size: clamp(44px, 15vw, 64px);
    }

    .study__intro {
        margin-bottom: 36px;
    }

    .study__lead {
        font-size: 16px;
    }

    .study__progress {
        gap: 12px;
    }

    .personal-progress {
        margin-bottom: 24px;
        padding: 16px;
    }

    .study__controls {
        gap: 16px;
    }

    .keyboard-hint {
        justify-content: center;
    }

    .previous-button,
    .continue-button {
        width: 100%;
    }

    .empty-state {
        grid-template-columns: 1fr;
    }

    .empty-state__number {
        font-size: 100px;
    }

    .library summary {
        min-height: 76px;
        font-size: 16px;
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .word-form,
    .upload-form {
        padding: 24px;
    }

    .word-list li {
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        padding: 12px 0;
    }

    .word-list__translation {
        grid-column: 1;
    }

    .word-list form {
        grid-column: 2;
        grid-row: 1 / 3;
    }


}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }


}