/* ==========================================================================
   Toolbelt-specific styles. Loaded only by /toolbelt/.
   ========================================================================== */

.tb { padding: 2rem 1rem 4rem; max-width: var(--page); margin-inline: auto; }
@media (min-width: 768px) { .tb { padding: 3rem 2rem 5rem; } }

.tb-head {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: flex-end; justify-content: space-between;
    margin-bottom: 2rem;
}
.tb-head h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin-top: .375rem; }

.tb-privacy {
    display: flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 600; color: var(--muted);
    background: #fff; border: 1px solid var(--border);
    padding: .5rem 1rem; border-radius: var(--r-pill);
}
.tb-privacy svg { width: .9375rem; height: .9375rem; flex: none; }

/* --- Search + rail -------------------------------------------------------- */

.tb-search {
    position: relative; display: flex; align-items: center;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 0 1rem; margin-bottom: 1rem;
}
.tb-search svg { width: 1rem; height: 1rem; color: var(--faint); flex: none; }
.tb-search input {
    border: 0; background: none; padding: .75rem .75rem; flex: 1;
    font-size: .875rem;
}
.tb-search input:focus { outline: none; box-shadow: none; border: 0; }
.tb-search kbd {
    font-family: inherit; font-size: .6875rem; font-weight: 700; color: var(--faint);
    border: 1px solid var(--border); border-radius: .375rem; padding: .125rem .375rem;
}
@media (max-width: 640px) { .tb-search kbd { display: none; } }

.tb-rail {
    display: flex; gap: .5rem; overflow-x: auto;
    padding-bottom: .75rem; margin-bottom: 1.5rem;
    scrollbar-width: thin;
}
.tb-rail button {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: var(--r-pill);
    background: #fff; border: 1px solid var(--border);
    font-size: .8125rem; font-weight: 600; white-space: nowrap;
    transition: background-color .2s, color .2s, border-color .2s;
}
.tb-rail button svg { width: .875rem; height: .875rem; color: var(--faint); }
.tb-rail button:hover { border-color: var(--faint); }
.tb-rail button[aria-selected="true"] {
    background: var(--ink); color: #fff; border-color: var(--ink);
}
.tb-rail button[aria-selected="true"] svg { color: #fff; }

/* --- Stage ---------------------------------------------------------------- */

.tb-stage {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-inner); padding: 1.5rem;
}
@media (min-width: 768px) { .tb-stage { padding: 2rem; } }

.tool-head { margin-bottom: 1.5rem; }
.tool-head h2 { font-size: 1.5rem; margin-bottom: .375rem; }
.tool-head p { font-size: .8125rem; color: var(--muted); font-weight: 300; line-height: 1.7; max-width: 46rem; }

.tool-bar {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin-bottom: 1rem;
}
.tool-bar .spacer { flex: 1; }

.io { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .io.split { grid-template-columns: 1fr 1fr; } }

.io-block { display: flex; flex-direction: column; min-width: 0; }
.io-label {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .375rem;
}
.io-label span {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted);
}

.out {
    font-family: var(--mono); font-size: .8125rem; line-height: 1.65;
    background: #f9fafb; border: 1px solid var(--border); border-radius: .75rem;
    padding: .875rem; min-height: 11rem; max-height: 34rem;
    overflow: auto; white-space: pre-wrap; word-break: break-word; tab-size: 2;
    margin: 0;
}
.out.wrap-none { white-space: pre; word-break: normal; }
.out:empty::before { content: attr(data-empty); color: var(--faint); }

/* --- Result rows (ids, hashes, timestamps) -------------------------------- */

.rows { display: flex; flex-direction: column; gap: .5rem; }
.rows .r {
    display: flex; align-items: center; gap: .75rem;
    background: #f9fafb; border: 1px solid var(--border);
    border-radius: .75rem; padding: .625rem .875rem;
}
.rows .r .k {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted);
    width: 6.5rem; flex: none;
}
.rows .r .v {
    font-family: var(--mono); font-size: .8125rem;
    flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
}
.rows .r .v.multi { white-space: pre-wrap; word-break: break-all; }

/* --- JSON tree ------------------------------------------------------------ */

