/* Vocabulary List Styles
 *
 * The page's controls (buttons, chips, pager, audio button, the queue pill) are
 * built with Tailwind — see the "Vocabulary page controls" section of
 * assets/css/tailwind/input.css — and the bundle is linked from
 * templates/dictionary/vocabulary_list.html. This file keeps only the few rules
 * Tailwind utilities express poorly: things that depend on the sticky navbar,
 * scroll containers, line clamping and the Thai scale.
 */

/* Admin filter panel (superuser tooling): the shell around the segmented
   controls, which are themselves Tailwind (.vocab-seg). */
.admin-filters-wrap {
    background: linear-gradient(135deg, var(--surface) 0%, var(--color-bg-warm) 100%);
    border: 1px solid rgba(245, 158, 11, 0.12);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

.admin-filters-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.admin-filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* The group heading only — an element selector here would also catch the
   `.vocab-seg` pills, whose left padding would collapse to 0.1rem and whose
   text would inherit this size/tracking. */
.admin-filter-heading {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-bs-muted);
    margin-bottom: 0;
    padding-left: 0.1rem;
}

.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* Thai script sizes */
.thai-medium {
    font-size: 1.75rem;
}

.thai-large {
    font-size: 2rem;
    line-height: 1.3;
}

/* Word Card Styles
 *
 * One reading surface (small design rule): the card is a quiet white sheet and
 * the *ink* carries the hierarchy — Thai word, then pronunciation, then the
 * meaning. Brand emerald is never decoration here: it marks a state (the word
 * is queued for review, the audio is playing) or a primary action, so a card
 * you have not touched looks untouched.
 *
 * Type scale (measured on the live grid): Thai 30px/1.25/w500, pronunciation
 * 13.5px/w500, definition 15px/1.5 — the former emerald Thai and slate-600
 * definition made every card a flat mint wash with no entry point.
 */
.word-card {
    position: relative;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    background-color: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Hover acknowledges the card without recolouring it: the border steps down a
   slate, a hairline shadow lifts it 1px. (The old rule painted the border the
   brand green, which read as "selected" on every card the pointer crossed.) */
.word-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* The whole card is tappable through the word's stretched link: anywhere that
   is not a control opens the word. Controls (and the badges, whose tooltips
   would otherwise be covered) sit above the overlay. */
.word-card .ui-card-stretch-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.word-card .vocab-audio-btn,
.word-card .vocab-actions,
.word-card .ui-badge {
    position: relative;
    z-index: 1;
}

.word-card-head {
    min-height: 38px;
    margin-bottom: 2px;
}

.word-card .thai-text {
    display: block;
    color: var(--ink);
}

/* Thai has stacked vowels and tone marks, so it needs the ink weight, not the
   brand hue: at 30px emerald-600 is only 3.07:1 and the marks read thinner. */
.word-card .thai-large {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 500;
}

.word-card .romanization-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 6px;
}

/* Secondary, not accent: the pronunciation is a reading aid, so it sits a
   slate below the definition instead of competing in brand green. */
.word-card .romanization {
    display: block;
    margin-bottom: 0;
    color: var(--ink-muted);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.word-card .word-ipa {
    font-size: 0.8rem;
    color: var(--ink-faint);
    cursor: help;
}

.word-card .definition {
    display: block;
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
}

/* Audio: a quiet 30px circle that only turns teal while it is playing (and on
   card hover, as an affordance hint). A filled accent on every card made the
   icon outrank the word it pronounces. */
.word-card .vocab-audio-btn {
    height: 30px;
    width: 30px;
    font-size: 13px;
    border-color: var(--border);
    color: var(--ink-subtle);
    box-shadow: none;
}

.word-card:hover .vocab-audio-btn {
    border-color: var(--border-strong);
    color: var(--info-accent-alt);
}

.word-card .vocab-audio-btn:hover {
    border-color: var(--border-strong);
    background-color: var(--surface-hover);
    color: var(--info-accent-alt);
}

.vocab-audio-btn.playing {
    border-color: var(--success-border);
    background-color: var(--success-bg);
    color: var(--color-primary);
}

/* Example sentence snippet: the Thai sentence and its translation, one line
   each so every card keeps the same height. A hairline separates it from the
   definition; the old dashed rule read as a form divider. */
.example-snippet {
    border-top: 1px solid var(--surface-hover);
}

.example-snippet small {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-faint);
}

.example-translation {
    font-style: italic;
}

/* Card actions: "add to review" and its options picker share the first row,
   "add to list" always starts a second one. Letting all three share a row only
   worked on a wide card and read as a jumble of half-height chips. */
.vocab-actions {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 0;
}

/* The chips are the one place this page overrides `.vocab-chip`'s pill: on a
   card they are 8px-rounded quiet slates, so the emerald fill of a queued chip
   is the only saturated thing in the card. */
