/* conditional option input (transform editor) */
.jdh-tt-opt.is-wide { flex:1 1 100%; flex-direction:column; align-items:stretch; gap:6px; }
.jdh-tt-opt.is-wide input { height:38px; width:100%; padding:0 14px; border:1px solid var(--jd-line); border-radius:100px; background:#fff; font:inherit;
  font-size:14px; font-weight:500; color:var(--jd-ink); outline:0; }
.jdh-tt-opt.is-wide input:focus { border-color:rgba(46,116,131,.6); box-shadow:0 0 0 3px rgba(46,116,131,.12); }
.jdh-tt-opt-count { align-self:flex-end; font-size:12px; font-weight:500; color:var(--jd-muted); }

/* grammar review — type colours */
.jdh-gr-mark, .jdh-gr-chip, .jdh-gr-card { --gr:#D92D20; --gr-bg:#FEF3F2; }
:is(.jdh-gr-mark,.jdh-gr-chip,.jdh-gr-card).is-spelling { --gr:#B54708; --gr-bg:#FFFAEB; }
:is(.jdh-gr-mark,.jdh-gr-chip,.jdh-gr-card).is-punctuation { --gr:#024F5F; --gr-bg:#F1F7F8; }
:is(.jdh-gr-mark,.jdh-gr-chip,.jdh-gr-card).is-style { --gr:#6941C6; --gr-bg:#F4F3FF; }
:is(.jdh-gr-mark,.jdh-gr-chip,.jdh-gr-card).is-clarity { --gr:#0E7569; --gr-bg:#F0FDF9; }
.jdh-gr-text { flex:1; min-height:260px; max-height:560px; overflow:auto; margin-top:12px; font-size:16px; line-height:28px; color:var(--jd-ink);
  white-space:pre-wrap; overflow-wrap:anywhere; }
.jdh-gr-mark { background:var(--gr-bg); color:inherit; border-bottom:2px solid var(--gr); border-radius:3px; padding:1px 0; cursor:pointer; }
.jdh-gr-mark:hover, .jdh-gr-mark.is-active { background:color-mix(in srgb, var(--gr) 18%, #fff); }
.jdh-gr-mark:focus-visible { outline:2px solid var(--gr); outline-offset:1px; }
.jdh-gr { display:flex; flex-direction:column; gap:12px; margin-top:12px; min-height:0; }
.jdh-gr-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.jdh-gr-total { font-size:15px; font-weight:600; color:var(--jd-ink); margin-right:auto; }
.jdh-gr-counts { display:flex; flex-wrap:wrap; gap:6px; width:100%; order:3; }
.jdh-gr-chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:100px; background:var(--gr-bg); color:var(--gr);
  font-size:13px; font-weight:500; }
.jdh-gr-chip b { font-weight:700; }
.jdh-gr-tools { display:flex; flex-wrap:wrap; gap:8px; }
.jdh-gr-list { display:flex; flex-direction:column; gap:8px; max-height:470px; overflow:auto; padding:2px; }
.jdh-gr-card { position:relative; display:flex; flex-direction:column; gap:6px; padding:12px 14px 12px 16px; border:1px solid var(--jd-line); border-radius:14px;
  background:#fff; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.jdh-gr-card::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--gr); }
.jdh-gr-card.is-active { border-color:color-mix(in srgb, var(--gr) 45%, #fff); box-shadow:0 0 0 3px var(--gr-bg); }
.jdh-gr-type { font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--gr); }
.jdh-gr-change { font-size:15px; line-height:22px; color:var(--jd-ink); overflow-wrap:anywhere; }
.jdh-gr-change del { color:#98A2B3; text-decoration:line-through; }
.jdh-gr-change ins { text-decoration:none; font-weight:600; color:var(--jd-ink); background:#ECFDF3; border-radius:3px; padding:0 2px; }
.jdh-gr-change em { font-style:normal; color:var(--jd-muted); }
.jdh-gr-why { font-size:14px; line-height:20px; color:var(--jd-body); }
.jdh-gr-acts { display:flex; gap:8px; margin-top:2px; }
.jdh-gr-btn { display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; border-radius:100px; border:1px solid var(--jd-line); background:#fff;
  font:inherit; font-size:13px; font-weight:500; color:var(--jd-ink); cursor:pointer; }
.jdh-gr-btn.is-accept { border-color:transparent; background:var(--jd-teal); color:#fff; }
.jdh-gr-btn.is-accept:hover { background:var(--jd-teal-deep); }
.jdh-gr-btn:focus-visible { outline:2px solid var(--jd-teal); outline-offset:2px; }
.jdh-gr-done, .jdh-gr-locked { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--jd-muted); }
.jdh-gr-done { color:#067647; }
.jdh-tt-edit { margin-right:auto; }

/* rewrite compare (full-width row under both panes) */
.jdh-cmp { grid-column:1 / -1; padding:20px 24px 22px; border-top:1px solid var(--jd-line); }
.jdh-cmp-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-bottom:12px; }
.jdh-cmp-title { font-size:16px; font-weight:600; color:var(--jd-ink); }
.jdh-cmp-stat { font-size:14px; color:var(--jd-muted); }
.jdh-cmp-tabs { display:none; }
.jdh-cmp-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.jdh-cmp-col { min-width:0; padding:14px 16px; border-radius:14px; background:#FBFCFE; border:1px solid var(--jd-line); }
.jdh-cmp-label { margin-bottom:8px; font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--jd-muted); }
.jdh-cmp-text { max-height:420px; overflow:auto; font-size:15px; line-height:25px; color:var(--jd-ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.jdh-cmp-del { background:#FEF3F2; color:#B42318; text-decoration:line-through; text-decoration-color:rgba(180,35,24,.5); border-radius:3px; }
.jdh-cmp-ins { background:#E3F4F1; color:inherit; text-decoration:none; border-radius:3px; box-shadow:inset 0 -2px 0 rgba(46,116,131,.35); }

/* solver follow-up */
.jdh-tt-follow { display:inline-flex; align-items:center; gap:6px; color:var(--jd-teal-deep) !important; font-weight:600; }
.jdh-tt-lock .jdh-tt-follow { margin-top:2px; font-size:14px; }

@media (max-width:900px) {
  .jdh-gr-text { min-height:180px; max-height:none; }
  .jdh-gr-list { max-height:none; }
  .jdh-gr-btn { height:40px; }
  .jdh-cmp { padding:16px; }
  .jdh-cmp-tabs { display:inline-flex; margin-left:auto; padding:3px; border-radius:100px; background:#F1F3F6; }
  .jdh-cmp-tabs button { height:36px; padding:0 14px; border:0; border-radius:100px; background:transparent; font:inherit; font-size:14px; font-weight:500;
    color:var(--jd-muted); cursor:pointer; }
  .jdh-cmp-tabs button.is-on { background:#fff; color:var(--jd-ink); box-shadow:0 1px 3px rgba(24,27,41,.12); }
  .jdh-cmp-cols { grid-template-columns:minmax(0,1fr); }
  .jdh-cmp[data-side="after"] .jdh-cmp-col.is-before, .jdh-cmp[data-side="before"] .jdh-cmp-col.is-after { display:none; }
  .jdh-cmp-label { display:none; }
}