/* Rewriter-family styles (Paraphrasing Tool + its Wave 10 sibling
 * landing pages: Paragraph/Text/Article Rewriter, Sentence
 * Shortener/Expander). Lifted from the Paraphrasing Tool's local
 * tool.css on tool 2. Composes the shared primitives in tools.css.
 * Default accent teal-600; a sibling overrides the --pt-accent* vars
 * via an inline <style> in its $extra_head. */

:root {
    --pt-accent: #0d9488;
    --pt-accent-dark: #0f766e;
    --pt-accent-tint: #ccfbf1;
    --pt-accent-tint-soft: #f0fdfa;
}

/* Hero mark */
.page-hero h1 .pt-hero-mark {
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    margin-right: 0.35rem;
    color: var(--pt-accent);
}

/* ---- Form ---- */
.pt-field-label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: #333;
    margin-bottom: 6px;
}
.pt-field-optional { font-weight: 400; color: #888; font-size: 0.85rem; }

.pt-textarea-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 130px;
    resize: vertical;
    line-height: 1.55;
}

.pt-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 0.82rem;
    color: #888;
}
.pt-input-counter.is-near { color: #d97706; }
.pt-input-counter.is-over { color: #dc2626; font-weight: 600; }
.pt-input-hint { color: #d97706; }

.pt-keep-wrap { margin-top: 14px; }
.pt-keep-wrap .text-input { width: 100%; box-sizing: border-box; }

/* ---- Mode pills (self-contained) ---- */
.pt-mode-picker { border: 0; padding: 0; margin: 16px 0 0; }
.pt-mode-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.pt-mode-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1.5px solid #d7dbe0;
    border-radius: 999px;
    background: #fff;
    color: #444;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.pt-mode-pill:hover { border-color: var(--pt-accent); color: var(--pt-accent-dark); }
.pt-mode-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pt-mode-pill.is-selected {
    border-color: var(--pt-accent);
    background: var(--pt-accent-tint-soft);
    color: var(--pt-accent-dark);
    font-weight: 600;
}
.pt-mode-pill:focus-within {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}

.pt-submit-row { margin-top: 18px; }

/* ---- Results ---- */
.pt-result-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 16px 18px 14px;
    margin: 6px 0 2px;
}
.pt-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.pt-mode-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--pt-accent-tint);
    color: var(--pt-accent-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pt-card-actions { display: flex; gap: 8px; }
.pt-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    background: #fff;
    color: #444;
    font-size: 0.84rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.pt-icon-btn:hover { border-color: var(--pt-accent); color: var(--pt-accent-dark); }
.pt-icon-btn:disabled { opacity: 0.55; cursor: default; }

.pt-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    padding: 12px 14px;
    font: inherit;
    line-height: 1.6;
    color: #1f2937;
    resize: vertical;
    white-space: pre-wrap;
}
.pt-textarea:focus { outline: 2px solid var(--pt-accent); outline-offset: 0; border-color: var(--pt-accent); }
.pt-textarea[hidden] { display: none; }

/* Read-only highlight view (changed words) */
.pt-highlight-view {
    border: 1px dashed #cdeee8;
    background: var(--pt-accent-tint-soft);
    border-radius: 8px;
    padding: 12px 14px;
    line-height: 1.6;
    color: #1f2937;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.pt-highlight-view[hidden] { display: none; }
mark.ke-changed {
    background: #fde68a;
    color: #7c2d12;
    border-radius: 3px;
    padding: 0 2px;
}

.pt-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 10px;
    font-size: 0.84rem;
    color: var(--pt-accent-dark);
    cursor: pointer;
    user-select: none;
}
.pt-view-toggle input { accent-color: var(--pt-accent); }

.pt-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.84rem;
    color: #6b7280;
}
.pt-meta-line .pt-sep { color: #cbd5e1; }
.pt-pct-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
    font-size: 0.8rem;
}
.pt-flesch-delta { font-variant-numeric: tabular-nums; }
.pt-flesch-delta .pt-up { color: #16a34a; font-weight: 600; }
.pt-flesch-delta .pt-down { color: #dc2626; font-weight: 600; }
.pt-flesch-delta .pt-flat { color: #6b7280; }

/* Results header extras */
.pt-results-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: #6b7280;
}

/* Honest caveat */
.pt-caveat {
    margin-top: 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #eef1f4;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #475569;
}
.pt-caveat summary { font-weight: 600; cursor: pointer; color: #334155; }
.pt-caveat p { margin: 8px 0 0; line-height: 1.55; }

@media (max-width: 640px) {
    .pt-card-top { flex-direction: column; align-items: flex-start; }
    .pt-card-actions { width: 100%; }
}