/* Writing Checker: style choice, summary, check list, marked-up text and the two copy-ready prompts. Builds on ../tools.css. */
.wc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; margin-top: 1rem; }
.wc-style { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; border: 0; margin: 0; padding: 0; }
.wc-style legend { float: left; padding: 0; margin-right: 0.25rem; font-size: 0.82rem; font-weight: 700; color: var(--ink-muted); }
.wc-style label { position: relative; }
.wc-style input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wc-style span { display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid var(--border-line); border-radius: 999px; background: var(--bg-paper); font-size: 0.85rem; font-weight: 600; color: var(--ink-secondary); }
.wc-style input:checked + span { border-color: var(--ink-primary); background: var(--ink-primary); color: var(--bg-paper); }
.wc-style input:focus-visible + span { outline: 3px solid var(--cat-photo-accent); outline-offset: 2px; }
.wc-style-note { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--ink-muted); }
.wc-clear { padding: 0.2rem 0.6rem; font-size: 0.78rem; }

.wc-empty { margin-top: 1.5rem; padding: 1.75rem 1rem; border: 1px dashed var(--border-line); border-radius: 16px; text-align: center; color: var(--ink-muted); }
.wc-empty p { margin: 0; }
.wc-empty p + p { margin-top: 0.4rem; font-size: 0.88rem; }
.wc-out[hidden], .wc-empty[hidden], [hidden].wc-card { display: none; }

.wc-head { margin-top: 1.5rem; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--success-bg); font-size: 0.95rem; line-height: 1.5; color: var(--ink-primary); }
.wc-head strong { margin-right: 0.35rem; font-family: var(--font-display); font-size: 1.1rem; }
.wc-head span { color: var(--ink-secondary); }

.wc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; align-items: start; }
.wc-card { padding: 1.35rem; border: 1px solid var(--border-line); border-radius: 16px; background: var(--bg-paper); min-width: 0; }
.wc-grid > .wc-card:nth-child(2) { position: sticky; top: 5rem; }
.wc-h { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink-primary); }
.wc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.wc-check { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0.75rem; }
.wc-badge { align-self: start; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-align: center; white-space: nowrap; background: var(--bg-band); color: var(--ink-secondary); }
.wc-s-flag .wc-badge { background: #FBD5D5; color: #8A1F1F; }
.wc-s-note .wc-badge { background: #FDEBB3; color: #6B4A00; }
.wc-s-clear .wc-badge { background: #CDEFDD; color: #0B5B3A; }
[data-theme="dark"] .wc-s-flag .wc-badge { background: #5C2323; color: #FFC9C9; }
[data-theme="dark"] .wc-s-note .wc-badge { background: #5A4310; color: #FFE39A; }
[data-theme="dark"] .wc-s-clear .wc-badge { background: #134B34; color: #BDF1D6; }
.wc-body p { margin: 0; }
.wc-name { font-weight: 700; font-size: 0.95rem; color: var(--ink-primary); }
.wc-sum { margin-top: 0.15rem !important; font-size: 0.88rem; line-height: 1.5; color: var(--ink-secondary); }
.wc-tip { margin-top: 0.35rem !important; font-size: 0.85rem; line-height: 1.5; color: var(--ink-primary); }
.wc-hits { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wc-hits li { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.15rem 0.55rem; border-radius: 8px; background: var(--bg-band); font-size: 0.8rem; }
.wc-hits i { font-style: normal; font-weight: 700; color: var(--ink-muted); }
.wc-hits span { color: var(--ink-muted); }

.wc-marked { max-height: 28rem; overflow: auto; margin: 0; padding: 0.9rem 1rem; border: 1px solid var(--border-line); border-radius: 12px; background: var(--bg-main, var(--bg-paper)); font-size: 0.93rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-primary); }
.wc-marked mark { color: inherit; border-radius: 4px; padding: 0.05em 0; }
.wc-m-word { background: rgba(255, 196, 0, 0.45); }
.wc-m-q, .wc-m-close { background: rgba(236, 72, 153, 0.28); }
.wc-m-long { text-decoration: underline wavy rgba(59, 130, 246, 0.9); text-underline-offset: 0.2em; }
.wc-m-triple { text-decoration: underline dotted rgba(168, 85, 247, 0.95); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.wc-m-contrast { box-shadow: inset 0 -2px 0 rgba(20, 184, 166, 0.9); }
.wc-m-bullet { background: rgba(34, 197, 94, 0.28); }
.wc-m-repeat { background: rgba(249, 115, 22, 0.3); }
.wc-legend { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--ink-muted); }
.wc-legend mark { color: inherit; padding: 0 0.3em; border-radius: 4px; font-size: 0.78rem; }

.wc-prompts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.wc-prompt-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.wc-prompt-top .wc-h { margin: 0; }
.wc-lead { margin: 0 0 0.75rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink-secondary); }
.wc-pre { margin: 0; max-height: 15rem; overflow: auto; padding: 0.8rem 0.9rem; border-radius: 12px; background: var(--bg-band); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 0.8rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-primary); }

@media (max-width: 860px) {
  .wc-grid, .wc-prompts { grid-template-columns: minmax(0, 1fr); }
  .wc-grid > .wc-card:nth-child(2) { position: static; }
}
@media (max-width: 700px) {
  /* 44px touch targets on a phone */
  .sample-chip, .wc-clear, .wc-card .btn, .wc-style span { min-height: 44px; }
  .wc-style span { display: inline-flex; align-items: center; padding: 0.3rem 1rem; }
  .wc-clear { padding: 0.2rem 0.9rem; }
}
@media (max-width: 480px) {
  .wc-card { padding: 1.1rem; }
  .wc-check { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .wc-badge { justify-self: start; }
}