/* Word tools: translate, rewrite, thesaurus, dictionary, acronyms, alliteration and the font generator. They share this one sheet
   because they share a shell — the studio layout (tool-pages.css) under a compact hero, a switch between the tools, and results drawn
   as the kit's cards, lists and chips (ui-kit.css) on the stage. What is here is only what the kit does not already say. */

.words { max-width: 80rem; }
.words.tool { max-width: none; }

/* Results on the stage: kit cards, one under another at the stage's own rhythm. A bare wrapper (thesaurus, dictionary) stacks its
   cards; a card that is itself the results (acronyms, alliteration) already does. */
.tool__stage .words__results { display: flex; flex-direction: column; gap: 0.85rem; max-width: none; margin: 0; }
.tool__stage .words__out { min-height: min(13rem, 40vh); }

.personalities .tool__actions:not(:has(.btn)) { display: none; }

.words__aside { margin: 0; font-size: 0.9rem; }
.words__heading { margin: 0; min-width: 0; font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }

/* The looked-up word above its sense cards, with how many there are. */
.words__resultHead { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.65rem; }

/* ---- the switch between the tools: the kit's segmented switch, wearing the sidebar's icons ---- */
.words__tabs { align-self: flex-start; max-width: 100%; }
.words__tabs .words__tab { display: inline-flex; align-items: center; gap: 0.35rem; }
.words__tab svg { width: 0.9rem; height: 0.9rem; flex: none; opacity: 0.75; }

/* NavLink marks the current page "active"; light it the way the switch lights a pressed button. */
.ui-seg .words__tab.active { background: var(--rl-surface); color: var(--rl-text); font-weight: 600; box-shadow: var(--rl-shadow-sm); }
.ui-seg .words__tab.active svg { color: var(--rl-accent); opacity: 1; }

/* ---- the model: a picker in the setup strip, or the one model's name in the same pill ---- */
.tool__setup .words__model { margin: 0; }
.tool__setup .words__model select { max-width: 15rem; }
.words__modelName {
    max-width: 15rem;
    padding: 0.25rem 0.65rem 0.25rem 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rl-text);
}

/* Copy and swap buttons carry a small icon. */
.words__copy, .words__swapBtn { display: inline-flex; align-items: center; gap: 0.3rem; }
.words__copy svg, .words__swapBtn svg { width: 0.85rem; height: 0.85rem; flex: none; }

/* ---- translate and rewrite: the text out ---- */
.words__out {
    min-height: 13rem;
    padding: 0.6rem 0.7rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--rl-surface-raised);
    border: 1px solid var(--rl-border);
    border-radius: 8px;
}

/* ---- thesaurus and dictionary: sense cards, word chips, definitions ---- */

/* A sense's title is its part of speech as a chip and its meaning in plain weight, so the chip is what the eye catches. */
.words__meaning { color: var(--rl-text-muted); font-weight: 450; line-height: 1.4; }
.words__word { overflow-wrap: anywhere; }
.words__pron { color: var(--rl-text-muted); font-weight: 400; font-size: 0.88rem; font-family: var(--bs-font-monospace, monospace); }
.words__origin { margin: 0; line-height: 1.55; }

.words__entry + .words__entry { margin-top: 0.35rem; }
.words__entry .ui-h3 { margin-top: 0; }

/* Words to click and look up in turn: buttons, so not the kit's status chip, but the same pill. */
.words__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.words__chip {
    padding: 0.25rem 0.7rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--rl-text);
    background: var(--rl-surface-raised);
    border: 1px solid var(--rl-border);
    border-radius: 999px;
    cursor: pointer;
}

.words__chip:hover:not(:disabled) { border-color: var(--rl-accent); color: var(--rl-accent); }
.words__chip:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.words__chip:disabled { opacity: 0.55; cursor: not-allowed; }
.words__chip--anti { background: transparent; border-style: dashed; }

.words__defs { margin: 0.35rem 0 0; padding-left: 1.4rem; }
.words__defs li { margin-bottom: 0.5rem; line-height: 1.5; }
.words__defs li::marker { color: var(--rl-text-muted); font-variant-numeric: tabular-nums; }
.words__example { display: block; margin-top: 0.15rem; color: var(--rl-text-muted); font-style: italic; }

/* ---- acronyms and alliteration: the switch on the banner, the big initials, the kit list of suggestions ---- */
.words__modes { flex-wrap: wrap; }

.words__big { margin: 0; }
.words__bigText { font-size: 2.4rem; font-weight: 750; line-height: 1.15; letter-spacing: 0.08em; overflow-wrap: anywhere; }

.words__list > li > .ui-row { align-items: flex-start; padding-block: 0.6rem; }
.words__list .ui-row__end { align-self: center; }
.words__acrWord {
    min-width: 4.5rem;
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: 0.08em;
    color: var(--rl-accent);
    overflow-wrap: anywhere;
}
.words__acrText, .words__lineText { min-width: 0; line-height: 1.55; overflow-wrap: anywhere; }
.words__acrText { padding-top: 0.15rem; }
.words__acrText strong { color: var(--rl-accent); font-size: 1.05em; }

.words__hit { padding: 0 0.1em; color: inherit; background: color-mix(in srgb, var(--rl-accent) 22%, transparent); border-radius: 3px; }

/* ---- font generator: a card per family, a tile per style ---- */
.words__styleGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.words__style {
    min-width: 0;
    padding: 0.5rem 0.7rem 0.65rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-raised);
    transition: border-color var(--rl-dur) var(--rl-ease);
}
.words__style:hover { border-color: color-mix(in srgb, var(--tone, var(--rl-accent)) 50%, var(--rl-border)); }
.words__styleHead { display: flex; align-items: center; gap: 0.5rem; min-height: 1.9rem; margin-bottom: 0.2rem; }
.words__styleName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rl-text-muted); }
.words__styleHead .btn { margin-left: auto; flex: none; }
.words__styleOut { font-size: 1.15rem; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }

@media (max-width: 800px) {
    .words__out { min-height: 8rem; }
    .words__list > li > .ui-row { flex-wrap: wrap; }
    .words__bigText { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .words__style { transition: none; }
}