@import "/styles/constants.css";

practice-layout {
    display: contents;
}

#main-content {
    display: grid;
    grid-template-columns: minmax(80px, 260px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-5);
    padding: 0 var(--space-5) 0 var(--space-4);
    background: var(--background-gradient);

    /* Transition for fullscreen */
    transition: grid-template-columns var(--dur-med) var(--ease-out), grid-template-rows var(--dur-med) var(--ease-out);
}

/* Helper class to hide an element */
.hidden {
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden;
}

#main-content:has(#word-list.hidden), #main-content:has(#other-sets.hidden) {
    grid-template-columns: 0px 1fr;
    grid-template-rows: 1fr 0px;
    column-gap: 0;
}

/***********************************************
* Word list panel
*************************************************/
#word-list {
    display: flex;
    flex-direction: column;
    align-self: start;
    position: sticky;
    /* Above the header wash (upgrades.css paints a gradient over main). practice-layout is display: contents, so the
       site-wide "main > * sits above the wash" rule never reaches this panel; it needs its own stacking level */
    z-index: 1;
    top: calc(var(--header-h) + var(--space-4));
    margin: 3vh 0 var(--space-5);
    padding: var(--space-4) var(--space-3);
    width: 100%;
    min-width: 0;
    max-height: calc(100vh - var(--header-h) - var(--space-6) - var(--space-4));
    text-align: center;
    grid-row: span 2;
    grid-column: 1;
    color: var(--font-color);
    /* Transition for fullscreen */
    transition: max-width var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out),
                margin var(--dur-med) var(--ease-out), max-height var(--dur-med) var(--ease-out);

    background-color: var(--gray-bg-color);
    border: 1px solid rgba(58, 36, 24, .07);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-soft);
}

#word-list.hidden {
    transition: border .5s ease .25s;
    border: 0;
}

#word-list h2, #other-sets h2 {
    font-family: var(--font-display);
    color: var(--ocean-deep);
    font-size: var(--fs-lg);
    margin: 0 0 var(--space-3);
}

#word-list #word-list-entries {
    text-align: start;
    font-size: var(--fs-sm);
    line-height: 1.6;
    margin: var(--space-3) 0 0;
    padding: 0 var(--space-2) 0 var(--space-6);
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--sea) transparent;
}

#word-list #word-list-entries li {
    padding: 1px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--trim-color) 25%, transparent);
    overflow-wrap: anywhere;
}

#word-list #word-list-entries li::marker {
    color: var(--trim-color);
    font-size: var(--fs-xs);
}

/* text saying what the card front language is */
#other-sets #card-front-lang-display {
    margin: var(--space-3) 0 0;
    color: var(--font-color);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/***********************************************
* Container for other set selection options
*************************************************/
#other-sets {
    padding: 0 0 var(--space-6);
    min-width: 0;
    max-width: 880px;
    width: 100%;
    justify-self: center;
    z-index: 1; /* above the header wash, same as #word-list */
    /* Transition for fullscreen */
    transform-origin: bottom;
    transition: transform var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out),
                margin var(--dur-med) var(--ease-out);

    grid-column: 2;
    grid-row: 2;
}

#other-sets.hidden {
    transform: scaleY(0);
}

#other-sets h2 {
    margin: var(--space-5) 0 0;
    color: var(--font-color);
}

/* Style for language toggle buttons */
#lang-toggle-word-list, #lang-toggle-sets {
    width: auto;
    background-color: var(--button-color);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;

    /* Centers within main area */
    display: block;
    margin: var(--space-2) auto 0 auto;
    padding: 6px var(--space-4);
    font-size: var(--fs-sm);
    color: var(--font-color);
    font-weight: 600;
    transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

#lang-toggle-word-list:hover, #lang-toggle-sets:hover {
    background-color: var(--ocean-mist-deep);
}

#lang-toggle-word-list:active, #lang-toggle-sets:active {
    transform: scale(var(--button-pressed-scale));
}