.tree { font-family: var(--mono); font-size: .8125rem; line-height: 1.7; }
.tree ul { list-style: none; margin: 0; padding-left: 1.25rem; border-left: 1px dashed var(--border); }
.tree li { position: relative; }
.tree .tw {
    cursor: pointer; user-select: none;
    color: var(--faint); display: inline-block; width: 1rem;
}
.tree .tw::before { content: '\25be'; }
.tree li.collapsed > .tw::before { content: '\25b8'; }
.tree li.collapsed > ul { display: none; }
.tree .key { color: #7c3aed; }
.tree .str { color: #16a34a; }
.tree .num { color: #2563eb; }
.tree .bool { color: #ea580c; }
.tree .null { color: var(--faint); }
.tree .meta { color: var(--faint); font-size: .75rem; }

/* --- Regex highlighting --------------------------------------------------- */

.hl {
    font-family: var(--mono); font-size: .8125rem; line-height: 1.7;
    background: #f9fafb; border: 1px solid var(--border); border-radius: .75rem;
    padding: .875rem; min-height: 8rem; max-height: 24rem; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
}
.hl mark { background: #fde68a; color: inherit; border-radius: .1875rem; padding: 0 .0625rem; }
.hl mark.alt { background: #bfdbfe; }

table.matches { font-size: .8125rem; }
table.matches th, table.matches td {
    text-align: left; padding: .5rem .625rem; border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}
table.matches th {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700;
}
table.matches td { font-family: var(--mono); word-break: break-all; }
table.matches td.n { font-family: inherit; color: var(--faint); width: 3rem; }

/* --- Diff ----------------------------------------------------------------- */

.diff {
    font-family: var(--mono); font-size: .8125rem; line-height: 1.6;
    border: 1px solid var(--border); border-radius: .75rem;
    overflow: auto; max-height: 34rem; background: #fff;
}
.diff .dl { display: flex; }
.diff .dl > .g {
    flex: none; width: 3.5rem; padding: 0 .5rem; text-align: right;
    color: var(--faint); background: #f9fafb; border-right: 1px solid var(--hairline);
    user-select: none;
}
.diff .dl > .t { padding: 0 .75rem; white-space: pre-wrap; word-break: break-word; flex: 1; }
.diff .dl.add { background: var(--add); }
.diff .dl.del { background: var(--del); }
.diff .dl.add > .t::before { content: '+ '; color: #15803d; }
.diff .dl.del > .t::before { content: '- '; color: #b91c1c; }
.diff .dl.same > .t::before { content: '  '; }

/* --- Flags / chips -------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chips button {
    padding: .3125rem .75rem; border-radius: var(--r-pill);
    border: 1px solid var(--border); background: #fff;
    font-size: .75rem; font-weight: 600; font-family: var(--mono);
}
.chips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips.presets button { font-family: inherit; }

/* --- Command palette ------------------------------------------------------ */

.palette {
    position: fixed; inset: 0; z-index: 300;
    background: rgb(17 24 39 / .35);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 1rem 1rem;
}
.palette[hidden] { display: none; }
.palette-box {
    width: 100%; max-width: 32rem; background: #fff;
    border-radius: var(--r-inner); box-shadow: var(--shadow-2xl); overflow: hidden;
}
.palette-box input {
    width: 100%; border: 0; border-bottom: 1px solid var(--hairline);
    padding: 1rem 1.25rem; font-size: .9375rem; border-radius: 0;
}
.palette-box input:focus { outline: none; box-shadow: none; }
.palette-box ul { list-style: none; margin: 0; padding: .5rem; max-height: 20rem; overflow-y: auto; }
.palette-box li {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .75rem; border-radius: .75rem;
    font-size: .875rem; cursor: pointer;
}
.palette-box li svg { width: .9375rem; height: .9375rem; color: var(--faint); flex: none; }
.palette-box li .hint { margin-left: auto; font-size: .75rem; color: var(--faint); }
.palette-box li[aria-selected="true"] { background: var(--ink); color: #fff; }
.palette-box li[aria-selected="true"] svg,
.palette-box li[aria-selected="true"] .hint { color: #fff; }