/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Word Unscrambler — style.css
   Pushes the shared .tool-card / .tool-input / .filter-pill scaffolding into
   the v2 .tool-widget visual treatment so the rendered output matches the
   canonical recatools-word-unscrambler-v2.html mockup 1:1.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Card → tool-widget shell ────────────────────────────────────────────────
   v2: white card, 1px border, 10px radius, NO inner padding (sections own
   their own padding), overflow hidden. */
.tool-card {
    padding:       0;
    overflow:      hidden;
    margin-bottom: 16px;
}

/* The form sits inside the tool-card with no extra spacing. */
#unscramble-form { display: block; }

/* ── Input row — bottom-border-only, monospace 22px ──────────────────────── */
.tool-input-row {
    position:       relative;
    display:        block;
    padding:        14px 16px 0;
    margin:         0;
    gap:            0;
}
.tool-input-wrap { position: relative; padding: 0; }

.tool-input {
    width:               100%;
    height:              auto;
    padding:             14px 56px 14px 0;
    background:          transparent;
    border:              none;
    border-bottom:       2px solid var(--border);
    border-radius:       0;
    font-family:         var(--font-mono);
    font-size:           22px;
    font-weight:         500;
    letter-spacing:      .12em;
    text-transform:      uppercase;
    color:               var(--text-dark);
    transition:          border-color .15s;
    outline:             none;
}
.tool-input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    font-size:      16px;
    color:          var(--text-muted);
    font-weight:    400;
}
.tool-input:focus {
    border-bottom-color: #16A34A;   /* v2 --tx text-tools accent */
    box-shadow:          none;
    background:          transparent;
}

/* Counter — pulled out of the trailing column and pinned to the input wrap. */
.char-count {
    position:        absolute;
    right:           42px;
    top:             50%;
    transform:       translateY(-50%);
    font-family:     var(--font-mono);
    font-size:       12px;
    color:           var(--text-muted);
    pointer-events:  none;
}

