/* JSONPathDesk brand layer.
 *
 * Scoped to body[data-site="json"] so it only affects pages that load this
 * file. It sits after the shared shell stylesheet and /brand-fonts.css in the
 * head, so brand rules win on equal specificity, and the body-level token
 * re-pointing recolors every shell rule that reads a custom property.
 *
 * Identity (approved): ground #EEF3FA, surface white, ink #15223B,
 * accent #214ED3, query tint #DFE9FF. Spline Sans for display/UI, Source Sans 3
 * for article reading, JetBrains Mono for code.
 *
 * Hard rules kept here: no remote assets, no analytics, no overflow hiding,
 * and no [hidden] display overrides — the shell's pane switching depends on
 * [hidden] working, and Cancel, the error box and disabled export buttons
 * must stay invisible until the tool state calls for them.
 */

body[data-site="json"] {
  /* Brand tokens. */
  --brand-background: #eef3fa;
  --brand-surface: #ffffff;
  --brand-ink: #15223b;
  --brand-accent: #214ed3;
  --brand-query: #dfe9ff;
  --brand-query-border: #c4d5f5;
  --brand-border: #d5dfef;
  --brand-muted: #47597e;
  --brand-faint: #67779d;
  --brand-font-display: "Spline Sans", "Source Sans 3", system-ui, sans-serif;
  --brand-font-ui: "Spline Sans", "Source Sans 3", system-ui, sans-serif;
  --brand-font-reading: "Source Sans 3", system-ui, sans-serif;
  --brand-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Re-point the shared shell's tokens at the approved palette so border,
     panel, focus and muted-text rules from styles.css follow the brand. */
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --line: var(--brand-border);
  --panel: #f4f7fc;
  --focus: var(--brand-accent);

  background: var(--brand-background);
  color: var(--brand-ink);
  font-family: var(--brand-font-ui);
}

/* 16px floor gutters with safe-area awareness on both sides. */
body[data-site="json"] .shell {
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* Focus: one visible accent ring for every interactive element. */
body[data-site="json"] a:focus-visible,
body[data-site="json"] button:focus-visible,
body[data-site="json"] input:focus-visible,
body[data-site="json"] textarea:focus-visible,
body[data-site="json"] select:focus-visible,
body[data-site="json"] summary:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

body[data-site="json"] a { color: var(--brand-accent); }
body[data-site="json"] a:hover { text-decoration: underline; }

/* Header, nav, footer. */
body[data-site="json"] .site-header {
  background: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
  padding: 0.6rem 0;
}
body[data-site="json"] .site-header .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
}
body[data-site="json"] .site-header .brand {
  margin: 0;
  font-family: var(--brand-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}
body[data-site="json"] .site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin-left: auto;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
}
body[data-site="json"] .site-nav a { text-decoration: none; }
body[data-site="json"] .site-nav a:hover { text-decoration: underline; }

body[data-site="json"] .site-footer {
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
  color: var(--brand-muted);
  font-family: var(--brand-font-reading);
}

/* Page heading, lead, and the in-page shortcut row. */
body[data-site="json"]:not(.guide-page) .page-title {
  font-family: var(--brand-font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.75rem 0 0.5rem;
}
body[data-site="json"] .page-lead {
  font-family: var(--brand-font-reading);
  font-size: 1.0625rem;
  color: var(--brand-muted);
  max-width: 44rem;
  margin: 0 0 1rem;
}

/* Widget-first rhythm: tight above the fold on root pages only. */
body[data-site="json"]:not(.guide-page) main.shell {
  padding-block: 12px 48px;
}
body[data-site="json"] .page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
}
body[data-site="json"] .page-jump a { text-decoration: none; }
body[data-site="json"] .page-jump a:hover { text-decoration: underline; }

/* Tool frame. */
body[data-site="json"] .tool {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}
body[data-site="json"] .tool-bar {
  background: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
}
body[data-site="json"] .tool-bar > * { min-width: 0; }
body[data-site="json"] .tool-bar label {
  font-size: 0.8125rem;
  font-weight: 600;
}
body[data-site="json"] .tool-bar input[type="file"] {
  font-family: var(--brand-font-ui);
  font-size: 0.8125rem;
  max-width: 100%;
}

