@import "/styles/constants.css";

/* Vocab pages: hub, word bank, type and phrases. Site-d look; tokens come from site.css. */

.vocab-main {
    min-width: 0;
}

/* ---------- Hero ---------- */
.v-hero .blob-sun { width: clamp(180px, 30vw, 360px); right: -6%; top: -30%; opacity: .6; }
.v-hero .blob-sea { width: clamp(120px, 20vw, 240px); left: -5%; bottom: -35%; opacity: .5; }

.vocab-title {
    margin-top: .5rem;
}

.vocab-intro {
    margin-top: 1.1rem;
}

/* Breadcrumb: a quiet eyebrow-style trail */
.vocab-breadcrumb {
    display: block;
    margin-bottom: var(--space-2);
}

.vocab-breadcrumb a {
    color: inherit;
    text-decoration-color: var(--terracotta);
}

.vocab-breadcrumb a:hover {
    text-decoration-thickness: 2px;
}

.vocab-message,
.freq-empty,
.search-empty,
.search-note {
    text-align: center;
    color: var(--koa-soft);
}

/***********************************************
* Search bar (hub + word bank) and phrase filter
*************************************************/
.v-search {
    position: relative;
    z-index: 5; /* keeps the keyboard popup above the cards below */
    margin-top: 1.5rem;
    max-width: 40rem;
}

.v-search .search-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.v-search .search-row .search {
    flex: 1 1 14rem;
    min-width: 0;
}

.v-search .input {
    border-radius: var(--r-pill);
}

.v-search .btn {
    min-height: 48px;
}

/* Search: flat fill, same as the home page Start Learning button (no gradient / gloss from upgrades.css) */
.v-search .btn-primary { background: var(--terracotta); }
.v-search .btn-primary:hover { background: var(--terracotta-dark); }
.v-search .btn-primary::after { content: none; }

.search-results {
    margin-bottom: var(--space-5);
}

.search-results[hidden] {
    margin: 0;
}

/***********************************************
* Search results
*************************************************/
.search-results-title {
    font-size: var(--fs-h3);
    margin: 0 0 var(--space-4);
}

.search-group {
    margin-bottom: var(--space-5);
}

.search-group-title {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--ocean-deep);
    border-bottom: 2px solid var(--sea);
}

.chip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .chip-list { grid-template-columns: repeat(2, 1fr); }
}

.result-chip {
    display: flex;
    align-items: stretch;
    max-width: 100%;
    min-height: 56px;
    border: 1px solid rgba(58, 36, 24, .1);
    border-radius: var(--r-md);
    background-color: var(--sand-soft);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.result-chip:hover {
}

.result-chip a {
    color: var(--koa);
    text-decoration: none;
    transition: background-color .2s;
}

.result-chip a:hover {
    background-color: var(--ocean-mist);
}

.result-chip-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .6rem 1.1rem;
    min-width: 0;
}

.result-chip-kind {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--terracotta-dark);
}

.result-chip-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--ocean-deep);
    overflow-wrap: anywhere;
}

.result-chip-meta {
    font-size: var(--fs-sm);
    color: var(--koa-soft);
}

.result-chip .result-chip-action {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    font-weight: 600;
    color: var(--ocean-deep);
    border-left: 1px solid rgba(58, 36, 24, .12);
    background-color: var(--ocean-mist);
}

.result-chip a.result-chip-action:hover {
    background-color: var(--ocean-mist-deep);
}

.word-result-group {
    margin-bottom: var(--space-4);
}

