/* Sentence Rewriter - tool-specific overrides on shared tools.css. */

/* -------------------------------------------------------------------
 * Brand tokens
 * ------------------------------------------------------------------- */
:root {
    --sr-brand:      #6366f1;
    --sr-brand-fade: #4f46e5;
    --sr-brand-tint: #e0e7ff;

    /* SR uses an indigo accent rather than the project brand-red for the
     * tone-pill picker. The shared .tone-pill rules in tools.css read these
     * three variables. tool.css only loads on the SR page, so :root scoping
     * is safe. */
    --tone-brand:      var(--sr-brand);
    --tone-brand-fade: var(--sr-brand-fade);
    --tone-brand-tint: var(--sr-brand-tint);
}

/* -------------------------------------------------------------------
 * Hero logo (inline SVG quill in brand colour, 1em tall).
 * Sits inside the shared <h1> via $hero_html_prefix.
 * ------------------------------------------------------------------- */
.sr-hero-logo {
    display: inline-block;
    vertical-align: -0.12em;
    line-height: 1;
    margin-right: 0.35em;
}
.sr-hero-logo svg {
    height: 1em;
    width: auto;
}

/* -------------------------------------------------------------------
 * Form card. Tightened to keep the Submit button above the fold on
 * an 800px-tall laptop viewport.
 * ------------------------------------------------------------------- */
.sr-form-body { padding: 8px 0 0 0; }
.tool-form-card#sr-form-card {
    padding-top: 18px;
    padding-bottom: 14px;
}

