/* ===============================================================
   ToolDuck — JSON Compare
   Loaded only on /json-compare/.
   =============================================================== */

/* Two editors side by side, stacked once they get too narrow to read. */
.jcmp-inputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .jcmp-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* .tool-block + .tool-block adds a top margin for stacked blocks, which
   would stagger the second column here. The grid gap is the spacing. */
.jcmp-inputs > .tool-block { margin-top: 0; }

/* The shared .control__input rule only exists inside the resume wizard, so
   these fields are styled here rather than left at browser defaults — an
   unstyled <textarea> is about twenty characters wide. */
.jcmp-editor {
    display: block;
    width: 100%;
    min-height: 18rem;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .86rem;
    line-height: 1.55;
    tab-size: 2;
    resize: vertical;
    /* Wrap rather than scroll sideways. Minified JSON is a single enormous
       line, and hunting along it horizontally is worse than a wrapped one.
       pre-wrap keeps the indentation of pretty-printed JSON readable. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    transition: border-color .15s, box-shadow .15s;
}

.jcmp-editor::placeholder { color: var(--ink-4); }
.jcmp-editor:hover { border-color: var(--ink-4); }
.jcmp-editor:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* A parse failure belongs next to the box it refers to. */
.control__help.is-error {
    color: var(--err);
    font-weight: 500;
}

/* ---------------------------------------------------------------
   Actions
   --------------------------------------------------------------- */
.jcmp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1.25rem;
}

.jcmp-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    font-size: .88rem;
    color: var(--ink-2);
    cursor: pointer;
    /* Comfortable hit area without a larger checkbox. */
    padding: .4rem .2rem;
}

.jcmp-option input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--brand);
    cursor: pointer;
    flex: none;
}

/* ---------------------------------------------------------------
   Results
   --------------------------------------------------------------- */
.jcmp-results {
    margin-top: 1.5rem;
    padding: 1.1rem 1.15rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.jcmp-summary {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

.jcmp-note {
    margin: .5rem 0 0;
    font-size: .87rem;
    color: var(--warn);
}

.jcmp-note--ok {
    color: var(--ok);
}

.jcmp-list {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.jcmp-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .6rem .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.jcmp-row--added   { border-left-color: var(--ok); }
.jcmp-row--removed { border-left-color: var(--err); }
.jcmp-row--changed { border-left-color: var(--brand); }
.jcmp-row--type    { border-left-color: var(--warn); }

.jcmp-row__kind {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: .15rem;
}

.jcmp-row--added   .jcmp-row__kind { color: var(--ok); }
.jcmp-row--removed .jcmp-row__kind { color: var(--err); }
.jcmp-row--changed .jcmp-row__kind { color: var(--brand-strong); }
.jcmp-row--type    .jcmp-row__kind { color: var(--warn); }

.jcmp-row__body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.jcmp-row__path {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .84rem;
    color: var(--ink);
    /* Long paths and long values must wrap rather than scroll the page. */
    overflow-wrap: anywhere;
}

.jcmp-row__values {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .82rem;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.jcmp-row__from { color: var(--err); }
.jcmp-row__to   { color: var(--ok); }

.jcmp-row__arrow {
    padding: 0 .4rem;
    color: var(--ink-4);
}

/* Added and removed rows show a single value, so colour it to match. */
.jcmp-row--added   .jcmp-row__values { color: var(--ok); }
.jcmp-row--removed .jcmp-row__values { color: var(--err); }

.jcmp-copy-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
}

.jcmp-copy-status {
    font-size: .85rem;
    color: var(--ink-3);
}

@media (max-width: 560px) {
    .jcmp-row { grid-template-columns: 1fr; gap: .3rem; }
    .jcmp-option { margin-left: 0; }
}