/* Clear button — pinned absolute next to the counter, small square. */
.clear-btn {
    position:       absolute;
    right:          0;
    top:            50%;
    transform:      translateY(-50%);
    width:          24px;
    height:         24px;
    padding:        0;
    border:         1px solid #CDD0D6;
    border-radius:  5px;
    background:     #fff;
    color:          var(--text-muted);
    font-size:      11px;
    line-height:    1;
    flex:           none;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     background .15s;
}
.clear-btn:hover { background: #EEF0F2; color: var(--text-dark); }

/* ── Filter row — horizontal scroll, smaller pills with green active ─────── */
.filter-row {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        12px 16px 0;
    margin:         0;
    overflow-x:     auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap:      nowrap;
}
.filter-row::-webkit-scrollbar { display: none; }

.filter-label {
    font-size:    12px;
    font-weight:  400;
    color:        var(--text-body);
    flex-shrink:  0;
    white-space:  nowrap;
}

.filter-pill {
    padding:        5px 13px;
    border:         1px solid #CDD0D6;
    border-radius:  20px;
    background:     #fff;
    font-family:    var(--font-sans);
    font-size:      13px;
    font-weight:    400;
    color:          var(--text-body);
    cursor:         pointer;
    transition:     all .15s;
    white-space:    nowrap;
    flex-shrink:    0;
    min-height:     34px;
    display:        flex;
    align-items:    center;
}
.filter-pill:hover {
    border-color: var(--text-body);
    color:        var(--text-dark);
    background:   #fff;
}
.filter-pill.active {
    background:   #16A34A;        /* v2 --tx green */
    border-color: #16A34A;
    color:        #fff;
}

/* ── Action row — submit + ghost example, 12px padding ───────────────────── */
.action-row {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   8px;
    padding:               12px 16px 14px;
    margin:                0;
}
@media (min-width: 480px) {
    .action-row { grid-template-columns: 1fr auto; }
}
.btn-primary {
    height:        auto;
    min-height:    48px;
    padding:       14px 20px;
    border-radius: 8px;
    font-size:     15px;
    font-weight:   500;
    flex:          none;
}
.btn-ghost {
    height:        auto;
    min-height:    48px;
    padding:       14px 18px;
    border:        1px solid #CDD0D6;
    border-radius: 8px;
    font-size:     14px;
    font-weight:   400;
    color:         var(--text-mid);
    background:    #fff;
}
.btn-ghost:hover { background: #F7F8F9; border-color: var(--border); }

/* ── Results bar (v2 .results-bar) — green-tinted across the card ────────── */
.results-bar {
    display:       flex;
    align-items:   center;
    gap:           10px;
    flex-wrap:     wrap;
    padding:       12px 16px;
    background:    #F0FDF4;
    border-top:    1px solid rgba(22,163,74,.2);
}
.res-count { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: #16A34A; }
.res-query { font-family: var(--font-mono); font-size: 12px; color: #059669; }
.res-copy {
    margin-left: auto;
    display:     flex; align-items: center; gap: 5px;
    font-family: var(--font-sans);
    font-size:   12px; font-weight: 500; color: #16A34A;
    padding:     5px 12px;
    border:      1px solid rgba(22,163,74,.2); border-radius: 5px;
    background:  #fff; cursor: pointer;
    transition:  all .15s;
}
.res-copy:hover { background: #16A34A; color: #fff; border-color: #16A34A; }
.res-copy svg { width: 12px; height: 12px; stroke: currentColor; }

/* ── Results body (v2 .results-body) ─────────────────────────────────────── */
#results-section { padding: 0; background: transparent; }
.results-body { padding: 14px 16px 18px; }
.word-group { margin-bottom: 14px; }
.wg-hdr { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.wg-len {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-muted);
}
.wg-dot { width: 3px; height: 3px; border-radius: 50%; background: #CDD0D6; }
.wg-ct  { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.wg-words { display: flex; flex-wrap: wrap; gap: 5px; }

.word-chip {
    font-family:    var(--font-mono);
    font-size:      13px; font-weight: 500; letter-spacing: .08em;
    text-transform: uppercase;
    padding:        6px 11px;
    border-radius:  5px;
    background:     #F7F8F9;
    border:         1px solid var(--border);
    color:          var(--text-dark);
    cursor:         pointer;
    transition:     all .15s;
    text-decoration: none;
    min-height:     36px;
    display:        inline-flex;
    align-items:    center;
}
.word-chip:hover {
    background:   var(--text-dark);
    color:        #fff;
    border-color: var(--text-dark);
}
.word-chip.best {
    background:   #F0FDF4;
    border-color: rgba(22,163,74,.2);
    color:        #14532D;
}

/* ── Loading spinner: three-dot pulse (kept) ─────────────────────────────── */
.loading-spinner {
    display: flex; align-items: center; justify-content: center;
    gap: 0.45rem; margin: 14px auto; width: fit-content;
}
.loading-spinner::before,
.loading-spinner::after,
.loading-spinner span {
    content: ''; display: block;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent);
    animation: ws-pulse 1.1s ease-in-out infinite;
}
.loading-spinner::before { animation-delay: 0s; }
.loading-spinner span    { animation-delay: 0.18s; }
.loading-spinner::after  { animation-delay: 0.36s; }

@keyframes ws-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ── Language switcher pill (kept, bumped to v2 colors) ──────────────────── */
.lang-switcher {
    display: inline-flex; gap: .375rem; align-items: center;
    background: #fff; border: 1px solid var(--border);
    border-radius: 999px; padding: .2rem .75rem;
    font-size: .8125rem; font-weight: 600;
}
.lang-switcher a       { color: var(--text-muted); text-decoration: none; }
.lang-switcher a:hover { color: var(--accent); }
.lang-switcher .active { color: var(--accent); pointer-events: none; }
.lang-switcher-sep     { color: var(--border); font-weight: 400; }

/* cache-buster: 2026-05-24T05:06:05Z */