/* AI Grammar Checker - tool-specific overrides on shared tools.css. */

/* -------------------------------------------------------------------
 * Brand tokens. Deep blue for "blue ink, proofreader's pen" feel.
 * Distinct from AISUM (orange), SR (indigo), ATG (teal).
 * ------------------------------------------------------------------- */
:root {
    --aigc-brand:      #1d4ed8;
    --aigc-brand-fade: #1e40af;
    --aigc-brand-tint: #dbeafe;
    --aigc-brand-soft: #eff6ff;
}

/* -------------------------------------------------------------------
 * Form card.
 * ------------------------------------------------------------------- */
.tool-form-card#aigc-form-card {
    padding-top: 18px;
    padding-bottom: 14px;
}

.aigc-field-label {
    display: block;
    font-weight: 600;
    color: var(--ink-800);
    margin-bottom: 4px;
    font-size: 0.88rem;
}

/* Mode toggle: 3 tabs. The shared .mode-toggle::before is hardcoded
 * for data-mode="bulk" with translateX(100%); override for each
 * non-default tab and set width to 33% of total. */
.aigc-mode-toggle { min-width: 0; }
.aigc-mode-toggle .mode-btn {
    min-width: 130px;
    text-align: center;
    padding-left: 18px;
    padding-right: 18px;
}
.aigc-mode-toggle[data-mode="paste"]::before  { transform: translateX(0); }
.aigc-mode-toggle[data-mode="url"]::before    { transform: translateX(100%); }
.aigc-mode-toggle[data-mode="upload"]::before { transform: translateX(200%); }
.aigc-mode-toggle::before {
    width: calc(33.333% - 4px) !important;
}

/* Mode panels: show only the active one. */
.aigc-mode-panel { margin-top: 14px; }
.aigc-mode-panel[hidden] { display: none; }
.aigc-mode-panel.is-visible { display: block; }

.aigc-textarea {
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 220px;
    max-height: 600px;
    resize: vertical;
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.55;
}
.aigc-paste-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--ink-500);
}
.aigc-word-counter.is-warn   { color: #d97706; font-weight: 600; }
.aigc-word-counter.is-danger { color: #dc2626; font-weight: 600; }

.aigc-mode-hint {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--ink-600);
}

/* Upload dropzone */
.aigc-upload-dropzone {
    margin-top: 6px;
    padding: 14px 16px;
    border: 2px dashed var(--ink-200);
    border-radius: 8px;
    background: var(--ink-50);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.aigc-upload-dropzone.is-dragover {
    border-color: var(--aigc-brand);
    background: var(--aigc-brand-soft);
}
.aigc-upload-pick-btn { flex: 0 0 auto; }
.aigc-upload-file-label {
    flex: 1 1 auto;
    color: var(--ink-700);
    font-size: 0.88rem;
    word-break: break-all;
}
.aigc-upload-file-label.has-file {
    color: var(--aigc-brand-fade);
    font-weight: 600;
}

/* -------------------------------------------------------------------
 * Options row (English variant + target tone).
 * ------------------------------------------------------------------- */
.aigc-options {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 720px) {
    .aigc-options { grid-template-columns: 1fr; }
}
.aigc-option-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.aigc-option-cell > .text-input,
.aigc-mode-panel > .text-input {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.aigc-select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink-800);
}
.aigc-select:focus {
    outline: none;
    border-color: var(--aigc-brand);
    box-shadow: 0 0 0 3px var(--aigc-brand-tint);
}

.aigc-submit-row {
    margin-top: 16px;
}

/* -------------------------------------------------------------------
 * Progress bar + whimsical messages.
 * ------------------------------------------------------------------- */
.progress-region {
    scroll-margin-top: 16px;
}
.aigc-progress-bar-track {
    height: 8px;
    background: var(--ink-100);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}
.aigc-progress-bar-fill {
    height: 100%;
    width: 10%;
    background: linear-gradient(90deg, var(--aigc-brand), var(--aigc-brand-fade));
    transition: width 0.6s ease;
}
.aigc-whimsy-msg {
    margin: 0;
    text-align: center;
    color: var(--ink-700);
    font-size: 0.95rem;
}

/* -------------------------------------------------------------------
 * Results region overrides. The shared .results-region has no inner
 * padding (sticky chrome). Card-stack contents need their own padding
 * per [[results-region-card-stack-inner-padding]].
 * ------------------------------------------------------------------- */
.aigc-results-body {
    padding: 18px 22px 4px;
}
.aigc-results-body > *:last-child {
    margin-bottom: 18px;
}

/* Source subhead per [[audited-subject-subhead-pattern]] */
.aigc-source-subhead {
    border-left: 4px solid var(--aigc-brand);
    background: var(--aigc-brand-soft);
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 0 6px 6px 0;
}
.aigc-source-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--aigc-brand-fade);
    font-weight: 700;
    margin-bottom: 4px;
}
.aigc-source-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-900);
    word-break: break-word;
}
.aigc-source-url {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.82rem;
    color: var(--aigc-brand);
    word-break: break-all;
}
.aigc-source-meta {
    font-size: 0.78rem;
    color: var(--ink-500);
    margin-top: 3px;
}