.word-card .vocab-chip {
    border-color: transparent;
    border-radius: 8px;
    background-color: var(--surface-hover);
    padding: 6px 12px;
    color: var(--ink-label);
    font-size: 12.5px;
}

.word-card .vocab-chip:hover {
    border-color: transparent;
    background-color: var(--surface-active);
    color: var(--ink);
}

.word-card .vocab-chip .vocab-chip-icon {
    color: var(--ink-faint);
}

/* Queued: tinted emerald, not a solid fill — the card should say "this one is
   mine to review" without turning into a green button. */
.word-card .vocab-chip.is-queued,
.word-card .vocab-chip[aria-pressed="true"] {
    border-color: var(--success-border);
    background-color: var(--success-bg);
    color: var(--success-ink-deep);
    box-shadow: none;
}

.word-card .vocab-chip.is-queued .vocab-chip-icon,
.word-card .vocab-chip[aria-pressed="true"] .vocab-chip-icon {
    color: var(--color-primary);
}

.vocab-actions .vocab-review-toggle {
    flex: 1 1 auto;
    justify-content: center;
}

.vocab-actions .vocab-add-to-list {
    flex: 1 0 100%;
    justify-content: center;
}

.vocab-review-options {
    flex: 0 0 auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Mastery: the card's one progress signal, so it reads as a state word
   (emerald) rather than a third badge colour. */
.word-card .mastery-badge {
    background-color: var(--success-bg);
    color: var(--success-ink-deep);
    font-weight: 600;
}

/* The word links are `a.text-decoration-none`, so they would otherwise take
   the global link teal — the one hue the card system reserves for "listening"
   on the audio button. Ink stays ink; focus still shows a ring (below), so the
   link is never indistinguishable from plain text. */
.word-card .ui-card-stretch-link {
    color: inherit;
}

.word-card .ui-card-stretch-link:hover {
    color: inherit;
}

.word-card .ui-card-stretch-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Results header: word count + the compact pager */
#vocabulary-results {
    /* The navbar is `sticky-top`, so scrolling the results back into view would
       otherwise park the count line and pager underneath it — the reader sees a
       page that appears to "start" mid-card. 5rem clears the navbar (measured at
       78px on desktop, 66px on a phone) with a hair of breathing room. */
    scroll-margin-top: 5rem;
}

.vocab-results-header {
    min-height: 2rem;
}

/* The queue panel: one row per queued word — Thai, then its definition in the
   reader's language, and a remove button. */
.vocab-queue-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vocab-queue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--surface-hover);
}

.vocab-queue-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.vocab-queue-item-text {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
}

.vocab-queue-item-word {
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
}

.vocab-queue-item-word:hover {
    color: var(--color-primary);
}

/* Long definitions are cut, never allowed to push the remove button around. */
.vocab-queue-item-def {
    overflow: hidden;
    color: var(--ink-faint);
    font-size: 0.8rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile "More filters" disclosure. Above 768px the wrapper disappears from the
   box tree (display: contents) so its columns are laid out by the Bootstrap row
   exactly as before; only the phone gets a collapsed panel. */
.vocab-filters-toggle.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* `.ui-row > *` is a child combinator, so it stops reaching these columns once
   the wrapper becomes `display: contents` at ≥768px. Mirror the row's gutter
   here: the vertical gap applies at every width, the horizontal half-gutter
   only where the fields join the row (on a phone the wrapper is a real box and
   already carries the row cell's padding). */
.vocab-filter-fields > * {
    margin-top: var(--ui-gutter-y);
}

@media (min-width: 768px) {
    .vocab-filter-fields {
        display: contents !important;
    }

    .vocab-filter-fields > * {
        padding-right: calc(var(--ui-gutter-x) * 0.5);
        padding-left: calc(var(--ui-gutter-x) * 0.5);
    }
}

/* Badges specifically for vocabulary context (the word detail page uses it too) */
.pos-badge {
    font-size: 0.75rem;
}

/* Mastery Bar inside cards */
.mastery-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.mastery-fill.level-0 {
    background: var(--mastery-0);
}

.mastery-fill.level-1 {
    background: var(--mastery-1);
}

.mastery-fill.level-2 {
    background: var(--mastery-2);
}

.mastery-fill.level-3 {
    background: var(--mastery-3);
}

.mastery-fill.level-4 {
    background: var(--mastery-4);
}

.mastery-fill.level-5 {
    background: var(--mastery-5);
}

.mastery-fill.level-6 {
    background: var(--mastery-6);
}

.mastery-fill.level-7 {
    background: var(--mastery-7);
}

/* ---------------------------------------------------------------------------
   Phone adjustments
   --------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    /* One scrollable strip instead of two wrapped rows: the chips are the
       fastest filter on a phone and should not push the first card down. */
    .quick-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .quick-filter-chips .chip-filter {
        flex: 0 0 auto;
    }

    /* Give the definition two lines to make its point instead of one. */
    .word-card .definition {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .example-snippet small {
        white-space: normal;
    }
}