#lang-toggle-word-list {
    margin-bottom: var(--space-2);
}

/***********************************************
* Choices for other sets
*************************************************/
.set-choice-container {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-1) var(--space-4);
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Soft fade where the row scrolls off */
    mask-image: linear-gradient(to right, transparent 0, black 6px, black calc(100% - 28px), transparent 100%);
}

.set-choice-container::-webkit-scrollbar {
    display: none;
}

.set-choice-container button {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 128px;
    height: 76px;
    padding: var(--space-2) var(--space-3);
    text-transform: capitalize;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    background-color: var(--sand-soft);
    color: var(--ocean-deep);
    border: 1px solid rgba(58, 36, 24, .07);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) ease;
}

.set-choice-container button:hover {
    background-color: var(--ocean-mist);
}

.set-choice-container button:active {
    transform: scale(var(--button-pressed-scale));
}

.set-choice-container button:focus-visible,
#frequency-filter button:focus-visible,
#lang-toggle-word-list:focus-visible,
#lang-toggle-sets:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
    box-shadow: none;
}

/***********************************************
* Minimum-frequency filter chips
*************************************************/
#frequency-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: var(--space-3);
}

#frequency-filter.hidden {
    display: none;
}

.frequency-filter-label {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#frequency-filter button {
    font-size: var(--fs-sm);
    min-width: 38px;
    min-height: 30px;
    padding: 2px 10px;
    background-color: var(--sand-soft);
    border: 1px solid rgba(58, 36, 24, .18);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

#frequency-filter button:hover {
    background-color: var(--ocean-mist);
}

#frequency-filter button:active {
    transform: scale(var(--button-pressed-scale));
}

#frequency-filter button[aria-pressed="true"] {
    background-color: var(--ocean);
    color: #fff;
    font-weight: 700;
}

#frequency-count {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    font-weight: 600;
}

.empty-message {
    list-style: none;
    font-style: italic;
}

/***********************************************
* Small screens: card first, then set choices, then the word list
*************************************************/
@media (max-width: 760px) {
    #main-content,
    #main-content:has(#word-list.hidden),
    #main-content:has(#other-sets.hidden) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        column-gap: 0;
        padding: 0 var(--space-4);
    }

    #main-content :is(#card-container, #practice-container, #other-sets, #word-list) {
        grid-column: 1;
        grid-row: auto;
    }

    #main-content #card-container,
    #main-content #practice-container { order: 1; }
    #main-content #other-sets { order: 2; }
    #main-content #word-list { order: 3; }

    #word-list {
        position: static;
        max-height: 60vh;
        margin: 0 0 var(--space-5);
    }

    #other-sets {
        padding-bottom: var(--space-4);
    }

    #other-sets h2 {
        margin-top: var(--space-3);
    }

    #other-sets #card-front-lang-display,
    #other-sets #lang-toggle-sets {
        text-align: left;
    }
}

/* Touch targets */
#frequency-filter button {
    position: relative;
    min-width: 40px;
    min-height: 36px;
}

/* invisible hit area brings each chip to 44x44 without making the row too wide */
#frequency-filter button::before {
    content: "";
    position: absolute;
    inset: -6px -4px; /* measured inside the border; brings the hit area past 44x44 */
}

#lang-toggle-word-list, #lang-toggle-sets {
    min-height: 44px;
}

/* Explicit rows so the card stays top-right whatever the source order */
#word-list {
    grid-row: 1 / span 2;
}

/* Collapsible "Change set" chooser */
#other-sets > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin-top: var(--space-4);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

#other-sets > summary::-webkit-details-marker {
    display: none;
}

#other-sets > summary h2 {
    margin: 0;
}

#other-sets > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
}

#other-sets:not([open]) > summary::after {
    transform: rotate(-45deg);
}

#other-sets > summary:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

#other-sets #lang-toggle-sets {
    margin: var(--space-2) 0 0;
}