.word-result-group .word-list {
    background-color: var(--sand-soft);
    border: 1px solid rgba(58, 36, 24, .1);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.word-result-set {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    margin: var(--space-3) 0 var(--space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.word-result-set a {
    color: var(--ocean-deep);
}

/***********************************************
* Word lists (search, frequency, phrases)
*************************************************/
.word-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.word-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid rgba(58, 36, 24, .1);
    overflow-wrap: anywhere;
    transition: background-color .2s;
}

.word-row:hover {
    background-color: rgba(211, 230, 224, .5);
}

.word-row:last-child {
    border-bottom: none;
}

.word-haw {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2em;
    color: var(--ocean-deep);
}

.word-eng {
    color: var(--koa);
}

/* Part-of-speech tag, same look as .tag */
.pos-tag {
    display: inline-flex;
    align-items: center;
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: var(--ocean-mist);
    color: var(--ocean-deep);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.5;
    justify-self: start;
    align-self: center;
    text-align: center;
    min-width: 0;
}

/***********************************************
* Hub pathway cards
*************************************************/
.pathway-grid {
    margin-top: var(--space-2);
}

.pathway-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.pathway-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ocean-deep);
}

.pathway-desc {
    max-width: 34ch;
    color: var(--koa-soft);
}

/***********************************************
* Word bank tabs
* (.tabs / [role=tab] in site.css supplies the pill; the button is restyled
* explicitly because bare-button styling no longer applies to classed buttons)
*************************************************/
.vocab-tabs {
    margin-bottom: var(--space-5);
}

.vocab-tab {
    min-height: 44px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: var(--r-pill);
    background-color: transparent;
    color: var(--ocean-deep);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.vocab-tab:hover {
    background-color: rgba(255, 255, 255, .55);
}

.vocab-tab[aria-selected="true"] {
    background-color: var(--ocean);
    color: #fff;
}

/***********************************************
* By Frequency
*************************************************/
.freq-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.freq-chips-label {
    font-weight: 600;
    color: var(--ocean-deep);
}

/* .chip comes from site.css; the JS-rendered level buttons only need button resets */
.freq-chip {
    min-width: 44px;
    justify-content: center;
    font-family: inherit;
    cursor: pointer;
}

.freq-legend {
    font-size: var(--fs-sm);
    color: var(--koa-soft);
    margin: var(--space-2) 0 var(--space-4);
}

.freq-level {
    margin-bottom: var(--space-5);
    background-color: var(--sand-soft);
    border: 1px solid rgba(58, 36, 24, .08);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.freq-level-title {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--ocean-deep);
    background-color: var(--ocean-mist);
    border-bottom: 1px solid rgba(13, 74, 87, .15);
}

.freq-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 104px minmax(0, 1fr);
    align-items: center;
}

.set-link {
    color: var(--ocean);
    font-size: var(--fs-sm);
}

@media (max-width: 600px) {
    .freq-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .freq-row .word-eng {
        grid-column: 1;
    }
    .freq-row .set-link {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

/***********************************************
* By Type cards (.card look)
*************************************************/
.type-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-4);
}

.type-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    height: 100%;
    padding: var(--space-5);
    text-decoration: none;
    color: var(--koa);
    background-color: var(--sand-soft);
    border: 1px solid rgba(58, 36, 24, .08);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    transition: transform .4s var(--spring), box-shadow .3s var(--ease);
}

.type-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
}

.type-card-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ocean-deep);
}

.type-card-haw {
    font-style: italic;
    color: var(--koa-soft);
}

.type-card-meta {
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--terracotta-dark);
}

/***********************************************
* Type page (wraps <word-bank-display>; word-bank.css styles its output)
*************************************************/
.vocab-type-main {
    width: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
    padding-block: var(--space-6) var(--space-7);
}

.vocab-type-main word-bank-display {
    display: block;
}

.vocab-type-main #word-display {
    width: 100%;
}

/* Anchor jumps land below the 64px sticky header */
.vocab-type-main .word-category-container,
.vocab-type-main .word-subcategory-container {
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

/* Highlight on arrival; terracotta matches the site focus ring */
.vocab-type-main .anchor-target {
    outline: 3px solid var(--terracotta);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .vocab-type-main #word-display {
        grid-template-columns: 1fr;
    }
}

/***********************************************
* Phrases
*************************************************/
.phrase-count {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ocean-deep);
    min-height: 1.5em;
    margin: var(--space-3) 0 var(--space-4);
}

.phrase-group {
    margin-bottom: var(--space-5);
}

