/*
 * Title Length Checker , tool-specific styles.
 *
 * Composes shared primitives from code/assets/css/tools.css
 * (.tool-form-card, .mode-toggle, .input-form, .text-input,
 *  .primary-btn, .quota-chip, .results-region, .results-header,
 *  .toasts, .modal-backdrop, .modal-card, etc.).
 *
 * Only defines tool-specific layout + the score panel, SERP preview
 * tiles, pixel rulers, AI variant cards, bulk table.
 */

/* ----- Mode-toggle pill override (2 tabs: paste / url) ----- */
/* Shared rule is hardcoded for `data-mode="bulk"` per
   [[mode-toggle-pill-data-mode]]. We use `paste` + `url` so the
   pill needs its own translateX rules. */
.mode-toggle[data-mode="paste"]::before { transform: translateX(0); }
.mode-toggle[data-mode="url"]::before   { transform: translateX(100%); }

/* ----- Form layout fixes for paste mode ----- */
.tlc-fullwidth { width: 100%; box-sizing: border-box; }

.tlc-paste-field { margin-bottom: 18px; }
.tlc-paste-field:last-child { margin-bottom: 0; }
.tlc-desc-area { resize: vertical; min-height: 70px; }

.tlc-counter {
    margin-left: 8px;
    font-weight: 500;
    color: var(--ink-500, #6b7280);
    font-size: 0.85em;
}

.tlc-pixel-ruler {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.tlc-pixel-ruler-track {
    flex: 1;
    height: 6px;
    background: var(--ink-100, #f1f3f5);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.tlc-pixel-ruler-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, #6ee7b7 0%, #34d399 100%);
    border-radius: 4px;
    transition: width 80ms ease-out;
}
.tlc-pixel-ruler-fill.is-over {
    background: linear-gradient(90deg, #fbbf24 0%, #ef4444 100%);
}
.tlc-pixel-ruler-budget {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--brand-500, #2563eb);
    transform: translateX(-100%);
}
.tlc-pixel-ruler-text {
    flex: 0 0 auto;
    color: var(--ink-500, #6b7280);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}
.tlc-pixel-ruler-text.is-over { color: #dc2626; font-weight: 600; }

/* ----- Options row (focus keyword + location) ----- */
.tlc-options-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}
.tlc-option { display: block; }
.tlc-kw-preview {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.9em;
}
.tlc-kw-chip {
    background: var(--ink-50, #f9fafb);
    border: 1px solid var(--ink-200, #e5e7eb);
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--ink-700, #374151);
}
.tlc-kw-chip strong {
    color: var(--brand-700, #1d4ed8);
    margin-right: 4px;
}
.tlc-kw-na { color: var(--ink-500, #6b7280); font-style: italic; }

.tlc-serp-loc-control { position: relative; }
.tlc-loc-results {
    position: absolute;
    inset: calc(100% + 4px) 0 auto 0;
    background: white;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    list-style: none;
    padding: 4px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
}
.tlc-loc-results li {
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9em;
}
.tlc-loc-results li:hover { background: var(--brand-50, #eff6ff); }
.tlc-loc-type { color: var(--ink-500, #6b7280); }

.tlc-submit-row { margin-top: 18px; justify-content: flex-end; }

.tlc-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

/* ----- Result body container (no shared sticky-table inside) ----- */
.tlc-result-body { padding: 18px 22px; }
.tlc-result-body > *:last-child { margin-bottom: 0; }

/* ----- Audited subject (the title we just scored) ----- */
.tlc-audited {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--ink-50, #f9fafb);
    border-left: 4px solid var(--brand-500, #2563eb);
    border-radius: 6px;
}
.tlc-audited[hidden] { display: none; }
.tlc-audited-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--ink-500, #6b7280);
    margin-bottom: 4px;
}
.tlc-audited-title {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--ink-900, #111827);
    line-height: 1.3;
    word-break: break-word;
}
.tlc-audited-title.tlc-audited-missing {
    font-style: italic;
    font-weight: 500;
    color: var(--ink-500, #6b7280);
}
.tlc-audited-url {
    display: inline-block;
    margin-top: 6px;
    color: var(--brand-700, #1d4ed8);
    font-size: 0.85em;
    text-decoration: none;
    word-break: break-all;
}
.tlc-audited-url:hover { text-decoration: underline; }
.tlc-audited-url[hidden] { display: none; }
.tlc-audited-desc {
    margin: 8px 0 0 0;
    color: var(--ink-600, #4b5563);
    font-size: 0.9em;
    line-height: 1.5;
}
.tlc-audited-desc[hidden] { display: none; }

/* ----- Score panel ----- */
.tlc-score-panel {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ink-100, #f1f3f5);
}
.tlc-score-panel[hidden] { display: none; }
.tlc-score-grade {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.tlc-score-grade-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-50, #f9fafb);
    color: var(--ink-700, #374151);
    font-size: 4em;
    font-weight: 700;
    line-height: 1;
}
.tlc-score-grade-circle[data-grade="A"] { background: #d1fae5; color: #065f46; }
.tlc-score-grade-circle[data-grade="B"] { background: #ddedfb; color: #1e40af; }
.tlc-score-grade-circle[data-grade="C"] { background: #fef3c7; color: #92400e; }
.tlc-score-grade-circle[data-grade="D"] { background: #fed7aa; color: #9a3412; }
.tlc-score-grade-circle[data-grade="F"] { background: #fee2e2; color: #991b1b; }
.tlc-score-grade-stats { display: block; }
.tlc-score-grade-value { font-size: 1.8em; font-weight: 700; }
.tlc-score-grade-max { color: var(--ink-500, #6b7280); font-size: 0.5em; margin-left: 4px; font-weight: 500; }
.tlc-score-grade-label {
    color: var(--ink-600, #4b5563);
    font-size: 0.95em;
    max-width: 220px;
    margin: 0 auto;
}

.tlc-score-rubric { display: flex; flex-direction: column; gap: 8px; }
.tlc-rubric-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: start;
    padding: 8px 12px;
    background: var(--ink-50, #f9fafb);
    border-radius: 6px;
    border-left: 3px solid var(--ink-300, #d1d5db);
}
.tlc-rubric-row.tlc-rubric-pass { border-left-color: #34d399; }
.tlc-rubric-row.tlc-rubric-warn { border-left-color: #fbbf24; }
.tlc-rubric-row.tlc-rubric-fail { border-left-color: #ef4444; }
.tlc-rubric-row.tlc-rubric-info { border-left-color: #60a5fa; }

.tlc-rubric-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.tlc-rubric-icon svg { width: 100%; height: 100%; }
.tlc-rubric-row.tlc-rubric-pass .tlc-rubric-icon { color: #059669; }
.tlc-rubric-row.tlc-rubric-warn .tlc-rubric-icon { color: #d97706; }
.tlc-rubric-row.tlc-rubric-fail .tlc-rubric-icon { color: #dc2626; }
.tlc-rubric-row.tlc-rubric-info .tlc-rubric-icon { color: #2563eb; }

.tlc-rubric-text { display: flex; flex-direction: column; gap: 2px; }
.tlc-rubric-text strong { font-weight: 600; color: var(--ink-800, #1f2937); }
.tlc-rubric-why { color: var(--ink-600, #4b5563); font-size: 0.9em; }
.tlc-rubric-pts { font-weight: 600; color: var(--ink-700, #374151); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----- SERP preview tiles ----- */
.tlc-preview-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}
.tlc-preview-tiles[hidden] { display: none; }
@media (max-width: 720px) {
    .tlc-preview-tiles { grid-template-columns: 1fr; }
    .tlc-score-panel { grid-template-columns: 1fr; }
}
.tlc-preview-tile {
    background: white;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}
.tlc-preview-tile-head {
    background: var(--ink-50, #f9fafb);
    padding: 8px 12px;
    border-bottom: 1px solid var(--ink-200, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    color: var(--ink-600, #4b5563);
}
.tlc-preview-tile-head svg { width: 14px; height: 14px; }
.tlc-preview-tile-body {
    padding: 16px 18px;
    font-family: Arial, sans-serif;
}
.tlc-serp-url {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #5f6368;
    margin-bottom: 4px;
}
.tlc-serp-favicon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #e2e8f0;
    border-radius: 50%;
}
.tlc-serp-title {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #1a0dab;
    margin: 0 0 4px 0;
    word-break: break-word;
}
.tlc-preview-mobile .tlc-serp-title {
    font-size: 16px;
    font-weight: 400;
}
.tlc-serp-desc {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #4d5156;
    margin: 0;
}

/* ----- Action buttons (opt-in: SERP compare + AI rewrite) ----- */
.tlc-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.tlc-actions-row[hidden] { display: none; }
.tlc-action-btn {
    background: white;
    color: var(--brand-700, #1d4ed8);
    border: 1.5px solid var(--brand-200, #bfdbfe);
    box-shadow: none;
}
.tlc-action-btn:hover:not([disabled]):not(.is-loading) {
    background: var(--brand-50, #eff6ff);
    border-color: var(--brand-400, #60a5fa);
    color: var(--brand-700, #1d4ed8);
}
.tlc-action-btn[disabled],
.tlc-action-btn.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
}
.tlc-action-btn.is-loading span::after { content: '...'; margin-left: 4px; }
.tlc-action-btn .icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
}
/* Smooth-scroll target margin so the panels land just below the
   sticky site header rather than under it. */
.tlc-serp-panel, .tlc-ai-panel { scroll-margin-top: 16px; }

/* ----- SERP-compare panel ----- */
.tlc-serp-panel {
    background: white;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 24px;
    overflow: hidden;
}
.tlc-serp-panel-head {
    background: var(--ink-50, #f9fafb);
    padding: 12px 16px;
    border-bottom: 1px solid var(--ink-200, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.tlc-serp-panel-meta { color: var(--ink-500, #6b7280); font-size: 0.9em; }
.tlc-cache-badge {
    background: #d1fae5;
    color: #065f46;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    margin-left: 6px;
}
.tlc-serp-panel-body { padding: 12px 16px; }
.tlc-serp-hint {
    margin: 0 0 12px 0;
    color: var(--ink-600, #4b5563);
    font-size: 0.9em;
}
.tlc-serp-hint strong { color: #b45309; }
.tlc-serp-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--ink-100, #f1f3f5);
    align-items: start;
}
.tlc-serp-row:first-child { border-top: none; }
.tlc-serp-row.is-over { background: linear-gradient(to right, rgba(254, 226, 226, 0.4), transparent 80%); }
.tlc-serp-row-mine {
    background: linear-gradient(to right, rgba(219, 234, 254, 0.5), transparent 80%);
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
}
.tlc-serp-row-rank {
    font-weight: 600;
    color: var(--ink-500, #6b7280);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tlc-serp-row-mine .tlc-serp-row-rank { color: var(--brand-700, #1d4ed8); }
.tlc-serp-row-title {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: #1a0dab;
    margin-bottom: 4px;
    word-break: break-word;
}
.tlc-serp-row-mine .tlc-serp-row-title {
    color: var(--ink-900, #111827);
}
.tlc-serp-row-title a { color: inherit; text-decoration: none; }
.tlc-serp-row-title a:hover { text-decoration: underline; }
.tlc-serp-row-meta { color: var(--ink-500, #6b7280); font-size: 0.85em; }
.tlc-serp-own-badge {
    background: var(--brand-50, #eff6ff);
    color: var(--brand-700, #1d4ed8);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    font-size: 0.9em;
}

/* ----- AI rewrite panel ----- */
.tlc-ai-panel {
    background: white;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 24px;
    overflow: hidden;
}
.tlc-ai-panel-head {
    background: var(--ink-50, #f9fafb);
    padding: 12px 16px;
    border-bottom: 1px solid var(--ink-200, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tlc-ai-panel-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.tlc-ai-variant {
    border: 1.5px solid var(--ink-200, #e5e7eb);
    border-radius: 8px;
    padding: 14px;
}
.tlc-ai-variant.is-over { border-color: #fbbf24; background: #fffbeb; }
.tlc-ai-variant-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
    flex-wrap: wrap;
}
.tlc-ai-variant-meta { color: var(--ink-500, #6b7280); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.tlc-ai-variant-title {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--ink-900, #111827);
    margin-bottom: 6px;
}
.tlc-ai-variant-rationale {
    color: var(--ink-600, #4b5563);
    font-size: 0.9em;
    margin-bottom: 10px;
}
.tlc-ai-variant-actions { display: flex; gap: 8px; }

/* ----- Hidden-attribute overrides for opt-in panels ----- */
.tlc-serp-panel[hidden],
.tlc-ai-panel[hidden] { display: none; }

/* ----- History row score chip ----- */
.tlc-history-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ink-50, #f9fafb);
    color: var(--ink-700, #374151);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tlc-history-score.tlc-grade-A { background: #d1fae5; color: #065f46; }
.tlc-history-score.tlc-grade-B { background: #ddedfb; color: #1e40af; }
.tlc-history-score.tlc-grade-C { background: #fef3c7; color: #92400e; }
.tlc-history-score.tlc-grade-D { background: #fed7aa; color: #9a3412; }
.tlc-history-score.tlc-grade-F { background: #fee2e2; color: #991b1b; }