/* -------------------------------------------------------------------
 * Score card (grade circle + per-category rings).
 * ------------------------------------------------------------------- */
.aigc-score-card {
    background: #fff;
    border: 1px solid var(--ink-150);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 18px;
}
.aigc-score-headline {
    display: flex;
    align-items: center;
    gap: 22px;
}
.aigc-grade-circle {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aigc-brand), var(--aigc-brand-fade));
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.18);
}
.aigc-grade-circle.is-warn  { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 12px rgba(217, 119, 6, 0.18); }
.aigc-grade-circle.is-danger{ background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.18); }
.aigc-grade-letter {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}
.aigc-grade-score {
    font-size: 0.78rem;
    margin-top: 2px;
    opacity: 0.85;
}
.aigc-score-blurb {
    flex: 1 1 auto;
    min-width: 0;
}
.aigc-score-title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: var(--ink-900);
}
.aigc-score-summary {
    margin: 0 0 8px;
    color: var(--ink-700);
    font-size: 0.95rem;
    line-height: 1.4;
}
.aigc-score-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.aigc-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--aigc-brand-tint);
    color: var(--aigc-brand-fade);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.aigc-meta-pill.aigc-findings-count {
    background: var(--ink-100);
    color: var(--ink-700);
}

/* Category rings row */
.aigc-category-rings {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-100);
}
@media (max-width: 880px) {
    .aigc-category-rings { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
    .aigc-category-rings { grid-template-columns: repeat(2, 1fr); }
}
.aigc-cat-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.aigc-cat-ring-svg {
    width: 56px;
    height: 56px;
}
.aigc-cat-ring-score {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-900);
}
.aigc-cat-ring-label {
    font-size: 0.74rem;
    color: var(--ink-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------
 * Corrected text panel.
 * ------------------------------------------------------------------- */
.aigc-corrected-panel {
    background: #fff;
    border: 1px solid var(--ink-150);
    border-radius: 10px;
    margin-bottom: 18px;
}
.aigc-corrected-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ink-100);
    background: var(--ink-50);
    border-radius: 10px 10px 0 0;
}
.aigc-corrected-title {
    margin: 0;
    font-size: 1rem;
    color: var(--ink-900);
}
.aigc-corrected-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.aigc-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--ink-700);
    cursor: pointer;
    user-select: none;
}
.aigc-diff-toggle input { accent-color: var(--aigc-brand); }
.aigc-corrected-body {
    margin: 0;
    padding: 16px 18px;
    font-family: var(--font-body);
    font-size: 0.96rem;
    color: var(--ink-900);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 480px;
    overflow-y: auto;
}

/* -------------------------------------------------------------------
 * Findings stack.
 * ------------------------------------------------------------------- */
