/* Punsaurus — syllable-level rhymes & puns.
   Layout, type and colours come from modern.css; this file only styles the
   parts that are unique to this page. */

.pun-search {
    max-width: 760px;
    margin: 0 auto 34px;
    /* Clicking a chip scrolls back here (scrollToSearch in punsaurus.js). The
       site nav is sticky and 48px tall, so without this the box lands under it. */
    scroll-margin-top: 64px;
}

.pun-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.pun-search-row input,
.pun-topic-row input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    outline: none;
    transition: all 0.3s ease;
}

.pun-topic-row input {
    padding: 10px 18px;
    font-size: 0.95rem;
}

/* The page's accent is the logo dino's green (#3ab54a sampled from
   punsaurus.png) rather than the site teal, so the mascot and the tool read as
   one thing. Text uses lighten it as needed: #4fc45e is 7.1:1 on the page
   background where the raw green is 5.97:1. */
.pun-search-row input:focus,
.pun-topic-row input:focus {
    border-color: #3ab54a;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(58, 181, 74, 0.3);
}

.pun-search-row button {
    padding: 14px 26px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    background: #2f7a77;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pun-search-row button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(61, 154, 150, 0.4);
}

.pun-search-row button:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ---------------- Results ---------------- */
.pun-results {
    max-width: 760px;
    margin: 0 auto;
}

/* Before a search the page is just a search bar, and More to Explore sitting
   right underneath reads as part of the tool. A rule and some air make it clear
   where the app stops. The empty case gets extra room since there's nothing
   between the bar and the link cards at all. */
.pun-results:empty {
    margin-bottom: 120px;
}

.pun-results + .section-heading {
    margin-top: 0;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.result-card {
    margin-bottom: 22px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
}

.result-title {
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.result-subtitle {
    color: #b8b8b8;
    font-size: 0.88rem;
    margin-bottom: 12px;
}

.status {
    margin-top: 26px;
    text-align: center;
    color: #b8b8b8;
    font-style: italic;
    padding: 18px;
}

.status-error {
    color: #ff8a8a;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: 12px;
    font-style: normal;
}

/* Partial results: something is missing but the page still works, so this sits
   below the error red and above ordinary body copy. */
.status-warn {
    margin-top: 0;
    margin-bottom: 18px;
    color: #ffd08a;
    background: rgba(255, 190, 107, 0.1);
    border: 1px solid rgba(255, 190, 107, 0.32);
    border-radius: 12px;
    font-style: normal;
}

/* ---------------- Copy ---------------- */
.copy-btn {
    font-family: 'Nunito', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: #cfc6f5;
    background: rgba(154, 138, 232, 0.14);
    border: 1px solid rgba(154, 138, 232, 0.4);
    border-radius: 12px;
    padding: 3px 11px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.copy-btn:hover {
    background: rgba(154, 138, 232, 0.32);
    color: #ffffff;
}

.copy-btn.is-done {
    color: #9fe6b4;
    border-color: rgba(120, 220, 160, 0.5);
    background: rgba(120, 220, 160, 0.14);
}

/* Section-level button sits under the subtitle, before the grid. */
.result-card > .copy-btn {
    margin-bottom: 14px;
}

/* Per-pun buttons stay in flow, right-aligned. Absolute positioning would sit on
   top of the card text, and revealing them on hover would both shift the grid and
   leave touch users without them. Copy joins the row only once a definition is
   open, since a pun with nothing attached is just a word you could retype. */
.pun-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}

/* Define is the payoff, so it reads as the primary action of the two. */
.define-btn {
    color: #ffd166;
    background: rgba(255, 209, 102, 0.14);
    border-color: rgba(255, 209, 102, 0.45);
}

.define-btn:hover {
    background: rgba(255, 209, 102, 0.3);
    color: #ffffff;
}

/* ---------------- Syllable breakdown ---------------- */
.syllable-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 6px;
}

.syllable-box {
    text-align: center;
    background: rgba(58, 181, 74, 0.12);
    border: 1px solid rgba(58, 181, 74, 0.45);
    border-radius: 12px;
    padding: 10px 18px;
}

.syllable-chunk {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.syllable-phones {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.72rem;
    color: #a8dcae;
    margin-top: 2px;
}

.syllable-dot {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.4rem;
    font-weight: 900;
}

/* Word boundary inside a phrase: a visible gap where syllables get a dot. */
.syllable-wordgap {
    display: inline-block;
    width: 18px;
}

.ipa-line {
    text-align: center;
    font-family: 'Consolas', 'Courier New', monospace;
    color: #b8b8b8;
    margin-top: 8px;
}

/* ---------------- Puns ---------------- */
.pun-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    /* Each card sizes to its own content. Without this, grid items stretch to the
       tallest in the row, so closing one definition left the card full height
       while a neighbour was still open. */
    align-items: start;
}

.pun-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.pun-item:hover {
    border-color: rgba(255, 209, 102, 0.55);
}

.pun-item.on-topic {
    background: rgba(58, 181, 74, 0.08);
    border-color: rgba(58, 181, 74, 0.45);
}

.pun-topic {
    color: #4fc45e;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.pun-def {
    color: #d8d8d8;
    font-size: 0.85rem;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

.pun-word {
    font-size: 1.15rem;
    font-weight: 800;
}

.pun-swap {
    color: #ffd166;
}

.pun-sep {
    color: rgba(255, 255, 255, 0.3);
    padding: 0 2px;
}

/* Word boundary in a phrase pun: a real space, wider than the syllable dot. */
.pun-wordgap {
    display: inline-block;
    width: 10px;
}

.pun-how {
    color: #9a9a9a;
    font-size: 0.78rem;
    margin-top: 2px;
}

/* ---------------- Chips ---------------- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    font-family: 'Nunito', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(154, 138, 232, 0.16);
    border: 1px solid rgba(154, 138, 232, 0.45);
    border-radius: 16px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chip:hover {
    background: rgba(154, 138, 232, 0.35);
}

.syllable-group {
    margin-bottom: 12px;
}

.syllable-label {
    font-weight: 800;
    color: #a8dcae;
    margin-bottom: 6px;
}

/* The "Near rhymes" label inside the Rhymes card follows the perfect-rhyme
   chips directly; without this it sits closer to the chips above it than to
   its own. */
.chip-row + .syllable-label {
    margin-top: 22px;
}

/* ---------------- Definition ---------------- */
.definition-line {
    color: #d8d8d8;
    margin-bottom: 8px;
}

.definition-pos {
    color: #9a8ae8;
}

/* Book blue, from the book the logo dino is reading, lightened to 7.6:1 on the
   page background. Blue keeps "this is a link" legible while the green above
   carries the rest of the page. */
.clickable-word {
    color: #8fb3ff;
    cursor: pointer;
    text-decoration: underline dotted;
}

.clickable-word:hover {
    text-decoration: underline;
}

/* The Datamuse/dictionary credit under the results. Muted on purpose: owed, not featured. */
.pun-credit {
    /* #999, not #888: the body gradient tops out at #16213e and #888 measures 4.48:1
       against it, a hair under the 4.5 floor for small text. #999 clears it at 5.6. */
    color: #999;
    font-size: 0.85rem;
    text-align: center;
    margin: 30px 0 0;
}

.pun-credit a {
    color: #aaa;
}

@media (max-width: 520px) {
    .pun-search-row {
        flex-direction: column;
    }

    /* One column, not two. Two columns dates from when cards were bare words;
       now each carries Define/Copy buttons and can open a definition, which is
       cramped at half of a phone's width. */
    .pun-grid {
        grid-template-columns: 1fr;
    }
}