/* aiwa-compare.css — everything unique to /text-compare.html.
   The shell (pp-bar, pp-work, pp-pane, pp-action-bar) comes from aiwa-paraphrase.css,
   so this file only carries the two-editor input stack and the difference view.
   Every colour is a token except the four highlight tints, which need an explicit value
   per theme: a tint has to sit *above* the page in light mode and *below* it in dark. */

.tc-app {
  --tc-add: #e4f6e9;
  --tc-add-line: #bfe6cb;
  --tc-add-ink: #0e6230;
  --tc-del: #fdeceb;
  --tc-del-line: #f6ccc8;
  --tc-del-ink: #a3261c;
  --tc-move: #fff3d6;
  --tc-move-line: #f0dcae;
  --tc-move-ink: #855108;
  --tc-gutter: #f6f8f7;
  --tc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
html[data-theme="dark"] .tc-app {
  --tc-add: #12331f;
  --tc-add-line: #1d5333;
  --tc-add-ink: #7fdca0;
  --tc-del: #3a1a17;
  --tc-del-line: #632a24;
  --tc-del-ink: #f2a49c;
  --tc-move: #3a2f12;
  --tc-move-line: #5d4a17;
  --tc-move-ink: #edc873;
  --tc-gutter: #101713;
}

/* ------------------------------------------------------------------ command bar ---- */

.tc-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--aiwa-line); border-radius: 11px; background: var(--tc-gutter); }
.tc-seg button {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--aiwa-text); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.tc-seg button .aiwa-ui-icon { width: 15px; height: 15px; }
.tc-seg button:hover { background: rgba(19, 122, 61, 0.09); }
.tc-seg button[aria-pressed="true"] { background: var(--aiwa-card); color: var(--aiwa-brand-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.tc-seg button:focus-visible { outline: 2px solid var(--aiwa-focus); outline-offset: 1px; }
.tc-seg-label { color: var(--aiwa-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding-left: 4px; }

.tc-ignores { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.tc-bar-spacer { flex: 1 1 auto; }
.tc-score { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tc-score b { color: var(--aiwa-brand-dark); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.tc-score span { color: var(--aiwa-muted); font-size: 11px; font-weight: 700; }
.tc-score.is-idle b { color: var(--aiwa-muted); }

/* --------------------------------------------------------------- input pane ---- */

.tc-inputs { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.tc-side { position: relative; min-height: 0; display: flex; flex-direction: column; }
.tc-side + .tc-side { border-top: 1px solid var(--aiwa-line); }
.tc-side-head {
  flex: 0 0 auto; min-height: 42px; display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 18px; border-bottom: 1px solid var(--aiwa-line); background: var(--tc-gutter);
}
.tc-side-tag {
  display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;
  border-radius: 6px; background: var(--aiwa-brand); color: #fff; font-size: 11px; font-weight: 800;
}
.tc-side-b .tc-side-tag { background: var(--aiwa-brand-dark); }
.tc-side-name { color: var(--aiwa-ink); font-size: 12.5px; font-weight: 750; }
.tc-side-head-actions { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.tc-mini {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--aiwa-muted); font-size: 11.5px; font-weight: 700;
}
.tc-mini:hover { background: var(--aiwa-card); border-color: var(--aiwa-line); color: var(--aiwa-text); }
.tc-mini:focus-visible { outline: 2px solid var(--aiwa-focus); outline-offset: 1px; }
.tc-mini .aiwa-ui-icon { width: 14px; height: 14px; }

.tc-editor {
  flex: 1 1 auto; min-height: 0; width: 100%; resize: none; border: 0; outline: 0;
  padding: 14px 18px; background: var(--aiwa-card); color: var(--aiwa-text);
  font-family: var(--tc-mono); font-size: 13.5px; line-height: 1.62; tab-size: 4;
}
.tc-editor::placeholder { color: #9aa69f; }
.tc-editor:focus-visible { box-shadow: inset 0 0 0 2px rgba(19, 122, 61, 0.28); }
.tc-side.is-dragover .tc-editor { box-shadow: inset 0 0 0 2px var(--aiwa-brand); background: var(--aiwa-brand-soft); }

.tc-side-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 14px 5px 18px; border-top: 1px solid var(--aiwa-line);
  background: var(--tc-gutter); color: var(--aiwa-muted); font-size: 11px; font-weight: 600;
}
.tc-side-foot b { color: var(--aiwa-text); font-weight: 750; }

.tc-swap-rail { position: absolute; right: 14px; bottom: -17px; z-index: 5; }
.tc-swap {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--aiwa-line); border-radius: 999px; background: var(--aiwa-card);
  box-shadow: 0 2px 8px rgba(16, 34, 24, 0.13); cursor: pointer;
  color: var(--aiwa-text); font-size: 11.5px; font-weight: 750;
}
.tc-swap:hover { border-color: var(--aiwa-brand); color: var(--aiwa-brand-dark); }
.tc-swap:focus-visible { outline: 2px solid var(--aiwa-focus); outline-offset: 2px; }
.tc-swap .aiwa-ui-icon { width: 14px; height: 14px; }

/* ------------------------------------------------------------------- results ---- */

.tc-result { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--aiwa-card); }
.tc-result:focus-visible { outline: 2px solid var(--aiwa-focus); outline-offset: -2px; }

.tc-summary {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 16px; border-bottom: 1px solid var(--aiwa-line); background: var(--tc-gutter);
}
.tc-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--aiwa-line); border-radius: 999px; background: var(--aiwa-card);
  color: var(--aiwa-text); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tc-pill i { font-style: normal; font-weight: 800; }
.tc-pill.is-add { border-color: var(--tc-add-line); background: var(--tc-add); color: var(--tc-add-ink); }
.tc-pill.is-del { border-color: var(--tc-del-line); background: var(--tc-del); color: var(--tc-del-ink); }
.tc-pill.is-move { border-color: var(--tc-move-line); background: var(--tc-move); color: var(--tc-move-ink); }
.tc-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.tc-nav-count { color: var(--aiwa-muted); font-size: 11px; font-weight: 700; padding-right: 4px; }

/* The difference table. A CSS grid rather than a <table> so the two columns can be
   scrolled and the row can carry its own state class. */
.tc-rows { display: block; font-family: var(--tc-mono); font-size: 13px; line-height: 1.6; }
.tc-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid color-mix(in srgb, var(--aiwa-line) 55%, transparent); }
.tc-num {
  padding: 3px 8px 3px 4px; border-right: 1px solid color-mix(in srgb, var(--aiwa-line) 60%, transparent);
  background: var(--tc-gutter); color: #9aa69f; font-size: 11px; text-align: right;
  user-select: none; -webkit-user-select: none;
}
.tc-cell { padding: 3px 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--aiwa-text); }
.tc-cell-a { border-right: 1px solid var(--aiwa-line); }

.tc-row.is-changed .tc-cell-a, .tc-row.is-removed .tc-cell-a { background: var(--tc-del); }
.tc-row.is-changed .tc-cell-b, .tc-row.is-added .tc-cell-b { background: var(--tc-add); }
.tc-row.is-removed .tc-cell-b, .tc-row.is-added .tc-cell-a { background: repeating-linear-gradient(135deg, transparent, transparent 6px, color-mix(in srgb, var(--aiwa-line) 45%, transparent) 6px, color-mix(in srgb, var(--aiwa-line) 45%, transparent) 7px); }
.tc-row.is-moved .tc-cell-a, .tc-row.is-moved .tc-cell-b { background: var(--tc-move); }
.tc-row.is-target { box-shadow: inset 3px 0 0 var(--aiwa-brand); }

/* Never colour alone: every changed row is also marked in its number column. */
.tc-num[data-mark]::after { content: " " attr(data-mark); font-weight: 800; }
.tc-row.is-removed .tc-num-a, .tc-row.is-changed .tc-num-a { color: var(--tc-del-ink); background: var(--tc-del); }
.tc-row.is-added .tc-num-b, .tc-row.is-changed .tc-num-b { color: var(--tc-add-ink); background: var(--tc-add); }
.tc-row.is-moved .tc-num-a, .tc-row.is-moved .tc-num-b { color: var(--tc-move-ink); background: var(--tc-move); }

.tc-del { background: color-mix(in srgb, var(--tc-del-line) 78%, transparent); border-radius: 3px; text-decoration: line-through; text-decoration-thickness: 1px; }
.tc-ins { background: color-mix(in srgb, var(--tc-add-line) 78%, transparent); border-radius: 3px; font-weight: 700; }

/* Unified view — one column, git style. */
.tc-rows.is-unified .tc-row { grid-template-columns: 46px 46px minmax(0, 1fr); }
.tc-rows.is-unified .tc-row .tc-cell-a { grid-column: 3; border-right: 0; }
.tc-rows.is-unified .tc-row .tc-cell-b { grid-column: 3; border-right: 0; }
.tc-rows.is-unified .tc-row.is-changed { border-bottom: 0; }
.tc-rows.is-unified .tc-row.is-equal .tc-cell-b { display: none; }

.tc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100%; padding: 30px 24px; text-align: center; }
.tc-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--aiwa-brand-soft); }
.tc-empty-icon .aiwa-ui-icon { width: 22px; height: 22px; }
.tc-empty strong { color: var(--aiwa-ink); font-size: 15px; font-weight: 780; }
.tc-empty span { max-width: 42ch; color: var(--aiwa-muted); font-size: 12.5px; line-height: 1.6; }