.aigc-findings-wrap {
    margin-bottom: 18px;
}
.aigc-findings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 16px;
    flex-wrap: wrap;
}
.aigc-findings-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink-900);
}
.aigc-findings-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
}
.aigc-findings-filter label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.aigc-filter-label {
    color: var(--ink-600);
}
.aigc-sev-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aigc-sev-pill.is-high   { background: #fee2e2; color: #b91c1c; }
.aigc-sev-pill.is-medium { background: #fef3c7; color: #b45309; }
.aigc-sev-pill.is-low    { background: var(--aigc-brand-tint); color: var(--aigc-brand-fade); }

.aigc-findings-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Per-category divider */
.aigc-cat-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aigc-cat-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--ink-50);
    border-radius: 6px;
    font-size: 0.86rem;
    color: var(--ink-700);
    font-weight: 600;
}
.aigc-cat-name {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aigc-brand-fade);
}
.aigc-cat-count {
    color: var(--ink-500);
    font-weight: 500;
}

/* Finding card */
.aigc-finding {
    background: #fff;
    border: 1px solid var(--ink-150);
    border-radius: 10px;
    padding: 14px 18px;
}
.aigc-finding.is-applied {
    border-color: #10b981;
    background: #ecfdf5;
}
.aigc-finding-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.aigc-finding-rule {
    font-weight: 600;
    color: var(--ink-900);
    font-size: 0.95rem;
}
.aigc-finding-cat-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: var(--ink-100);
    color: var(--ink-600);
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.aigc-finding-block {
    margin-top: 8px;
    padding: 10px 12px;
    border-left: 3px solid var(--ink-200);
    background: var(--ink-50);
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
    line-height: 1.5;
}
.aigc-finding-block-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    font-weight: 700;
    margin-bottom: 3px;
}
.aigc-finding-block.is-original {
    border-left-color: #fca5a5;
    background: #fef2f2;
}
.aigc-finding-block.is-original .aigc-finding-block-label {
    color: #b91c1c;
}
.aigc-finding-block.is-corrected {
    border-left-color: #6ee7b7;
    background: #ecfdf5;
}
.aigc-finding-block.is-corrected .aigc-finding-block-label {
    color: #047857;
}

.aigc-finding-text {
    color: var(--ink-900);
    white-space: pre-wrap;
    word-break: break-word;
}

.aigc-finding-explain {
    margin-top: 10px;
    color: var(--ink-700);
    font-size: 0.9rem;
    line-height: 1.5;
}

.aigc-finding-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.aigc-finding-apply,
.aigc-finding-regen {
    padding: 6px 12px;
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-800);
    font-size: 0.84rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.aigc-finding-apply {
    border-color: var(--aigc-brand);
    color: var(--aigc-brand-fade);
    background: var(--aigc-brand-soft);
}
.aigc-finding-apply:hover {
    background: var(--aigc-brand);
    color: #fff;
}
.aigc-finding-apply.is-applied {
    border-color: #10b981;
    background: #10b981;
    color: #fff;
    cursor: default;
}
.aigc-finding-regen:hover {
    border-color: var(--aigc-brand);
    color: var(--aigc-brand-fade);
}
.aigc-finding-regen:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* -------------------------------------------------------------------
 * Honest framing caveat.
 * ------------------------------------------------------------------- */
.aigc-caveat {
    background: var(--ink-50);
    border: 1px solid var(--ink-150);
    border-radius: 10px;
    padding: 12px 18px;
    margin-top: 4px;
}
.aigc-caveat summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-800);
    list-style: none;
}
.aigc-caveat summary::-webkit-details-marker { display: none; }
.aigc-caveat summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 6px;
    color: var(--ink-500);
    transition: transform 0.15s ease;
}
.aigc-caveat[open] summary::before { transform: rotate(90deg); }
.aigc-caveat p {
    margin: 10px 0 0;
    color: var(--ink-700);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* -------------------------------------------------------------------
 * Marketing banner accent.
 * ------------------------------------------------------------------- */
.marketing-banner#aigc-upgrade-banner {
    background: var(--aigc-brand-soft);
    border-color: var(--aigc-brand-tint);
}

/* -------------------------------------------------------------------
 * History list affordances inherit from shared tools.css; nothing
 * extra here.
 * ------------------------------------------------------------------- */