/* Compare JSON. The boxes give up height on shorter screens, so the answer still starts on the first screen under
   them; phones start short, as Compare's do. */
.compare-json textarea { height: 7.5rem; min-height: 7.5rem; }
@media (min-width: 768px) { .compare-json textarea { height: clamp(7.5rem, calc(100vh - 33.5rem), 15rem); } }

/* Two buttons on a pane's label row: Open file, then Copy. On the narrowest phones "Open file" reads "Open", so the
   label row never reaches the Switch sides button on the seam. */
.pane-btns { display: flex; gap: var(--space-1); }
.narrow-only { display: none; }
@media (max-width: 359px) { .wide-only { display: none; } .narrow-only { display: inline; } }
/* A file being dragged over a box: the focus ring says where it will land. */
.panes textarea.is-drop { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A status row with a problem: the error in ink, then "Show me". */
.pane-stats .problem { color: var(--ink); }

/* The options row sits right under the boxes: Ignore array order, Ignore keys, then Clear all at the row's end. */
.json-toolbar { align-items: center; column-gap: var(--space-4); }
.json-toolbar .options { display: contents; }
.json-toolbar label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); }
.json-toolbar .keys { flex: 1 1 16rem; max-width: 26rem; }
.json-toolbar .keys span { white-space: nowrap; }
.json-toolbar .keys input { min-height: var(--control-height); padding: 0 var(--space-3); font-family: var(--font-mono); }
@media (hover: hover) and (pointer: fine) { .json-toolbar label, .json-toolbar .keys input { min-height: 36px; } }
@media (min-width: 640px) { .json-toolbar #clear-btn { margin-left: auto; } }
#json-status { margin: 0; }
#json-status:not(:empty) { margin: calc(-1 * var(--space-1)) 0 var(--space-3); }

/* The result bar is one wrapping row: the title, the summary, then the view switch and Copy at its end. It is not
   pinned on this page. */
.json-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; }
.json-bar h2, .json-bar p { margin: 0; }
.json-bar p { color: var(--ink-muted); }
.json-bar .view-switch { margin-left: auto; }
#full-caption { margin: 0 0 var(--space-2); }
#show-all { margin-top: var(--space-2); }

/* ChangeList: one row per change, label, path and value. Added rows carry the insert tint and a solid edge,
   removed rows the delete tint and a dashed edge, as the line rows of a diff do; marks are ink. */
.changes { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.chg-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chg-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-3); align-items: baseline; padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 4px); font-family: var(--font-mono); line-height: var(--leading-mono); overflow-wrap: anywhere; }
.chg-row + .chg-row { border-top: 1px solid var(--hairline); }
.chg-val { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 640px) {
  .chg-row { grid-template-columns: 6rem minmax(8rem, 1fr) minmax(0, 2fr); column-gap: var(--space-4); }
  .chg-val { grid-column: auto; }
}
.chg-kind { font-family: var(--font); color: var(--ink-muted); }
.chg-added { background: var(--ins-bg); border-left: 4px solid var(--ins-edge); padding-left: var(--space-3); }
.chg-removed { background: var(--del-bg); border-left: 4px dashed var(--del-edge); padding-left: var(--space-3); }
.chg-added .chg-kind, .chg-removed .chg-kind { color: var(--ink); }
.chg-val del { color: inherit; background: var(--del-bg); text-decoration: line-through; text-decoration-color: currentColor; }
.chg-val ins { color: inherit; background: var(--ins-bg); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
/* A whole object or array is shown on up to three lines; Copy changes holds all of it. */
.chg-val.clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.compare-json .next-step { margin: var(--space-4) 0 0; }

/* How it compares: the rules and a worked example, written into the page (search engines don't run the tool). */
.how { max-width: 70ch; margin-top: var(--space-6); }
.how h2 { margin: 0 0 var(--space-2); }
.how ul { margin: 0 0 var(--space-3); padding-left: 1.25em; }
.how li + li { margin-top: var(--space-1); }
.how p { margin: 0 0 var(--space-2); }