.tc-same { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 24px; text-align: center; }
.tc-same strong { color: var(--aiwa-brand-dark); font-size: 15px; font-weight: 780; }
.tc-same span { color: var(--aiwa-muted); font-size: 12.5px; }

.tc-note { margin: 0; padding: 8px 16px; background: var(--tc-move); color: var(--tc-move-ink); font-size: 11.5px; font-weight: 650; }

/* ------------------------------------------------------------------ responsive ---- */

@media (max-width: 900px) {
  .tc-bar-spacer { display: none; }
  .tc-seg-label { display: none; }
}
@media (max-width: 720px) {
  .tc-row { grid-template-columns: 34px minmax(0, 1fr); }
  .tc-row .tc-num-b { display: none; }
  .tc-row .tc-cell-a { grid-column: 2; border-right: 0; }
  .tc-row .tc-cell-b { grid-column: 2; border-right: 0; }
  .tc-row.is-equal .tc-cell-b { display: none; }
  .tc-rows { font-size: 12.5px; }
  .tc-ignores { gap: 10px; }
}

/* ---------------------------------------------- overrides for the shared shell ---- */

/* aiwa-paraphrase.css hides the switch labels and the action-button text below 1560px,
   because the paraphraser's bar also carries a mode dropdown and a language selector.
   This bar carries neither, so there is room for the words — and "Ignore case" as three
   unlabelled toggles is a puzzle, not a control. Restored down to the width where this
   page genuinely does run out of room. Found by screenshotting, not by reading code. */
