/* JSON Formatterのエディタ規約を共有し、このツール固有の検索UIだけを定義する。 */
.jsonpath-page {
  --jsonpath-query-min-height: 64px;
  --jsonpath-results-padding: 12px;
  --jsonpath-result-padding: 11px;
  --jsonpath-item-gap: 7px;
  --jsonpath-card-radius: 7px;
  --jsonpath-control-radius: 5px;
  --jsonpath-value-max-height: 190px;
  --jsonpath-action-min-height: 30px;
  --jsonpath-code-font: "Cascadia Code", Consolas, monospace;
}

/* Search controls */
.jsonpath-page .jsonpath-query-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: var(--jsonpath-query-min-height);
  padding: 10px 14px;
  border-block-end: 1px solid var(--json-border);
}

.jsonpath-page .jsonpath-query-field {
  display: flex;
  flex: 1 1 460px;
  align-items: center;
  gap: 10px;
  color: var(--json-muted);
}

.jsonpath-page .jsonpath-query-input {
  width: 100%;
  min-width: 220px;
  font-family: var(--jsonpath-code-font);
}

/* Result list */
.jsonpath-page .jsonpath-results {
  height: var(--json-editor-height);
  padding: var(--jsonpath-results-padding);
  overflow: auto;
  color: var(--editor-text);
  background: var(--editor-background);
}

.jsonpath-page .jsonpath-result {
  display: grid;
  gap: var(--jsonpath-item-gap);
  margin-block-end: 10px;
  padding: var(--jsonpath-result-padding);
  border: 1px solid var(--editor-border);
  border-radius: var(--jsonpath-card-radius);
  background: color-mix(in srgb, var(--editor-heading) 72%, var(--editor-background));
}

.jsonpath-page :is(.jsonpath-result-heading, .jsonpath-result-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jsonpath-item-gap);
}

.jsonpath-page :is(.jsonpath-result-index, .jsonpath-result-type) {
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--editor-text);
  background: var(--editor-gutter);
  font-size: 11px;
}

.jsonpath-page :is(.jsonpath-result-path, .jsonpath-result-pointer, .jsonpath-result-value) {
  margin: 0;
  overflow-wrap: anywhere;
}

.jsonpath-page .jsonpath-result-path {
  color: var(--token-key);
  font-weight: 700;
}

.jsonpath-page .jsonpath-result-pointer {
  color: var(--editor-muted);
  font-size: 12px;
}

.jsonpath-page .jsonpath-result-value {
  max-height: var(--jsonpath-value-max-height);
  padding: 8px;
  overflow: auto;
  border-radius: var(--jsonpath-control-radius);
  color: var(--token-string);
  background: var(--editor-background);
  white-space: pre-wrap;
}

.jsonpath-page .jsonpath-result-action {
  min-height: var(--jsonpath-action-min-height);
  padding: 4px 8px;
  border: 1px solid var(--editor-border);
  border-radius: var(--jsonpath-control-radius);
  color: var(--editor-text);
  background: var(--editor-heading);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.jsonpath-page .jsonpath-empty {
  display: grid;
  min-height: 100%;
  margin: 0;
  place-items: center;
  color: var(--editor-muted);
  text-align: center;
}

/* Shared component overrides */
.jsonpath-page .jsonpath-result-panel {
  margin-block-start: 16px;
}

.jsonpath-page .jsonpath-result-panel[hidden] {
  display: none;
}

.jsonpath-page .jsonpath-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jsonpath-page .jsonpath-stat-value {
  font-size: 16px;
}

.jsonpath-page .jsonpath-stat-value--expression {
  font-family: var(--jsonpath-code-font);
  font-size: 13px;
}

/* Interaction states */
.jsonpath-page .jsonpath-result:focus-within,
.jsonpath-page .jsonpath-result:hover,
.jsonpath-page .jsonpath-result-action:hover,
.jsonpath-page .jsonpath-result-action:focus-visible {
  border-color: var(--json-focus);
}

.jsonpath-page .jsonpath-drop-zone.is-dragging {
  box-shadow: inset 0 0 0 3px var(--json-focus);
}

@media (max-width: 900px) {
  .jsonpath-page .jsonpath-query-field {
    flex-basis: 100%;
  }

  .jsonpath-page .jsonpath-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .jsonpath-page .jsonpath-query-field {
    align-items: stretch;
    flex-direction: column;
  }

  .jsonpath-page .jsonpath-query-input,
  .jsonpath-page .jsonpath-query-toolbar .json-format-setting,
  .jsonpath-page .jsonpath-query-toolbar .json-format-select {
    width: 100%;
  }

  .jsonpath-page .jsonpath-stats {
    grid-template-columns: 1fr;
  }
}