.sr-field-row {
    margin-bottom: 12px;
}
.sr-field-label {
    display: block;
    font-weight: 600;
    color: var(--ink-800);
    margin-bottom: 4px;
    font-size: 0.88rem;
}
.sr-field-label .sr-optional {
    font-weight: 400;
    color: var(--ink-500);
    font-size: 0.85em;
    margin-left: 4px;
}
.sr-field-help {
    margin: 6px 0 0 0;
    font-size: 0.8125rem;
    color: var(--ink-600);
}
.sr-char-count {
    font-size: 0.75rem;
    color: var(--ink-500);
    float: right;
    margin-top: 4px;
}
.sr-char-count.is-warning { color: #d97706; }
.sr-char-count.is-danger  { color: #dc2626; }

/* Fix: shared .text-input { flex: 1 1 320px } can cause height/width bugs
 * in a column-flex or block parent. Stretch explicitly.
 * See [[text-input-flex-basis-height]]. */
.sr-field-row .text-input,
.sr-field-row textarea {
    width: 100%;
    box-sizing: border-box;
}

.sr-input-textarea {
    min-height: 72px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

/* Options row (focus keyword + target length). */
.sr-options {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--ink-50);
    border-radius: 10px;
    border: 1px solid var(--ink-100);
    margin-bottom: 12px;
}
.sr-option-cell { flex: 1 1 220px; min-width: 0; }
.sr-option-cell .text-input {
    width: 100%;
    box-sizing: border-box;
}

/* Target-length select. */
.sr-target-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink-800);
    background: #fff;
    cursor: pointer;
}
.sr-target-select:focus {
    outline: none;
    border-color: var(--sr-brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Submit row. */
.sr-submit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.sr-submit-meta {
    font-size: 0.8125rem;
    color: var(--ink-500);
}

/* -------------------------------------------------------------------
 * Quota chip: fix hidden toggle (display:flex beats UA [hidden]).
 * See [[hidden-attribute-with-flex]].
 * ------------------------------------------------------------------- */
.quota-chip[hidden] { display: none; }

/* -------------------------------------------------------------------
 * Progress region
 * ------------------------------------------------------------------- */
.sr-progress-bar-track {
    height: 6px;
    background: var(--ink-100);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}
.sr-progress-bar-fill {
    height: 100%;
    background: var(--sr-brand);
    border-radius: 999px;
    transition: width 0.4s ease;
    width: 10%;
}
.sr-whimsy-msg {
    font-size: 0.875rem;
    color: var(--ink-600);
    min-height: 1.4em;
    text-align: center;
}

/* -------------------------------------------------------------------
 * Results region: 8-card grid
 * ------------------------------------------------------------------- */
.sr-results-body {
    padding: 18px 22px 4px 22px;
}
.sr-results-body > *:last-child { margin-bottom: 18px; }

.sr-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

/* Variant card. */
.sr-variant-card {
    /* The result card is the primary thing the user is here for, so
       it gets stronger emphasis than the surrounding form chrome:
       brand-tinted background, brand-colored 1.5px border, a slightly
       elevated shadow, and a brief fade-up entry animation. The user
       lands on the page, sees the cards appear, knows where to look. */
    background: linear-gradient(180deg, var(--sr-brand-tint, #eef0ff) 0%, #ffffff 100%);
    border: 1.5px solid var(--sr-brand);
    border-radius: 12px;
    padding: 18px 22px 20px 22px;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: sr-card-appear 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sr-variant-card:hover {
    border-color: var(--sr-brand);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.18);
    transform: translateY(-1px);
}
@keyframes sr-card-appear {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Card header: tone label + regen button. */
.sr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sr-tone-label {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--sr-brand);
    letter-spacing: 0.02em;
}
.sr-regen-btn {
    flex: 0 0 auto;
    font-size: 0.75rem;
    padding: 4px 10px;
    border: 1px solid var(--sr-brand-tint);
    border-radius: 6px;
    background: transparent;
    color: var(--sr-brand);
    cursor: pointer;
    transition: all 0.12s ease;
}
.sr-regen-btn:hover {
    background: var(--sr-brand-tint);
    border-color: #c7d2fe;
}
.sr-regen-btn.is-loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* Card text area (editable). Heavier visual weight than a form
   textarea: bigger font, taller minimum, slight tint shift on focus.
   This IS the result the user came for, so it shouldn't read like a
   form field. */
.sr-card-textarea {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 96px;
    resize: vertical;
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    padding: 12px 14px;
    font: inherit;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-900);
    background: #fff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.sr-card-textarea:focus {
    outline: none;
    border-color: var(--sr-brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* Card meta line (char count, word count, readability). */
.sr-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.775rem;
    color: var(--ink-500);
    align-items: center;
}
.sr-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.sr-card-meta-item strong {
    font-weight: 600;
    color: var(--ink-700);
}
.sr-kw-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.sr-kw-badge.is-missing {
    background: #fee2e2;
    color: #b91c1c;
}

/* Card footer: copy button. */
.sr-card-footer {
    display: flex;
    justify-content: flex-end;
}
.sr-copy-btn {
    font-size: 0.8125rem;
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid var(--ink-200);
    background: #fff;
    color: var(--ink-700);
    cursor: pointer;
    transition: all 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sr-copy-btn:hover {
    background: var(--ink-50);
    border-color: var(--ink-300);
    color: var(--ink-900);
}
.sr-copy-btn.is-copied {
    background: #dcfce7;
    border-color: #86efac;
    color: #15803d;
}

/* -------------------------------------------------------------------
 * Caveat block (AI-generated text disclaimer)
 * ------------------------------------------------------------------- */
.sr-caveat {
    margin: 14px 22px;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #78350f;
    line-height: 1.5;
}
.sr-caveat a { color: #92400e; }

/* -------------------------------------------------------------------
 * Debug panel (gated by logging.debug_enabled).
 * Reuses shared .debug-region etc. from tools.css.
 * ------------------------------------------------------------------- */
.debug-region[hidden] { display: none; }

/* -------------------------------------------------------------------
 * Aliases for the index.php naming conventions
 * (the markup uses one set of class names; the original CSS used
 * another; these rules unify them.)
 * ------------------------------------------------------------------- */
.sr-form-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 4px 0;
    line-height: 1.3;
}
.sr-form-subtitle {
    font-size: 0.9rem;
    color: var(--ink-600);
    margin: 0 0 18px 0;
    line-height: 1.5;
}

.sr-input-wrap { margin-bottom: 12px; }
.sr-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
.sr-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--ink-500);
    flex-wrap: wrap;
}
.sr-input-counter { white-space: nowrap; }
.sr-input-counter.is-warning { color: #d97706; font-weight: 600; }
.sr-input-counter.is-danger  { color: #dc2626; font-weight: 600; }
.sr-input-hint { color: var(--ink-600); font-size: 0.78rem; }
.sr-input-hint.is-danger { color: #b91c1c; }

.sr-options-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--ink-50);
    border-radius: 10px;
    border: 1px solid var(--ink-100);
    margin-bottom: 12px;
}
.sr-option { flex: 1 1 220px; min-width: 0; }
.sr-option .text-input {
    width: 100%;
    box-sizing: border-box;
}
.sr-field-optional {
    font-weight: 400;
    color: var(--ink-500);
    font-size: 0.85em;
    margin-left: 4px;
}

.sr-target-custom-wrap { margin-top: 8px; }
.sr-target-custom {
    width: 100%;
    box-sizing: border-box;
}

.sr-input-subhead {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 22px 4px 22px;
    padding: 10px 12px;
    background: var(--sr-brand-tint);
    border-left: 4px solid var(--sr-brand);
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.55;
}
.sr-input-subhead-label {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--sr-brand-fade);
    text-transform: uppercase;
    padding-top: 2px;
}
.sr-input-subhead-text {
    flex: 1 1 auto;
    color: var(--ink-800);
    word-break: break-word;
}

/* Variant grid: the markup uses .sr-variants-grid for the wrapper.
 * One submission produces one variant, so the wrapper is a single full-width
 * column rather than an auto-fill grid. */
.sr-variants-grid {
    display: block;
    padding: 18px 22px 4px 22px;
}
.sr-variants-grid > *:last-child { margin-bottom: 18px; }

/* Results badge for the "8 rewrites" count. */
.results-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--sr-brand-tint);
    color: var(--sr-brand-fade);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Variant char-count tint when target_chars is set. */
.sr-card-charcount.is-on-target { color: #15803d; font-weight: 600; }
.sr-card-charcount.is-near      { color: #b45309; font-weight: 600; }
.sr-card-charcount.is-off       { color: #b91c1c; font-weight: 600; }

/* -------------------------------------------------------------------
 * Card header actions (Copy + Regenerate icon buttons)
 * ------------------------------------------------------------------- */
.sr-card-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sr-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 4px 9px;
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-600);
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
}
.sr-icon-btn:hover {
    border-color: var(--sr-brand);
    color: var(--sr-brand);
    background: var(--sr-brand-tint);
}
.sr-icon-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.sr-btn-label { font-weight: 500; }

/* -------------------------------------------------------------------
 * Meta-line spans inside .sr-card-meta
 * ------------------------------------------------------------------- */
.sr-meta-chars,
.sr-meta-words,
.sr-meta-flesch,
.sr-meta-target {
    display: inline;
    color: var(--ink-600);
}
.sr-meta-target {
    color: var(--ink-500);
    font-style: italic;
    margin-left: 6px;
}

/* Char-count tints when target_chars is set. */
.sr-meta-chars.sr-target-ok   { color: #15803d; font-weight: 600; }
.sr-meta-chars.sr-target-warn { color: #b45309; font-weight: 600; }
.sr-meta-chars.sr-target-bad  { color: #b91c1c; font-weight: 600; }

/* Keyword pill (replaces .sr-kw-badge for the JS-generated markup). */
.sr-kw-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-left: 4px;
}
.sr-kw-pill.is-yes {
    background: #dcfce7;
    color: #15803d;
}
.sr-kw-pill.is-no {
    background: #fee2e2;
    color: #b91c1c;
}

/* -------------------------------------------------------------------
 * Audit-length button (cross-link to TLC, conditional visibility)
 * ------------------------------------------------------------------- */
.sr-audit-btn {
    font-size: 0.75rem;
    padding: 4px 9px;
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-600);
    cursor: pointer;
    transition: all 0.12s ease;
}
.sr-audit-btn:hover {
    border-color: var(--sr-brand);
    color: var(--sr-brand);
    background: var(--sr-brand-tint);
}

/* -------------------------------------------------------------------
 * Tone picker (pill-style radio group)
 * ------------------------------------------------------------------- */
/* Tone-pill picker is now driven by shared .tone-pills / .tone-pill in
 * tools.css. SR's per-tool overrides only set --tone-brand / --tone-brand-fade
 * / --tone-brand-tint at the top of this file. */

/* Scroll-margin so the progress region lands below the sticky header. */
.progress-region,
#sr-progress {
    scroll-margin-top: 16px;
}

/* -------------------------------------------------------------------
 * Responsive tweaks
 * ------------------------------------------------------------------- */
@media (max-width: 680px) {
    .sr-results-body,
    .sr-variants-grid {
        padding: 14px 14px 4px 14px;
    }
    .sr-variant-card {
        padding: 12px 14px 14px 14px;
    }
    .sr-options,
    .sr-options-row {
        flex-direction: column;
    }
    .sr-input-subhead {
        margin: 14px 14px 4px 14px;
    }
    .sr-btn-label {
        display: none;
    }
}