/* ---------- Spaced repetition switch (flashcards + writing practice) ----------
   A pill switch: the thumb slides right and the pill turns ocean when on; the "Spaced / On|Off" label and the thumb
   position say the state too, not just colour. Flat: no shadow, no lift. The thumb slide is a short transition. */
:is(#card-options, #word-options) #spaced-repetition-button.sr-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 104px;
    min-width: 104px;
    height: 48px;
    min-height: 48px;
    padding: 0 8px 0 42px;
    border: 3px solid var(--koa-soft);
    border-radius: var(--radius-pill, 999px);
    background-color: #fffdf6;
    color: var(--font-color);
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

:is(#card-options, #word-options) #spaced-repetition-button.sr-switch .sw-thumb {
    position: absolute;
    top: 5px;
    left: 5px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 2px solid var(--koa-soft);
    border-radius: 50%;
    background-color: #fffdf6;
    transition: transform var(--dur-fast) var(--ease-out, ease-out), border-color var(--dur-fast) ease;
}

:is(#card-options, #word-options) #spaced-repetition-button.sr-switch .sw-thumb img {
    width: 18px;
    height: 18px;
    filter: none;
}

:is(#card-options, #word-options) #spaced-repetition-button.sr-switch .sw-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

:is(#card-options, #word-options) #spaced-repetition-button.sr-switch .sw-name { font-weight: 600; opacity: .85; }

:is(#card-options, #word-options) #spaced-repetition-button.sr-switch[aria-checked="true"] {
    padding: 0 42px 0 12px;
    background-color: var(--ocean);
    border-color: var(--ocean-deep);
    color: #fff;
}

:is(#card-options, #word-options) #spaced-repetition-button.sr-switch[aria-checked="true"] .sw-thumb {
    transform: translateX(56px);
    border-color: var(--ocean-deep);
}

:is(#card-options, #word-options) #spaced-repetition-button.sr-switch:hover:not(:disabled) { background-color: var(--plumeria-soft); }
:is(#card-options, #word-options) #spaced-repetition-button.sr-switch[aria-checked="true"]:hover:not(:disabled) { background-color: var(--ocean-deep); }

:is(#card-options, #word-options) #spaced-repetition-button.sr-switch:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
    box-shadow: none;
}

/* multi-set selection: clearly off-limits (dashed, faded), the title explains why */
:is(#card-options, #word-options) #spaced-repetition-button.sr-switch:disabled {
    opacity: .5;
    border-style: dashed;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    :is(#card-options, #word-options) #spaced-repetition-button.sr-switch,
    :is(#card-options, #word-options) #spaced-repetition-button.sr-switch .sw-thumb { transition: none; }
}

/* ---------- "Does this count?" badge (flashcards + writing) ----------
   Flat pill with an icon AND words. Counts = solid ocean + check circle; practice = dashed outline + pencil, no fill;
   neutral (loading / all caught up) = soft fill + clock. The shapes differ, so it reads in grayscale. */
.mode-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    margin: var(--space-2) auto;
    padding: 0 var(--space-3);
    box-sizing: border-box;
    border: 2px solid var(--ocean-deep);
    border-radius: var(--radius-pill, 999px);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: none;
}

.mode-badge[hidden] { display: none; }
.mode-badge svg { width: 18px; height: 18px; flex: none; }
.mode-badge.is-counts { background: var(--ocean); color: #fff; }
.mode-badge.is-practice { background: transparent; color: var(--koa); border-style: dashed; border-color: var(--koa-soft); }
.mode-badge.is-neutral { background: var(--ocean-mist); color: var(--ocean-deep); border-color: var(--ocean); }

/* Writing page: left side holds the switch (104px) + 2 tiles, right side the Help + fullscreen tiles,
   so the counter's right margin is the 104px difference + 1 gap to stay centered */
#word-options #num-progress { margin-right: calc(104px + var(--space-2)); }
@media (max-width: 560px) {
    #word-options #num-progress { margin-right: 0; }
}
@media (max-width: 400px) {
    #word-options #num-progress { margin: 0; }
}