@charset "UTF-8";

/* 工具独立布局避开文章排版规则，颜色、字体与版心继承 lunalucis。 */
.listing-page.tool-page { min-height: 0; padding-block: 20px; }
.json-tool { padding: 0; }
.json-tool__workspace { border: 1px solid var(--line); background: var(--surface); }
.json-tool__toolbar { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr) minmax(300px, 1fr); align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.json-tool__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.json-tool__toolbar button, .json-tool__more { min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 3px; background: transparent; font-size: .84rem; cursor: pointer; }
/* 切换器内部 32px 加两侧边框，工具栏控件统一为 34px。 */
.json-tool__toolbar button { min-height: 34px; height: 34px; padding-block: 4px; }
.json-tool__toolbar button:hover, .json-tool__more:hover { background: var(--soft); }
.json-tool__toolbar .json-tool__primary { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.json-tool__toolbar .json-tool__primary:hover { background: var(--ink); opacity: .85; }
.json-tool__toolbar button:disabled { cursor: wait; opacity: .55; }
.json-tool__panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.json-tool__pane { min-width: 0; }
.json-tool__pane + .json-tool__pane { border-left: 1px solid var(--line); }
.json-tool__label { display: flex; min-height: 36px; padding: 6px 10px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.json-tool__label label { margin: 0; font-size: .8rem; font-weight: 500; }
.json-tool__label > span { color: var(--muted); font-size: .7rem; }
.json-tool__input, .json-tool__output { display: block; width: 100%; height: clamp(480px, 70dvh, 900px); margin: 0; padding: 10px; overflow: auto; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-size: .82rem; line-height: 1.8; tab-size: 2; }
.json-tool__output { height: calc(clamp(480px, 70dvh, 900px) + 36px); }
.json-tool__input { resize: none; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
.json-tool__input::placeholder { color: var(--muted); opacity: 1; }
/* 输入焦点用左侧蓝线表示；后置错误规则优先显示红线。 */
.json-tool__input:focus { outline: none; box-shadow: inset 3px 0 var(--focus); }
.json-tool__output:focus-visible { outline-offset: -2px; }
.json-tool__input[aria-invalid="true"] { box-shadow: inset 3px 0 var(--signal); }
.json-tool__empty { margin: 0; color: var(--muted); font-family: var(--sans); font-size: .84rem; white-space: normal; }
.json-tool__node { min-width: max-content; white-space: pre; }
.json-tool__node summary { width: fit-content; min-height: 30px; cursor: pointer; }
.json-tool__node summary:hover { background: var(--soft); }
.json-tool__children { margin-left: 2ch; padding-left: 1ch; border-left: 1px solid var(--line); }
.json-tool__leaf, .json-tool__closing { min-height: 26px; }
.json-tool__key { color: var(--project-status-blue); }
/* 字符串和数字值统一使用紫色，按主题调整明度以保证可读性。 */
.json-tool__string, .json-tool__number { color: #8236c4; }
:root[data-theme="dark"] .json-tool__string, :root[data-theme="dark"] .json-tool__number { color: #c792f0; }
.json-tool__literal { color: var(--signal); }
.json-tool__count { padding-inline: 12px 6px; color: var(--muted); font-family: var(--sans); font-size: .72rem; }
.json-tool__node[open] > summary .json-tool__closed { display: none; }
.json-tool__more { display: block; margin: 8px 0; color: var(--muted); font-family: var(--sans); }
.json-tool__status { min-width: 0; margin: 0; padding: 0; text-align: center; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
/* 等待输入为灰色，处理中及成功为蓝色，错误使用主题警示色。 */
.json-tool__status[data-state="info"], .json-tool__status[data-state="success"] { color: var(--project-status-blue); }
.json-tool__status[data-state="error"] { color: var(--signal); }
@media (max-width: 980px) {
  .json-tool__toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .json-tool__status { grid-column: 1 / -1; grid-row: 2; padding-bottom: 4px; }
}
@media (max-width: 720px) {
  .json-tool__panes { grid-template-columns: minmax(0, 1fr); }
  .json-tool__pane + .json-tool__pane { border-left: 0; border-top: 1px solid var(--line); }
  .json-tool__input, .json-tool__output { height: 420px; font-size: .8rem; }
  .json-tool__toolbar { padding: 6px 10px; }
  .json-tool__toolbar button { padding-inline: 14px; }
}

/* 网页全屏仅覆盖当前视口，不调用浏览器 Fullscreen API。 */
.json-tool__view-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.json-tool__toolbar .json-tool__fullscreen { display: grid; flex: 0 0 34px; width: 34px; height: 34px; padding: 6px; place-items: center; }
.json-tool__fullscreen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.json-tool__fullscreen .json-tool__restore-icon { display: none; }
.json-tool__fullscreen[aria-pressed="true"] .json-tool__expand-icon { display: none; }
.json-tool__fullscreen[aria-pressed="true"] .json-tool__restore-icon { display: block; }
html.json-tool-fullscreen, html.json-tool-fullscreen body { overflow: hidden; }
.json-tool__workspace.is-fullscreen { position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100dvh; border: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.json-tool__workspace.is-fullscreen .json-tool__toolbar { flex: 0 0 auto; }
.json-tool__workspace.is-fullscreen .json-tool__panes { flex: 1; min-height: 0; }
.json-tool__workspace.is-fullscreen .json-tool__pane { display: flex; flex-direction: column; min-height: 0; }
.json-tool__workspace.is-fullscreen .json-tool__label { flex: 0 0 auto; }
.json-tool__workspace.is-fullscreen .json-tool__input,
.json-tool__workspace.is-fullscreen .json-tool__output { flex: 1; min-height: 0; height: 0; }
@media (max-width: 720px) {
  .json-tool__workspace.is-fullscreen .json-tool__panes { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 紧凑步进开关，左右按钮与中间数字组合为一个控件。 */
.json-tool__indent { display: flex; flex-shrink: 0; align-items: center; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.json-tool__toolbar .json-tool__indent button { display: grid; min-height: 32px; height: 32px; width: 28px; padding: 0; border: 0; border-radius: 0; place-items: center; }
.json-tool__indent button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.json-tool__indent output { min-width: 24px; text-align: center; font-family: var(--mono); font-size: .8rem; }
.json-tool__toolbar .json-tool__indent button:disabled { cursor: default; opacity: .35; }
@media (max-width: 720px) {
  .json-tool__actions { gap: 4px; }
  .json-tool__actions button { padding-inline: 8px; }
  .json-tool__view-actions { gap: 6px; }
  .json-tool__toolbar { column-gap: 6px; }
}