/* Translation Service — frontend styles. Loaded on /translate pages.
 *
 * Theme tokens: We map a small local `--ts-*` token set to Quark2's `--q2-*` vars
 * so the plugin inherits the active theme's accent + neutrals + dark mode for free.
 * Each token has a fallback for sites running a non-Quark2 theme.
 */

:root,
:root[data-theme='light'] {
    --ts-accent:           var(--q2-accent,        #6d28d9);
    --ts-accent-soft:      color-mix(in oklab, var(--q2-accent, #6d28d9) 12%, transparent);
    --ts-accent-softer:    color-mix(in oklab, var(--q2-accent, #6d28d9) 7%,  transparent);
    --ts-accent-strong:    color-mix(in oklab, var(--q2-accent, #6d28d9) 22%, transparent);
    --ts-accent-contrast:  var(--q2-accent-contrast, #ffffff);
    --ts-link:             var(--q2-link,          var(--q2-accent, #6d28d9));
    --ts-focus-ring:       var(--q2-focus-ring,    color-mix(in oklab, var(--q2-accent, #6d28d9) 35%, transparent));

    /* Dedicated token for monospace code/key text. Held separate from --ts-link so
       the ICU key paths in the list don't collapse into the accent's hue family
       (especially noticeable in dark mode where everything was purple-on-purple). */
    --ts-code-fg:          #2563eb;
    --ts-code-bg:          color-mix(in oklab, #2563eb 10%, transparent);

    --ts-bg:               var(--q2-bg,            #fbfbfc);
    --ts-surface:          var(--q2-bg-elev,       #ffffff);
    --ts-surface-muted:    var(--q2-bg-muted,      #f4f4f6);
    --ts-text-strong:      var(--q2-text-strong,   #18181b);
    --ts-text:             var(--q2-text,          #2c2c30);
    --ts-text-muted:       var(--q2-text-muted,    #6b6b73);
    --ts-border:           var(--q2-border-ring,   rgba(0,0,0,0.10));
    --ts-border-strong:    var(--q2-border-strong, rgba(0,0,0,0.18));
    --ts-divider:          var(--q2-divider,       rgba(0,0,0,0.08));

    --ts-row-hover:        color-mix(in oklab, var(--q2-accent, #6d28d9) 5%, transparent);
    --ts-row-active:       color-mix(in oklab, var(--q2-accent, #6d28d9) 11%, transparent);

    /* Status — light backgrounds + readable text. Defaults are slightly desaturated. */
    --ts-status-untranslated-bg: #e0e7ff; --ts-status-untranslated-fg: #3730a3;
    --ts-status-stale-bg:        #fef3c7; --ts-status-stale-fg:        #92400e;
    --ts-status-failed-bg:       #fee2e2; --ts-status-failed-fg:       #991b1b;
    --ts-status-needs-bg:        #fef3c7; --ts-status-needs-fg:        #b45309;
    --ts-status-ai-bg:           #ede9fe; --ts-status-ai-fg:           #6d28d9;
    --ts-status-approved-bg:     #dcfce7; --ts-status-approved-fg:     #166534;
    --ts-status-published-bg:    #cffafe; --ts-status-published-fg:    #0e7490;

    --ts-banner-changed-bg: #fffbeb; --ts-banner-changed-fg: #78350f; --ts-banner-changed-border: #fde68a;
    --ts-banner-removed-bg: #fef2f2; --ts-banner-removed-fg: #7f1d1d; --ts-banner-removed-border: #fecaca;
    --ts-diff-old-bg:       #fef2f2; --ts-diff-old-fg:       #7f1d1d;
    --ts-diff-new-bg:       #f0fdf4; --ts-diff-new-fg:       #14532d;

    --ts-error-bg:    #fef2f2; --ts-error-fg:    #b91c1c; --ts-error-border: #fecaca;
    --ts-ok-fg:       #15803d;
}

:root[data-theme='dark'] {
    /* Base palette — kept independent of Quark2's --q2-* tokens so the plugin
       renders correctly on any host theme that opts into dark mode by setting
       `data-theme="dark"` on the root (event-horizon, etc.). Quark2 still wins
       when its --q2-* vars resolve. */
    --ts-bg:               var(--q2-bg,            #15151A);
    --ts-surface:          var(--q2-bg-elev,       #1D1D24);
    --ts-surface-muted:    var(--q2-bg-muted,      #23232C);
    --ts-surface-elev:     var(--q2-bg-elev,       #2A2A34);
    --ts-text-strong:      var(--q2-text-strong,   #FAFAFA);
    --ts-text:             var(--q2-text,          #D4D4DC);
    --ts-text-muted:       var(--q2-text-muted,    #A6A6B0);
    --ts-border:           var(--q2-border-ring,   rgba(255,255,255,0.10));
    --ts-border-strong:    var(--q2-border-strong, rgba(255,255,255,0.18));
    --ts-divider:          var(--q2-divider,       rgba(255,255,255,0.08));
    --ts-link:             var(--q2-link,          var(--q2-accent, #a78bfa));

    --ts-accent-soft:      color-mix(in oklab, var(--q2-accent, #a78bfa) 22%, transparent);
    --ts-accent-softer:    color-mix(in oklab, var(--q2-accent, #a78bfa) 14%, transparent);
    --ts-accent-strong:    color-mix(in oklab, var(--q2-accent, #a78bfa) 35%, transparent);

    --ts-row-hover:        color-mix(in oklab, var(--q2-accent, #a78bfa) 18%, transparent);
    --ts-row-active:       color-mix(in oklab, var(--q2-accent, #a78bfa) 32%, transparent);

    /* Key/code text — pale-blue in dark mode for high contrast against the near-
       black surface and distinct from the purple accent in the same row. The bare
       (no-background) variant uses a brighter tone so it still pops on the row
       surface; the `.te-key` chip variant in the detail head has its own bg tint. */
    --ts-code-fg:          #bfdbfe;
    --ts-code-bg:          rgba(147, 197, 253, 0.14);

    /* Status — opaque-feel backgrounds with crisp text in dark mode. Translucent
       tints under ~25% blended too far into the row surface; bumping to 30–35%
       gives the pills proper presence without breaking the dim-overall feel. */
    --ts-status-untranslated-bg: rgba(99, 102, 241, 0.32);  --ts-status-untranslated-fg: #e0e7ff;
    --ts-status-stale-bg:        rgba(234, 179, 8,  0.28);  --ts-status-stale-fg:        #fef08a;
    --ts-status-failed-bg:       rgba(239, 68,  68, 0.32);  --ts-status-failed-fg:       #fecaca;
    --ts-status-needs-bg:        rgba(234, 179, 8,  0.28);  --ts-status-needs-fg:        #fef08a;
    --ts-status-ai-bg:           rgba(167, 139, 250,0.34);  --ts-status-ai-fg:           #ede9fe;
    --ts-status-approved-bg:     rgba(34,  197, 94, 0.30);  --ts-status-approved-fg:     #bbf7d0;
    --ts-status-published-bg:    rgba(6,   182, 212,0.30);  --ts-status-published-fg:    #a5f3fc;

    --ts-banner-changed-bg: rgba(234, 179, 8, 0.10); --ts-banner-changed-fg: #fde68a; --ts-banner-changed-border: rgba(234,179,8,0.30);
    --ts-banner-removed-bg: rgba(239, 68, 68, 0.10); --ts-banner-removed-fg: #fecaca; --ts-banner-removed-border: rgba(239,68,68,0.30);
    --ts-diff-old-bg:       rgba(239, 68, 68, 0.10); --ts-diff-old-fg:       #fecaca;
    --ts-diff-new-bg:       rgba(34, 197, 94, 0.10); --ts-diff-new-fg:       #bbf7d0;

    --ts-error-bg:    rgba(239, 68, 68, 0.10); --ts-error-fg:    #fca5a5; --ts-error-border: rgba(239,68,68,0.35);
    --ts-ok-fg:       #86efac;
}

/* ─────────────────────────────── shell ─────────────────────────────── */

.translate-page-content {
    max-width: 1140px;
    margin: 0 auto;
    padding-bottom: 80px;
    color: var(--ts-text);
    font-size: 15px;
}

.translate-user-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ts-divider);
    font-size: 14.5px;
    color: var(--ts-text);
}
/* The inline <form> wrappers around sign-in / sign-out shouldn't pad the row. */
.translate-user-bar form { margin: 0; }

/* `.translate-signin-btn.translate-signin-btn` — class chaining beats Pico's
   `button[type="submit"] { width: 100%; margin-bottom }` so the button hugs its
   content and stops kicking the row's vertical alignment off. */
.translate-signin-btn.translate-signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 8px 14px;
    background: var(--ts-accent);
    color: var(--ts-accent-contrast);
    border: 1px solid var(--ts-accent);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: none;
    line-height: 1.2;
}
.translate-signin-btn.translate-signin-btn:hover { filter: brightness(0.92); }
.translate-signin-btn svg { display: block; }
.translate-signin-hint { color: var(--ts-text-muted); font-size: 13.5px; }

/* Sign out — a subtle text-style button. Same specificity trick to disarm Pico. */
.translate-link-btn.translate-link-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 4px 10px;
    background: transparent;
    color: var(--ts-text-muted);
    border: 1px solid var(--ts-border);
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    box-shadow: none;
    line-height: 1.2;
    text-decoration: none;
}
.translate-link-btn.translate-link-btn:hover {
    color: var(--ts-text-strong);
    background: var(--ts-row-hover);
    border-color: var(--ts-border-strong);
}

translation-projects {
    display: block;
}

.tp-loading, .tp-empty {
    padding: 32px;
    text-align: center;
    color: var(--ts-text-muted);
    font-size: 14.5px;
}
.tp-error {
    padding: 12px 14px;
    border: 1px solid var(--ts-error-border);
    background: var(--ts-error-bg);
    color: var(--ts-error-fg);
    border-radius: 8px;
    font-size: 13.5px;
    margin: 8px 0;
}
.tp-success {
    padding: 12px 14px;
    border: 1px solid var(--ts-success-border, #2e7d32);
    background: var(--ts-success-bg, rgba(46, 125, 50, 0.15));
    color: var(--ts-success-fg, #66bb6a);
    border-radius: 8px;
    font-size: 13.5px;
    margin: 8px 0;
}

/* ─────────────────────────── card grid ─────────────────────────── */

.tp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.tp-card {
    display: block;
    border: 1px solid var(--ts-border);
    border-radius: 10px;
    padding: 18px;
    background: var(--ts-surface);
    text-decoration: none;
    color: inherit;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.tp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(0,0,0,.10);
    border-color: var(--ts-border-strong);
    text-decoration: none;
}
.tp-card-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--ts-text-strong);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tp-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--ts-surface-muted);
    color: var(--ts-text-muted);
    font-weight: 500;
    text-transform: capitalize;
    border: 1px solid var(--ts-divider);
}
.tp-badge-active { background: var(--ts-status-approved-bg); color: var(--ts-status-approved-fg); border-color: transparent; }
.tp-badge-paused { background: var(--ts-surface-muted); color: var(--ts-text-muted); }
.tp-card-meta {
    font-size: 13px;
    color: var(--ts-text-muted);
    line-height: 1.55;
}
.tp-card-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: var(--ts-surface-muted);
    color: var(--ts-text);
    padding: 1px 6px;
    border-radius: 4px;
}
.tp-card-stats {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ts-divider);
    font-size: 12.5px;
    color: var(--ts-text-muted);
}
.tp-card-stats strong { color: var(--ts-text-strong); font-weight: 600; }

/* ───────────────────────── breadcrumb + section header ───────────────────── */

.te-breadcrumb {
    font-size: 14px;
    color: var(--ts-text-muted);
    margin: 4px 0 16px;
    /* inline-flex hugs content — Pico's `nav { justify-content: space-between }` would
       otherwise stretch crumbs across the page. */
    display: inline-flex;
    justify-content: flex-start;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.te-breadcrumb a { color: var(--ts-link); text-decoration: none; }
.te-breadcrumb a:hover { text-decoration: underline; }
.te-crumb-sep { color: var(--ts-border-strong); }

.te-header { margin-bottom: 18px; }
.te-header h2 {
    margin: 0 0 6px;
    font-size: 24px;
    color: var(--ts-text-strong);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.te-header h2::before,
.te-header h2::after { content: none; display: none; }
.te-header-meta { font-size: 13.5px; color: var(--ts-text-muted); }
.te-header-meta a { color: var(--ts-link); }
.te-header-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: var(--ts-surface-muted);
    color: var(--ts-text);
    padding: 1px 6px;
    border-radius: 4px;
}
.te-lang-pill {
    background: var(--ts-accent-soft);
    color: var(--ts-accent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
:root[data-theme='dark'] .te-lang-pill {
    background: rgba(167, 139, 250, 0.22);
    color: #c4b5fd;
}
.te-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ts-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 24px 0 10px;
}

/* ───────────────────────────────── toolbar ──────────────────────────────── */

.te-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px;
    background: var(--ts-surface-muted);
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--ts-text);
}
.te-toolbar input[type="search"],
.te-toolbar select {
    padding: 8px 12px;
    border: 1px solid var(--ts-border-strong);
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    background: var(--ts-surface);
    color: var(--ts-text);
}
.te-toolbar input[type="search"]:focus,
.te-toolbar select:focus {
    outline: none;
    border-color: var(--ts-accent);
    box-shadow: 0 0 0 3px var(--ts-focus-ring);
}
.te-toolbar input[type="search"] { flex: 1 1 200px; min-width: 160px; }
.te-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--ts-text);
    font-size: 14px;
}
.te-toolbar-spacer { flex: 1; }
.te-count { color: var(--ts-text-muted); font-size: 13px; }

.te-shortcuts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: -4px 0 10px;
    padding: 0 2px;
    font-size: 12px;
    color: var(--ts-text-muted);
}
.te-shortcuts kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ts-text);
    background: var(--ts-surface-elev, var(--ts-surface));
    border: 1px solid var(--ts-border);
    border-bottom-width: 2px;
    border-radius: 4px;
}
.te-shortcuts-sep { opacity: 0.5; padding: 0 4px; }

/* ─────────────────────── ICU helpers (lint + preview) ─────────────────────── */

.te-icu-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.te-icu-toolbar:empty { margin-top: 0; }

.te-icu-fix {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    background: var(--ts-surface-elev, var(--ts-surface));
    color: var(--ts-text);
    border: 1px dashed var(--ts-accent);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.te-icu-fix:hover { background: var(--ts-accent); color: var(--ts-accent-fg, #fff); }
.te-icu-fix-hint {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    opacity: 0.7;
}

.te-icu-errors { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.te-icu-errors:empty { margin-top: 0; }
.te-icu-err {
    padding: 6px 10px;
    background: var(--ts-status-validation_failed-bg, #fee2e2);
    color: var(--ts-status-validation_failed-fg, #b91c1c);
    border-radius: 6px;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.te-preview {
    margin-top: 12px;
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    background: var(--ts-surface);
    font-size: 13px;
}
.te-preview > summary {
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 500;
    color: var(--ts-text);
    user-select: none;
}
.te-preview > summary:hover { background: var(--ts-surface-elev, var(--ts-surface)); }
.te-preview-body { padding: 8px 12px 12px; }
.te-preview-vars {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
    padding-bottom: 10px; border-bottom: 1px dashed var(--ts-border);
}
.te-preview-var {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 11.5px;
    color: var(--ts-text-muted);
}
.te-preview-var span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ts-text);
}
.te-preview-var input {
    padding: 3px 7px;
    width: 110px;
    font-size: 12px;
    border: 1px solid var(--ts-border);
    border-radius: 4px;
    background: var(--ts-surface);
    color: var(--ts-text);
    font-family: inherit;
}
.te-preview-line {
    display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: start;
    padding: 4px 0;
}
.te-preview-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--ts-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 2px;
}
.te-preview-err { color: var(--ts-status-validation_failed-fg, #b91c1c); font-style: normal; font-size: 11px; }

/* ─────────────────────── QA check banner ─────────────────────── */

.te-qa {
    margin: 8px 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--ts-status-validation_failed-fg, #b91c1c);
    background: var(--ts-status-validation_failed-bg, #fef2f2);
    border-radius: 6px;
    color: var(--ts-text);
}
.te-qa-head {
    font-size: 13px;
    color: var(--ts-status-validation_failed-fg, #b91c1c);
}
.te-qa-list {
    list-style: none; margin: 6px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.te-qa-item {
    display: flex; gap: 8px; align-items: baseline;
    padding: 4px 8px;
    background: var(--ts-surface);
    border-radius: 4px;
    font-size: 12.5px;
}
.te-qa-item--error .te-qa-sev    { color: #dc2626; }
.te-qa-item--warning .te-qa-sev  { color: #d97706; }
.te-qa-sev { font-weight: 700; min-width: 14px; }
.te-qa-kind {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    color: var(--ts-text);
}
.te-qa-detail { color: var(--ts-text-muted); }

/* ─────────────────────── History value diff ─────────────────────── */

.te-hist-diff {
    margin-top: 6px;
    border: 1px solid var(--ts-divider);
    border-radius: 4px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}
.te-hist-diff-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 4px;
    padding: 4px 8px;
    white-space: pre-wrap;
    word-break: break-word;
}
.te-hist-diff-row--old { background: var(--ts-diff-old-bg); color: var(--ts-diff-old-fg); }
.te-hist-diff-row--new { background: var(--ts-diff-new-bg); color: var(--ts-diff-new-fg); border-top: 1px solid var(--ts-divider); }
.te-hist-diff-tag {
    color: var(--ts-text-muted);
    font-weight: 700;
    text-align: center;
}

.te-row-stale-hint {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--ts-status-stale-fg);
    background: var(--ts-status-stale-bg);
    padding: 2px 6px;
    border-radius: 3px;
    margin: 2px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.te-header-sep { opacity: 0.4; padding: 0 6px; }
.te-download-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--ts-accent);
    text-decoration: none;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.te-download-link:hover { text-decoration: underline; }
.te-download-link svg { width: 14px; height: 14px; }

.te-edit-hint {
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--ts-text-muted);
    background: var(--ts-surface-muted);
    border-radius: 6px;
    border-left: 3px solid var(--ts-divider);
}
.te-edit-hint a { color: var(--ts-accent); }
.te-edit-hint strong { color: var(--ts-text); }
.te-edit-hint-text { margin-bottom: 8px; }
.te-edit-hint-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─────────────────────── Contact form ─────────────────────── */

translate-contact {
    display: block;
    max-width: 640px;
    margin: 0 auto;
}

.tc-form {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tc-form[data-disabled="1"] { opacity: .65; pointer-events: none; }
.tc-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ts-text); }
.tc-field > span { font-weight: 500; color: var(--ts-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.tc-field > span em { font-style: normal; opacity: 0.6; font-weight: 400; text-transform: none; letter-spacing: normal; }
.tc-field input, .tc-field select, .tc-field textarea {
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--ts-border);
    border-radius: 6px;
    background: var(--ts-surface);
    color: var(--ts-text);
}
.tc-field textarea { resize: vertical; min-height: 110px; }
.tc-row { display: flex; gap: 12px; }
.tc-row > .tc-field { flex: 1; }
.tc-actions { display: flex; gap: 8px; justify-content: flex-end; }

.te-comment-signin-hint {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--ts-text-muted);
    background: var(--ts-surface-muted);
    border: 1px dashed var(--ts-border);
    border-radius: 6px;
    margin-top: 8px;
}

/* ───────────────────────────── editor layout ────────────────────────────── */

.te-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 760px) {
    .te-layout { grid-template-columns: 1fr; }
}

.te-list {
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    background: var(--ts-surface);
    overflow: hidden;
    transition: opacity .15s;
}
.te-list--busy { opacity: 0.6; }

.te-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "key meta" "en  meta";
    gap: 2px 8px;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ts-divider);
    padding: 12px 14px;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.te-row:hover { background: var(--ts-row-hover); }
.te-row:last-child { border-bottom: none; }
.te-row--active { background: var(--ts-row-active); }
.te-row--active:hover { background: var(--ts-row-active); }

.te-row-key {
    grid-area: key;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ts-code-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.te-row-en {
    grid-area: en;
    font-size: 14px;
    color: var(--ts-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.te-row-meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}
.te-row-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ts-surface-muted);
    color: var(--ts-text-muted);
    text-transform: capitalize;
    font-weight: 500;
    white-space: nowrap;
}
.te-status-untranslated      { background: var(--ts-status-untranslated-bg); color: var(--ts-status-untranslated-fg); }
.te-status-approved          { background: var(--ts-status-approved-bg);     color: var(--ts-status-approved-fg); }
.te-status-published         { background: var(--ts-status-published-bg);    color: var(--ts-status-published-fg); }
.te-status-needs_review      { background: var(--ts-status-needs-bg);        color: var(--ts-status-needs-fg); }
.te-status-ai_suggested      { background: var(--ts-status-ai-bg);           color: var(--ts-status-ai-fg); }
.te-status-validation_failed { background: var(--ts-status-failed-bg);       color: var(--ts-status-failed-fg); }
.te-status-stale_orphan      { background: var(--ts-status-stale-bg);        color: var(--ts-status-stale-fg); }
.te-row-issue {
    background: var(--ts-status-failed-bg);
    color: var(--ts-status-failed-fg);
    font-weight: 700;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 11px;
}

.te-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--ts-divider);
    background: var(--ts-surface-muted);
    font-size: 13px;
    color: var(--ts-text);
}
.te-pager-btn {
    background: var(--ts-surface);
    color: var(--ts-text);
    border: 1px solid var(--ts-border-strong);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}
.te-pager-btn:hover:not([disabled]) {
    background: var(--ts-row-hover);
    border-color: var(--ts-accent);
    color: var(--ts-text-strong);
}
.te-pager-btn[disabled] { opacity: 0.4; cursor: default; }

/* ───────────────────────────── detail pane ──────────────────────────────── */

.te-detail {
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    background: var(--ts-surface);
    padding: 18px;
    /* Stick the detail pane below Quark2's sticky header (≈73px) so the editor
       stays in view as the reviewer scrolls through the long left-pane list. */
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}
@media (max-width: 760px) {
    /* Single-column layout — sticky inside a flow-stacked layout just covers the
       list, which is the opposite of helpful. Disable it on narrow screens. */
    .te-detail { position: static; max-height: none; }
}
.te-detail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ts-divider);
    margin-bottom: 14px;
}
.te-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--ts-code-fg);
    background: var(--ts-code-bg);
    padding: 2px 9px;
    border-radius: 4px;
}
.te-meta-pill {
    background: var(--ts-surface-muted);
    color: var(--ts-text-muted);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11.5px;
}

.te-pair { margin-bottom: 14px; }
.te-pair-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ts-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.te-source {
    background: var(--ts-surface-muted);
    border: 1px solid var(--ts-border);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--ts-text-strong);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.te-source-empty {
    color: var(--ts-text-muted);
    font-style: italic;
}
.te-placeholder {
    display: inline-block;
    background: var(--ts-accent-soft);
    color: var(--ts-accent);
    border-radius: 4px;
    padding: 0 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 500;
}
:root[data-theme='dark'] .te-placeholder {
    background: rgba(167, 139, 250, 0.22);
    color: #c4b5fd;
}
.te-placeholders {
    font-size: 12.5px;
    color: var(--ts-text-muted);
    margin: -8px 0 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.te-target {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    line-height: 1.55;
    border: 1px solid var(--ts-border-strong);
    border-radius: 6px;
    background: var(--ts-surface);
    color: var(--ts-text-strong);
    resize: vertical;
    min-height: 110px;
    box-sizing: border-box;
}
.te-target:focus {
    outline: none;
    border-color: var(--ts-accent);
    box-shadow: 0 0 0 3px var(--ts-focus-ring);
}

.te-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.te-actions-spacer { flex: 1; }
/* Keep Prev/Next together — they're a pair, wrapping one without the other looks broken. */
.te-actions-group {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
/* `.te-btn.te-btn` (chained class) bumps specificity to 0,2,0 — enough to win
   against Pico's `button[type="submit"]` and `button` defaults that otherwise paint
   our buttons full-width with bottom margin. */
.te-btn.te-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    background: var(--ts-surface);
    color: var(--ts-text-strong);
    box-shadow: none;
    flex: 0 0 auto;
}
.te-btn.te-btn--primary { background: var(--ts-accent); color: var(--ts-accent-contrast); border-color: var(--ts-accent); }
.te-btn.te-btn--primary:hover { filter: brightness(0.92); }
.te-btn.te-btn--ok      { background: #16a34a; color: #fff; border-color: #16a34a; }
.te-btn.te-btn--ok:hover { background: #15803d; }
.te-btn.te-btn--warn    { background: var(--ts-surface); color: var(--ts-status-failed-fg); border-color: var(--ts-status-failed-bg); }
.te-btn.te-btn--warn:hover { background: var(--ts-status-failed-bg); }
.te-btn.te-btn--ghost   { background: var(--ts-surface-muted); color: var(--ts-text); border-color: var(--ts-border); }
.te-btn.te-btn--ghost:hover { background: var(--ts-row-hover); border-color: var(--ts-border-strong); color: var(--ts-text-strong); }
.te-btn.te-btn--compact { padding: 6px 14px; font-size: 13.5px; }

.te-status-msg {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ts-text-muted);
}
/* Collapse the slot entirely when there's no message — no reserved blank line. */
.te-status-msg:empty { display: none; }
.te-status-msg--ok  { color: var(--ts-ok-fg); }
.te-status-msg--err { color: var(--ts-status-failed-fg); }

/* ────────────────────────── history + comments ─────────────────────────── */

.te-history, .te-comments {
    margin-top: 20px;
    border-top: 1px solid var(--ts-divider);
    padding-top: 14px;
    font-size: 14px;
    color: var(--ts-text);
}
.te-history > summary, .te-comments > summary {
    cursor: pointer;
    color: var(--ts-text);
    font-weight: 600;
    padding: 4px 0;
    list-style: revert;
}
.te-history-body, .te-comments-body { margin-top: 10px; }

.te-hist-row {
    border: 1px solid var(--ts-divider);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--ts-surface-muted);
}
.te-hist-head {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ts-text-muted);
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.te-hist-action { font-weight: 600; color: var(--ts-text); text-transform: capitalize; }
.te-hist-status { color: var(--ts-text-muted); }
.te-hist-val {
    font-size: 14px;
    color: var(--ts-text-strong);
    white-space: pre-wrap;
    word-break: break-word;
}
.te-hist-comment {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ts-text-muted);
    font-style: italic;
}

.te-comment {
    border: 1px solid var(--ts-divider);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--ts-surface);
}
.te-comment-head {
    font-size: 12.5px;
    color: var(--ts-text-muted);
    margin-bottom: 4px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.te-comment-head strong { color: var(--ts-text-strong); }
.te-comment-body { font-size: 14px; color: var(--ts-text); white-space: pre-wrap; word-break: break-word; }

.te-comment-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ts-border-strong);
    border-radius: 8px;
    background: var(--ts-surface);
    overflow: hidden;
}
.te-comment-form:focus-within { border-color: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-focus-ring); }
.te-comment-form textarea,
.te-comment-form .te-md-preview {
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--ts-text-strong);
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}
.te-comment-form textarea:focus { outline: none; }

.te-md-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--ts-divider);
    background: var(--ts-surface-muted);
}
.te-md-toolbar-spacer { flex: 1; }

/* Doubled class selector boosts specificity over Pico's `button[type="submit"]` /
   `button` defaults that would otherwise paint these as full-width primaries with
   bottom margin. */
.te-md-btn.te-md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
    color: var(--ts-text-muted);
    box-shadow: none;
    flex: 0 0 auto;
}
.te-md-btn.te-md-btn:hover {
    background: var(--ts-row-hover);
    border-color: var(--ts-border);
    color: var(--ts-text-strong);
}
.te-md-btn.te-md-btn:focus-visible {
    outline: 2px solid var(--ts-focus-ring);
    outline-offset: 1px;
}
.te-md-btn svg { display: block; }

.te-md-preview {
    min-height: 80px;
    overflow: auto;
}

.te-comment-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--ts-divider);
    background: var(--ts-surface-muted);
}
.te-md-hint {
    flex: 1;
    font-size: 12.5px;
    color: var(--ts-text-muted);
}
.te-md-hint code, .te-md-hint strong, .te-md-hint em { color: var(--ts-text); }
.te-md-hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    padding: 0 4px;
    background: var(--ts-surface);
    border-radius: 3px;
}
/* ───────────────── markdown rendering (comment bodies + preview) ─────── */

.te-markdown {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ts-text);
}
.te-markdown p { margin: 0 0 8px; }
.te-markdown p:last-child { margin-bottom: 0; }
.te-markdown h3, .te-markdown h4, .te-markdown h5 {
    margin: 12px 0 6px;
    color: var(--ts-text-strong);
    font-size: 15px;
    line-height: 1.3;
}
.te-markdown h3::before, .te-markdown h4::before, .te-markdown h5::before { content: none; display: none; }
.te-markdown ul {
    margin: 6px 0 8px;
    padding-left: 22px;
}
.te-markdown li { margin: 2px 0; }
.te-markdown blockquote {
    margin: 8px 0;
    padding: 4px 10px;
    border-left: 3px solid var(--ts-border-strong);
    background: var(--ts-surface-muted);
    color: var(--ts-text-muted);
    border-radius: 0 4px 4px 0;
}
.te-markdown code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    background: var(--ts-surface-muted);
    color: var(--ts-text-strong);
    padding: 1px 5px;
    border-radius: 3px;
}
.te-markdown pre {
    background: var(--ts-surface-muted);
    border: 1px solid var(--ts-divider);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
}
.te-markdown pre code {
    background: transparent;
    padding: 0;
    font-size: 12.5px;
}
.te-markdown a { color: var(--ts-link); }
.te-markdown a:hover { text-decoration: underline; }
.te-markdown strong { color: var(--ts-text-strong); }

/* ──────────────── source-changed banner (stale_orphan rows) ───────────── */

.te-banner {
    border-radius: 8px;
    padding: 13px 15px;
    margin: -2px 0 16px;
    font-size: 14px;
    line-height: 1.55;
}
.te-banner--changed {
    background: var(--ts-banner-changed-bg);
    border: 1px solid var(--ts-banner-changed-border);
    color: var(--ts-banner-changed-fg);
}
.te-banner--removed {
    background: var(--ts-banner-removed-bg);
    border: 1px solid var(--ts-banner-removed-border);
    color: var(--ts-banner-removed-fg);
}
/* Reviewer-facing card for an inbound contributor proposal — uses the accent
   palette so it visually separates from the amber "source changed" banner. */
.te-banner--proposal {
    background: var(--ts-accent-softer);
    border: 1px solid var(--ts-accent-strong);
    color: var(--ts-text);
}
:root[data-theme='dark'] .te-banner--proposal {
    background: rgba(167, 139, 250, 0.10);
    border-color: rgba(167, 139, 250, 0.35);
    color: var(--ts-text);
}
/* Contributor's own awaiting-review card — same hue, slightly different so
   they recognise it as "mine" vs the reviewer-action variant. */
.te-banner--my-proposal {
    background: var(--ts-accent-softer);
    border: 1px dashed var(--ts-accent-strong);
    color: var(--ts-text);
}
:root[data-theme='dark'] .te-banner--my-proposal {
    background: rgba(167, 139, 250, 0.07);
    border-color: rgba(167, 139, 250, 0.30);
}
.te-banner-head { margin-bottom: 8px; }
.te-banner strong { color: inherit; }

/* Row-list pip for rows that have a pending proposal. Reviewers scan for it. */
.te-row-proposal {
    color: var(--ts-accent);
    font-size: 12px;
    line-height: 1;
    margin-left: 4px;
}
:root[data-theme='dark'] .te-row-proposal {
    color: #c4b5fd;
}

.te-diff {
    background: color-mix(in oklab, var(--ts-surface) 50%, transparent);
    border: 1px solid var(--ts-divider);
    border-radius: 6px;
    overflow: hidden;
}
.te-diff-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    font-size: 14px;
}
.te-diff-row--old { background: var(--ts-diff-old-bg); color: var(--ts-diff-old-fg); }
.te-diff-row--new { background: var(--ts-diff-new-bg); color: var(--ts-diff-new-fg); border-top: 1px solid var(--ts-divider); }
.te-diff-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    width: 72px;
    flex-shrink: 0;
    padding-top: 2px;
    opacity: 0.75;
}
.te-diff-val {
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
}
.te-banner-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

/* ─────────────── translation progress block (cards + editor) ──────────── */

.tp-progress {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ts-divider);
}
.tp-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--ts-text-muted);
    margin-bottom: 6px;
}
.tp-progress-pct {
    font-size: 16px;
    font-weight: 700;
    color: var(--ts-text-strong);
    font-variant-numeric: tabular-nums;
}
.tp-progress-meta {
    font-variant-numeric: tabular-nums;
}
.tp-progress-right {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
}
.tp-progress-right .te-download-link {
    font-size: 13px;
}
.tp-progress-bar {
    position: relative;
    height: 8px;
    background: var(--ts-surface-muted);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--ts-divider);
}
.tp-progress-fill {
    position: absolute;
    inset: 0;
    /* "translated" zone — anything with a row, including ai_suggested + needs_review.
       Uses the theme accent so it follows Quark2's color scheme. */
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--ts-accent) 75%, white),
        var(--ts-accent));
    width: 0%;
    transition: width .35s ease;
    border-radius: 999px;
}
.tp-progress-fill--approved {
    /* strict subset — approved + published, in green so the user always sees the
       "really done" portion regardless of theme accent */
    background: linear-gradient(90deg, #34d399, #10b981);
}

.te-lang-progress {
    margin-top: 12px;
}
.te-lang-progress .tp-progress {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ─────────────── version-conflict draft pane ─────────────── */
.te-conflict-draft {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--ts-error-border);
    background: var(--ts-error-bg);
    border-radius: 8px;
    color: var(--ts-error-fg);
    font-size: 13.5px;
}
.te-conflict-head {
    margin-bottom: 6px;
}
.te-conflict-body {
    margin: 0 0 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    font-family: var(--ts-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12.5px;
    white-space: pre-wrap;
    max-height: 200px;
    overflow: auto;
}
.te-conflict-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}