@media (min-width: 901px) {
  .compare-page .pp-switch-text { display: inline; }
  .compare-page .pp-result-actions .pane-action span { display: inline; }
}

/* The swap control belongs on the seam between the two boxes. Without a positioned
   parent it fell to the bottom of the whole pane. */
.tc-inputs { position: relative; }
.tc-swap-rail { position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
/* Centred on the seam. On the right it covered the B header's Paste / File / Clear; on
   the left it covered box A's word count. The middle of that seam is the only empty part. */

/* [hidden] loses to any class selector that sets display, so the empty state stayed on
   top of the results at 703px tall while reporting hidden === true. The roadmap warns
   about this exact trap; it is invisible in code and obvious in a screenshot. */
.compare-page [hidden] { display: none !important; }

/* Stacked prose in the explainer.
   aiwa-seo.css sets .wx-p { margin: 0 } because most of the time a card holds a
   single paragraph. Where two sit next to each other, or one follows a bullet
   list, they render glued into one block. Scoped here rather than fixed in
   aiwa-seo.css so this change cannot alter twelve other live pages; the same
   gap exists on humanizer, summarizer, paraphrasing-tool, grammar-checker and
   word-counter and is worth a separate sweep. */
.compare-page .wx-root .wx-p + .wx-p { margin-top: 14px; }
.compare-page .wx-root .wx-shot-copy .wx-sub + .wx-p { margin-top: 14px; }
.compare-page .wx-root .wx-shot-list + .wx-p { margin-top: 16px; }