/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — URL Encoder / Decoder — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mode toggle pills ───────────────────────────────────────────────────────── */
.mode-toggle {
    display:     flex;
    gap:         0.375rem;
    margin-bottom: 1.25rem;
    background:  var(--bg);
    border:      1px solid var(--border);
    border-radius: 999px;
    padding:     0.25rem;
    width:       fit-content;
}

.mode-pill {
    background:  transparent;
    border:      none;
    border-radius: 999px;
    padding:     0.4rem 1.125rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--muted);
    cursor:      pointer;
    transition:  background 0.15s, color 0.15s;
    line-height: 1.4;
}

.mode-pill:hover {
    color: var(--text);
}

.mode-pill.active {
    background: var(--accent);
    color:      #fff;
}

/* ── Sub-tabs (Full URL | Component) ─────────────────────────────────────────── */
.sub-tabs {
    display:       flex;
    gap:           0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.sub-tab {
    background:    transparent;
    border:        none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding:       0.5rem 1rem;
    font-family:   'IBM Plex Sans', sans-serif;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--muted);
    cursor:        pointer;
    transition:    color 0.15s, border-color 0.15s;
}

.sub-tab:hover {
    color: var(--text);
}

.sub-tab.active {
    color:        var(--accent);
    border-color: var(--accent);
}

/* ── Textarea pair ────────────────────────────────────────────────────────────── */
.url-textarea {
    width:         100%;
    min-height:    100px;
    padding:       0.75rem 1rem;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-family:   'SFMono-Regular', 'Consolas', 'Menlo', monospace;
    font-size:     0.84rem;
    line-height:   1.55;
    color:         var(--text);
    background:    #fff;
    resize:        vertical;
    transition:    border-color 0.15s;
    box-sizing:    border-box;
    word-break:    break-all;
}

.url-textarea:focus {
    outline:      none;
    border-color: var(--accent);
}

.url-textarea[readonly] {
    background: var(--bg);
    cursor:     default;
}

.url-textarea-label {
    display:       block;
    font-size:     0.8125rem;
    font-weight:   600;
    color:         var(--muted);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.url-textarea-wrap {
    margin-bottom: 1rem;
}

/* ── Action row ───────────────────────────────────────────────────────────────── */
.url-action-row {
    display:   flex;
    gap:       0.625rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

/* ── Privacy note ─────────────────────────────────────────────────────────────── */
.privacy-note {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.78rem;
    color:       var(--muted);
    margin-top:  0.875rem;
    padding:     0.5rem 0.75rem;
    background:  var(--bg);
    border-radius: 8px;
    border:      1px solid var(--border);
}

.privacy-note svg {
    flex-shrink: 0;
}

/* ── Quick reference grid ─────────────────────────────────────────────────────── */
.qref-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0.375rem 1rem;
    margin-top:            0.875rem;
}

@media (max-width: 479px) {
    .qref-grid {
        grid-template-columns: 1fr;
    }
}

.qref-row {
    display:         flex;
    align-items:     center;
    gap:             0.375rem;
    font-size:       0.84rem;
    padding:         0.3rem 0;
    border-bottom:   1px solid var(--border);
}

.qref-char {
    font-family:   'SFMono-Regular', 'Consolas', monospace;
    font-weight:   700;
    font-size:     0.875rem;
    color:         var(--text);
    min-width:     2.5rem;
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: 4px;
    padding:       0.1rem 0.4rem;
    text-align:    center;
}

.qref-arrow {
    color:       var(--muted);
    font-size:   0.75rem;
}

.qref-encoded {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-weight: 600;
    color:       var(--accent);
}

/* ── Mode panel visibility ────────────────────────────────────────────────────── */
.url-mode-panel { display: none; }
.url-mode-panel.active { display: block; }
.url-subpanel { display: none; }
.url-subpanel.active { display: block; }

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