/* Query strip: the expression is the primary surface, full width, above the
   workspace panes; run feedback (status, error) stays in view in every tab. */
body[data-site="json"] .query-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  min-width: 0;
  background: var(--brand-query);
  border-bottom: 1px solid var(--brand-query-border);
  padding: 0.9rem 1rem;
}
body[data-site="json"] .query-strip > * { min-width: 0; }
body[data-site="json"] .query-strip .query-field {
  flex: 1 1 18rem;
  margin: 0;
}
body[data-site="json"] .query-strip .query-field label {
  font-family: var(--brand-font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-ink);
}
body[data-site="json"] .query-strip #json-expression {
  width: 100%;
  font-family: var(--brand-font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-ink);
  background: var(--brand-surface);
  border: 1px solid var(--brand-query-border);
  border-radius: 4px;
  padding: 0.55rem 0.7rem;
}
body[data-site="json"] .query-strip .hint,
body[data-site="json"] .query-strip .status {
  color: var(--brand-muted);
  margin: 0;
}
body[data-site="json"] .query-strip .status,
body[data-site="json"] .query-strip .error {
  flex-basis: 100%;
  margin: 0;
}
body[data-site="json"] .query-strip code {
  font-family: var(--brand-font-mono);
  color: var(--brand-accent);
}

/* Workspace panes: white cards inside the tool frame. */
body[data-site="json"] .pane { background: var(--brand-surface); }
body[data-site="json"] .pane h2 {
  font-family: var(--brand-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}
body[data-site="json"] .pane textarea {
  font-family: var(--brand-font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--brand-ink);
  background: var(--brand-surface);
  border-color: var(--brand-border);
}

/* Buttons and pane tabs. */
body[data-site="json"] button {
  font-family: var(--brand-font-ui);
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 4px;
}
body[data-site="json"] button.primary {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #ffffff;
}
body[data-site="json"] .tool-tabs button[aria-pressed="true"] {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #ffffff;
}

/* Results, matches, stats: mono where the tool emits text. */
body[data-site="json"] .result {
  font-family: var(--brand-font-mono);
  font-size: 0.8125rem;
}
body[data-site="json"] .rows code,
body[data-site="json"] .mono {
  font-family: var(--brand-font-mono);
}
body[data-site="json"] .rows code { color: var(--brand-accent); }
body[data-site="json"] .rows th,
body[data-site="json"] .result .kind { color: var(--brand-muted); }

/* Article and guide reading: Source Sans 3, with mono code on a query tint. */
body[data-site="json"] .doc {
  font-family: var(--brand-font-reading);
  max-width: 46rem;
}
body[data-site="json"] .doc h2 {
  font-family: var(--brand-font-display);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
body[data-site="json"] .doc h3 {
  font-family: var(--brand-font-display);
  font-size: 1.0625rem;
}
body[data-site="json"] .doc code {
  font-family: var(--brand-font-mono);
  color: var(--brand-accent);
  background: var(--brand-query);
  border-radius: 3px;
  padding: 0.05em 0.3em;
}
body[data-site="json"] .doc pre {
  font-family: var(--brand-font-mono);
  overflow: auto;
  background: var(--brand-surface);
}
body[data-site="json"] .doc pre code {
  background: none;
  padding: 0;
  color: inherit;
}
body[data-site="json"] .doc th { color: var(--brand-muted); }

/* Guides hub. */
body[data-site="json"] .guide-list {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
body[data-site="json"] .guide-list li {
  min-width: 0;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  padding: 0.9rem 1rem;
}
body[data-site="json"] .guide-list a {
  font-family: var(--brand-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}
body[data-site="json"] .guide-list a:hover { text-decoration: underline; }
body[data-site="json"] .guide-list p {
  margin: 0.35rem 0 0;
  color: var(--brand-muted);
}

/* The actual 390×844 capture put the input's bottom at 854px. Keep a usable
   ten-rem editor entirely inside the first screen without reducing type. */
@media (max-width: 48rem) {
  body[data-site="json"] #json-source { min-height: 10rem; }
}

/* Reduced motion: nothing on this page animates, so just neutralize any
   inherited transition or smooth scroll for users who ask for calm. */
@media (prefers-reduced-motion: reduce) {
  body[data-site="json"] *,
  body[data-site="json"] *::before,
  body[data-site="json"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}