.phrase-group-title {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--ocean-deep);
    border-bottom: 2px solid var(--sea);
}

.phrase-set-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.phrase-set {
    padding: var(--space-4) var(--space-5);
    background-color: var(--sand-soft);
    border: 1px solid rgba(58, 36, 24, .08);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.phrase-set:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}

.phrase-set-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.phrase-set-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0;
}

.phrase-set-title a {
    color: var(--ocean-deep);
}

/* Count pill, same look as .tag */
.phrase-set-count {
    display: inline-flex;
    align-items: center;
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: var(--ocean-mist);
    color: var(--ocean-deep);
    font-size: .8rem;
    font-weight: 600;
}

.phrase-set-actions {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

/* Quiet outlined pill, same look as .btn-quiet.btn-sm */
.practice-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .5rem 1.1rem;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    color: var(--ocean-deep);
    border: 2px solid var(--ocean);
    border-radius: var(--r-pill);
    transition: background-color .2s, transform .25s var(--spring);
}

.practice-link:hover {
    background-color: var(--ocean-mist);
    transform: translateY(-2px);
}

.practice-link:active {
    transform: translateY(0);
}

.phrase-set-preview[open] .word-list {
    margin-top: var(--space-2);
    background-color: var(--sand);
    border-radius: var(--r-sm);
}

/***********************************************
* Small screens and reduced motion
*************************************************/
@media (max-width: 600px) {
    .phrase-set {
        padding: var(--space-4);
    }

    .phrase-set-actions {
        margin-left: 0;
        width: 100%;
    }

    .phrase-set-actions .practice-link {
        flex: 1;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .type-card:hover,
    .result-chip:hover,
    .phrase-set:hover,
    .practice-link:hover {
        transform: none;
    }
}

/***********************************************
* Collapsible sections
* (frequency levels, phrase categories, search groups, type page headers)
* Focus ring: the site.css terracotta :focus-visible outline applies; no outline reset here.
*************************************************/
.collapsible > summary,
.collapsible-header {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    user-select: none;
}

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

/* Chevron: points down when open, right when closed */
.collapsible > summary::after,
.collapsible-header::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
}

.collapsible:not([open]) > summary::after,
.collapsible-header[aria-expanded="false"]::after {
    transform: rotate(-45deg);
}

.collapsible > summary:hover,
.collapsible-header:hover {
    opacity: .85;
}

/* Closed frequency card: no divider under the header */
.freq-level:not([open]) > .freq-level-title {
    border-bottom: none;
}

.collapsible:not([open]) > summary {
    margin-bottom: 0;
}

/* Collapsed type-page content (display rules elsewhere would override [hidden]) */
.vocab-type-main [hidden] {
    display: none !important;
}

/* Type-page headers stack vertically, so pin their chevron to the right edge */
.collapsible-header {
    position: relative;
    padding-right: var(--space-6);
}

.collapsible-header::after {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    margin: 0;
    transform: translateY(-70%) rotate(45deg);
}

.collapsible-header[aria-expanded="false"]::after {
    transform: translateY(-50%) rotate(-45deg);
}

/* Category pills: chevron sits inside the pill */
.word-category-container.collapsible-header {
    padding-right: 0;
}

.word-category-container.collapsible-header::after {
    right: var(--space-5);
    z-index: 1;
}

/* Section headings live inside the collapsible summaries; they take the summary's look */
.collapsible > summary > .summary-heading {
    font: inherit;
    color: inherit;
    margin: 0;
}

/* Touch targets */
.collapsible > summary {
    min-height: 44px;
}

.vocab-type-main .word-subcategory-container.collapsible-header {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.vocab-type-main #lang-toggle {
    min-height: 44px;
}

/* "Show phrases" disclosure matches the other collapsible chevrons */
.phrase-set-preview > summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ocean);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0;
}

.phrase-set-preview > summary::-webkit-details-marker {
    display: none;
}

.phrase-set-preview > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s var(--ease);
}

.phrase-set-preview[open] > summary::after {
    transform: rotate(45deg);
}