/* AI Writer. Colours come from the theme tokens only. */
.wr-form { display: grid; gap: 14px; }
.wr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.wr-cols3 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.wr-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wr-body { display: grid; gap: 14px; margin-top: 12px; }
.wr-sample { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--gap-bg); color: var(--gap-fg); border: 1px solid var(--gap-bd); font-weight: 600; }
.wr-sec { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.wr-sec-h { display: flex; gap: 8px; align-items: center; }
.wr-sec-h input { flex: 1; min-width: 0; font-weight: 700; }
.wr-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--grad); color: var(--accent-ink, white); font-weight: 800; flex: none; }
.wr-card { display: grid; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.wr-card.writing { border-color: var(--accent); }
.wr-card.error { border-color: var(--can-bd); }
.wr-card-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.wr-card textarea { width: 100%; line-height: 1.55; }
.wr-rewrite { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-rewrite input { flex: 1 1 260px; min-width: 0; }
.wr-score { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.wr-ring { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 8px solid var(--k); text-align: center; line-height: 1; }
.wr-ring b { font-size: 1.8rem; }
.wr-ring span { font-size: .72rem; color: var(--muted); }
.wr-ring.ok { --k: var(--cov-fg); }
.wr-ring.warn { --k: var(--gap-fg); }
.wr-ring.bad { --k: var(--can-fg); }
.wr-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wr-checks li { display: flex; gap: 12px; align-items: flex-start; }
.wr-checks li > div { display: grid; gap: 2px; }
.wr-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; flex: none; }
.wr-checks .ok .wr-mark { background: var(--cov-bg); color: var(--cov-fg); }
.wr-checks .warn .wr-mark { background: var(--gap-bg); color: var(--gap-fg); }
.wr-checks .bad .wr-mark { background: var(--can-bg); color: var(--can-fg); }
.wr-review { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
#review-out { display: grid; gap: 10px; line-height: 1.55; }
#review-out ul, #review-out ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* Editor layout: the draft on the left, the live score on the right (below the draft on narrower screens) */
.wr-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.wr-more { display: grid; gap: 12px; }
.wr-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.wr-more[open] > summary { margin-bottom: 10px; }
.wr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.wr-main { display: grid; gap: 16px; min-width: 0; }
.wr-side { min-width: 0; display: grid; gap: 14px; }
@media (min-width: 1100px) {
  .wr-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .wr-side { position: sticky; top: 84px; max-height: max(520px, calc(100vh - 110px)); overflow: auto; }
}
.wr-mini { display: grid; gap: 4px; margin-bottom: 10px; }
.wr-mini-h { display: flex; justify-content: space-between; gap: 10px; }
.wr-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.wr-bar i { display: block; height: 100%; border-radius: 99px; background: var(--k); }
.wr-bar.ok { --k: var(--cov-fg); }
.wr-bar.warn { --k: var(--gap-fg); }
.wr-bar.bad { --k: var(--can-fg); }
.wr-fix { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.wr-sect { border-top: 1px solid var(--line); padding-top: 10px; }
.wr-sect > summary { cursor: pointer; font-weight: 700; margin-bottom: 8px; }
.wr-tier { display: grid; gap: 6px; margin-bottom: 12px; }
.wr-tier-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.wr-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wr-terms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 10px; border-radius: 10px; border-left: 4px solid var(--k); background: var(--kb); }
.wr-terms li.ok { --k: var(--cov-fg); --kb: var(--cov-bg); }
.wr-terms li.warn { --k: var(--gap-fg); --kb: var(--gap-bg); }
.wr-terms li.bad { --k: var(--can-fg); --kb: var(--can-bg); }
.wr-term { font-weight: 600; overflow-wrap: anywhere; }
.wr-uses { font-variant-numeric: tabular-nums; }
.wr-st { grid-column: 1 / -1; font-size: .78rem; color: var(--ink); }
.wr-qa td, .wr-qa th { vertical-align: top; }
.wr-qa td:first-child { min-width: 0; }
/* The side panel is narrow: each QA row reads as a small card */
.wr-qa { display: block; min-width: 0; }
.wr-qa thead { display: none; }
.wr-qa tbody { display: grid; gap: 8px; }
.wr-qa tr { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.wr-qa td { display: block; padding: 0; border: 0; min-width: 0 !important; width: auto !important; }
.wr-qa td::before { content: attr(data-label); display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.wr-qa td:first-child { font-weight: 700; }