/*!
 * AI Text Detector — R62 evidence-review design layer
 * ===================================================
 * Loaded AFTER detector-form.css. It re-points the existing design tokens at the
 * R62 palette and supplies the components of the evidence-review workspace
 * (three-zone scale, result tabs, passage cards, sentence explorer, in-card
 * loading panel, error cards).
 *
 * Scope: the detector tool ONLY (.ai-detector-wrapper-v3 and the result/loading/
 * error sections). The surrounding site's editorial typography is untouched.
 *
 * Principles enforced here:
 *   - no circular gauge, no glow, no decorative multicolour gradients
 *   - status is never communicated by colour alone (icon + text always present)
 *   - 8px spacing scale, >=14px labels, 16px body, 24-28px section headings
 *   - >=44x44px interactive targets, always-visible keyboard focus
 *   - WCAG AA contrast on every text/background pair used below
 *   - motion respects prefers-reduced-motion
 */

/* ---------------------------------------------------------------- tokens -- */
.ai-detector-wrapper-v3,
.ai-detector-results-v3,
.ai-detector-loading-screen-v3,
.ai-detector-error-v2 {
    --r62-page: #FAF8F4;
    --r62-card: #FFFFFF;
    --r62-primary: #C84A12;
    --r62-primary-dark: #A63C0D;
    --r62-peach: #FDE8DD;
    --r62-text: #222222;
    --r62-text-2: #667085;
    --r62-border: #E7E2DC;
    --r62-border-strong: #D8D1C8;

    /* semantic status colours — always paired with an icon + text label */
    --r62-amber: #B45309;          /* mixed / inconclusive evidence */
    --r62-amber-bg: #FDF3E7;
    --r62-teal: #0F766E;           /* lower signal */
    --r62-teal-bg: #ECF7F5;
    --r62-higher: #C84A12;         /* higher signal (brand burnt orange) */
    --r62-higher-bg: #FDE8DD;
    --r62-error: #B42318;          /* technical errors ONLY */
    --r62-error-bg: #FEF3F2;

    /* 8px spacing scale */
    --r62-s1: 8px;  --r62-s2: 16px; --r62-s3: 24px;
    --r62-s4: 32px; --r62-s5: 40px; --r62-s6: 48px;

    --r62-radius: 16px;
    --r62-radius-sm: 10px;
    --r62-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --r62-shadow-lift: 0 2px 4px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.07);
    --r62-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* re-point the legacy tokens so untouched components inherit the new system */
    --color-text: var(--r62-text);
    --color-text-secondary: var(--r62-text-2);
    --color-text-muted: var(--r62-text-2);
    --color-border: var(--r62-border);
    --color-border-hover: var(--r62-border-strong);
    --color-green: var(--r62-teal);
    --color-green-dark: #0B5E58;
    --color-green-bg: var(--r62-teal-bg);
    --color-amber: var(--r62-amber);
    --color-amber-dark: #93400A;
    --color-amber-bg: var(--r62-amber-bg);
    --color-red: var(--r62-error);
    --color-red-dark: #912018;
    --color-red-bg: var(--r62-error-bg);
}

/* ------------------------------------------------------------ typography -- */
/* Sans-serif inside the tool; the site's editorial serif stays outside it. */
.ai-detector-wrapper-v3,
.ai-detector-wrapper-v3 input,
.ai-detector-wrapper-v3 select,
.ai-detector-wrapper-v3 textarea,
.ai-detector-wrapper-v3 button,
.ai-detector-results-v3,
.ai-detector-loading-screen-v3,
.ai-detector-error-v2 {
    font-family: var(--r62-font);
    color: var(--r62-text);
}
.ai-detector-wrapper-v3 .detector-title-v3,
.ai-detector-results-v3 h2,
.ai-detector-results-v3 h3,
.ai-detector-loading-screen-v3 h2 {
    font-family: var(--r62-font);
    letter-spacing: -0.01em;
}
.ai-detector-results-v3 h2 { font-size: 26px; line-height: 1.25; }
.ai-detector-results-v3 h3 { font-size: 20px; line-height: 1.3; }
.ai-detector-wrapper-v3 { font-size: 16px; line-height: 1.6; }
.ai-detector-wrapper-v3 .form-label-v3,
.r62-label { font-size: 14px; font-weight: 600; color: var(--r62-text); }
.r62-muted { color: var(--r62-text-2); }
.r62-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- prohibited elements -- */
/* Circular gauge, glow, robot mark and decorative gradients are removed from the
   result interface; the linear three-zone scale replaces the gauge. */
.ai-detector-results-v3 .circular-progress-wrapper,
.ai-detector-results-v3 .circular-progress-container,
.ai-detector-results-v3 .circular-progress,
.ai-detector-results-v3 .ai-circle,
.ai-detector-results-v3 .ai-ring,
.ai-detector-results-v3 .result-glow,
.ai-detector-results-v3 .robot-icon,
.ai-detector-results-v3 .brain-path,
.ai-detector-loading-screen-v3 .loading-icon-v3 svg .brain-path {
    display: none !important;
}
.ai-detector-results-v3,
.ai-detector-results-v3 .results-header-v3,
.ai-detector-results-v3 .verdict-card,
.ai-detector-loading-screen-v3 {
    background-image: none !important;
    box-shadow: var(--r62-shadow);
    filter: none !important;
}
/* The legacy verdict card duplicated the band/description/consistency that the
   R62 summary now carries, in the old visual language (strong red badge +
   multicolour gradient rule). Its DOM stays so the runtime's existing writes
   remain valid; only its presentation is retired. */
.ai-detector-results-v3 .result-verdict-v3 { display: none !important; }
.ai-detector-results-v3 .result-main-v3::before,
.ai-detector-results-v3 .result-verdict-v3::before,
.ai-detector-results-v3 .results-header-v3::before { content: none !important; }
.ai-detector-results-v3 .section-badge { display: none !important; }
/* Result icon in the header: neutral, not a success/verdict signal. */
.ai-detector-results-v3 .result-icon-v3 { color: var(--r62-teal); }

/* Loading: the decorative brain/particles and the big numeric percentage are
   retired. The R62 panel carries the real stage rows; the legacy progressbar
   element stays in the DOM (it remains the accessible progress source the
   runtime maintains) but is visually collapsed. */
.ai-detector-loading-screen-v3 .loading-icon-v3,
.ai-detector-loading-screen-v3 .particle,
.ai-detector-loading-screen-v3 .progress-percentage,
.ai-detector-loading-screen-v3 .section-badge { display: none !important; }
.ai-detector-loading-screen-v3 .progress-counter-wrapper { margin: 0; }
.ai-detector-loading-screen-v3 .progress-bar-container {
    height: 8px; border-radius: 999px; background: var(--r62-page);
    border: 1px solid var(--r62-border); overflow: hidden;
}
.ai-detector-loading-screen-v3 .progress-bar-fill { background: var(--r62-primary); }
/* The legacy status line is the POLITE LIVE REGION the runtime announces stage
   changes through — it must keep existing and keep updating. Visually it is
   redundant now (the stage rows carry the same state) and it rendered in the
   site's serif face, so it is moved off-screen rather than removed: screen
   readers still hear every real stage change. */
.ai-detector-loading-screen-v3 .loading-messages-v3 .loading-title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ai-detector-loading-screen-v3 .loading-container-v3 {
    display: grid;
    gap: var(--r62-s3);
    background: none !important;
    padding: 0;
}
.ai-detector-loading-screen-v3 .loading-animation-wrapper {
    background: none !important;
    padding: 0;
}
.ai-detector-loading-screen-v3 .r62-loading h2 {
    font-size: 26px;
    line-height: 1.25;
    text-align: left;
    font-family: var(--r62-font);
}
.ai-detector-loading-screen-v3 .r62-loading p { text-align: left; }

/* -------------------------------------------------------------- surfaces -- */
.ai-detector-wrapper-v3 { background: transparent; }
.ai-detector-container-v3 { max-width: 1120px; margin: 0 auto; }
.ai-detector-form-v3,
.ai-detector-results-v3,
.ai-detector-loading-screen-v3 {
    background: var(--r62-card);
    border: 1px solid var(--r62-border);
    border-radius: var(--r62-radius);
    box-shadow: var(--r62-shadow);
    padding: var(--r62-s4);
}
@media (max-width: 720px) {
    .ai-detector-form-v3,
    .ai-detector-results-v3,
    .ai-detector-loading-screen-v3 { padding: var(--r62-s2); border-radius: 14px; }
}

/* ------------------------------------------------- controls & focus ring -- */
.ai-detector-wrapper-v3 button,
.ai-detector-wrapper-v3 .action-btn,
.ai-detector-results-v3 button,
.ai-detector-results-v3 .action-btn,
.r62-btn {
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--r62-radius-sm);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--r62-font);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.r62-btn-primary {
    background: var(--r62-primary);
    color: #fff;
    border: 1px solid var(--r62-primary);
    padding: 12px 20px;
}
.r62-btn-primary:hover { background: var(--r62-primary-dark); border-color: var(--r62-primary-dark); }
.r62-btn-secondary {
    background: #fff;
    color: var(--r62-text);
    border: 1px solid var(--r62-border-strong);
    padding: 12px 18px;
}
.r62-btn-secondary:hover { background: var(--r62-page); }
.r62-btn-quiet {
    background: transparent;
    border: 1px solid transparent;
    color: var(--r62-text-2);
    text-decoration: underline;
    padding: 10px 12px;
}
.r62-btn-quiet:hover { color: var(--r62-text); }

.ai-detector-wrapper-v3 :focus-visible,
.ai-detector-results-v3 :focus-visible,
.ai-detector-loading-screen-v3 :focus-visible,
.ai-detector-error-v2 :focus-visible {
    outline: 3px solid var(--r62-primary);
    outline-offset: 2px;
    border-radius: 6px;
}
.ai-detector-wrapper-v3 [tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------ three-zone score scale -- */
.r62-score-block { display: grid; gap: var(--r62-s2); }
.r62-score-headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.r62-score-value { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.r62-score-label { font-size: 14px; font-weight: 600; color: var(--r62-text-2); text-transform: none; }
.r62-score-caveat { font-size: 14px; color: var(--r62-text-2); }

.r62-scale { position: relative; margin-top: var(--r62-s1); }
.r62-scale-track {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
}
.r62-scale-zone { background: var(--r62-teal-bg); }
.r62-scale-zone.is-mixed { background: var(--r62-amber-bg); }
.r62-scale-zone.is-higher { background: var(--r62-higher-bg); }
.r62-scale-zone.is-active { box-shadow: inset 0 0 0 2px currentColor; }
.r62-scale-zone.is-active.is-lower { color: var(--r62-teal); }
.r62-scale-zone.is-active.is-mixed { color: var(--r62-amber); }
.r62-scale-zone.is-active.is-higher { color: var(--r62-higher); }
.r62-scale-marker {
    position: absolute;
    top: -6px;
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: var(--r62-text);
    transform: translateX(-2px);
    transition: left .25s ease;
}
.r62-scale-legend {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--r62-text-2);
}
.r62-scale-legend span:nth-child(2) { text-align: center; }
.r62-scale-legend span:nth-child(3) { text-align: right; }

/* status pill — icon + text, never colour alone */
.r62-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid currentColor;
}
.r62-status .r62-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.r62-status.is-lower  { color: var(--r62-teal);   background: var(--r62-teal-bg); }
.r62-status.is-mixed  { color: var(--r62-amber);  background: var(--r62-amber-bg); }
.r62-status.is-higher { color: var(--r62-higher); background: var(--r62-higher-bg); }

/* -------------------------------------------------------- warning blocks -- */
.r62-warning {
    display: flex;
    gap: 12px;
    padding: var(--r62-s2);
    border-radius: var(--r62-radius-sm);
    background: var(--r62-page);
    border: 1px solid var(--r62-border);
    font-size: 15px;
}
.r62-warning strong { display: block; margin-bottom: 4px; }
.r62-warning-icon { flex: none; color: var(--r62-primary); }

/* --------------------------------------------------------- insight row --- */
.r62-insights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r62-s1) var(--r62-s3);
    padding: var(--r62-s2) 0;
    border-top: 1px solid var(--r62-border);
    border-bottom: 1px solid var(--r62-border);
    font-size: 14px;
    color: var(--r62-text-2);
}
.r62-insight strong { color: var(--r62-text); font-weight: 600; }

/* --------------------------------------------------------------- tabs ---- */
.r62-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--r62-border);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.r62-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--r62-text-2);
    white-space: nowrap;
    min-height: 44px;
}
.r62-tab[aria-selected="true"] {
    color: var(--r62-primary);
    border-bottom-color: var(--r62-primary);
}
.r62-tab .r62-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--r62-page);
    border: 1px solid var(--r62-border);
    font-size: 13px;
    color: var(--r62-text-2);
}
.r62-tabpanel { padding-top: var(--r62-s3); }
.r62-tabpanel[hidden] { display: none; }

/* --------------------------------------------- evidence review workspace -- */
.r62-evidence {
    display: grid;
    grid-template-columns: 62fr 38fr;
    gap: var(--r62-s3);
    align-items: start;
}
@media (max-width: 1024px) {
    .r62-evidence { grid-template-columns: 1fr; }
}
.r62-source {
    background: var(--r62-card);
    border: 1px solid var(--r62-border);
    border-radius: var(--r62-radius-sm);
    padding: var(--r62-s3);
    max-height: 70vh;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 16px;
    white-space: pre-wrap;
    word-break: break-word;
}
.r62-source mark {
    background: var(--r62-peach);
    color: inherit;
    border-left: 3px solid var(--r62-primary);
    padding: 2px 4px 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.r62-source mark[aria-current="true"] {
    background: #FBD5C2;
    box-shadow: 0 0 0 2px var(--r62-primary);
}
.r62-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--r62-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    vertical-align: 2px;
}
.r62-passages { display: grid; gap: var(--r62-s2); align-content: start; }
.r62-passage {
    display: grid;
    gap: 10px;
    padding: var(--r62-s2);
    border: 1px solid var(--r62-border);
    border-left: 4px solid var(--r62-border-strong);
    border-radius: var(--r62-radius-sm);
    background: var(--r62-card);
    text-align: left;
    width: 100%;
    font-size: 15px;
}
.r62-passage[aria-current="true"] {
    border-left-color: var(--r62-primary);
    background: #FFFDFB;
    box-shadow: var(--r62-shadow-lift);
}
.r62-passage-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The card is a <button>, so weight/family must be reset explicitly or the
   sentence inherits bold control styling and the site's serif face. */
.r62-passage-text {
    line-height: 1.6;
    font-weight: 400;
    font-family: var(--r62-font);
    color: var(--r62-text);
}
.r62-passage-meta { font-size: 13px; color: var(--r62-text-2); font-weight: 400; }
.r62-evidence h4,
.r62-evidence .r62-label,
.r62-evidence select { font-family: var(--r62-font); }
.r62-source { font-family: var(--r62-font); }

/* ------------------------------------------------------ sentence explorer */
.r62-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--r62-s2); }
.r62-filter {
    padding: 8px 14px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--r62-border-strong);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--r62-text-2);
}
.r62-filter[aria-pressed="true"] {
    background: var(--r62-peach);
    border-color: var(--r62-primary);
    color: var(--r62-primary-dark);
}
.r62-sentences { display: grid; gap: 12px; }
.r62-sentence {
    padding: var(--r62-s2);
    border: 1px solid var(--r62-border);
    border-radius: var(--r62-radius-sm);
    background: var(--r62-card);
}
.r62-sentence-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.r62-sentence-body { line-height: 1.65; }
.r62-sentence-body.is-clamped {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ----------------------------------------------------- in-card loading --- */
.r62-loading { display: grid; gap: var(--r62-s3); }
.r62-loading-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--r62-s2);
    padding: 12px var(--r62-s2);
    background: var(--r62-page);
    border: 1px solid var(--r62-border);
    border-radius: var(--r62-radius-sm);
    font-size: 14px;
    color: var(--r62-text-2);
    flex-wrap: wrap;
}
.r62-stages { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.r62-stage { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--r62-text-2); }
.r62-stage-icon {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    border: 2px solid var(--r62-border-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.r62-stage.is-done { color: var(--r62-text); }
.r62-stage.is-done .r62-stage-icon { background: var(--r62-teal); border-color: var(--r62-teal); color: #fff; }
.r62-stage.is-active { color: var(--r62-text); font-weight: 600; }
.r62-stage.is-active .r62-stage-icon { border-color: var(--r62-primary); }
.r62-progress-track {
    height: 8px; border-radius: 999px; background: var(--r62-page);
    border: 1px solid var(--r62-border); overflow: hidden;
}
.r62-progress-fill { height: 100%; background: var(--r62-primary); width: 0; transition: width .3s ease; }
.r62-progress-track.is-indeterminate .r62-progress-fill {
    width: 40%; animation: r62-indet 1.4s ease-in-out infinite;
}
@keyframes r62-indet {
    0% { transform: translateX(-100%); } 100% { transform: translateX(250%); }
}
.r62-skeleton { display: grid; gap: 12px; }
.r62-skeleton-row {
    height: 14px; border-radius: 6px;
    background: linear-gradient(90deg, #F1EDE7 25%, #F7F4F0 37%, #F1EDE7 63%);
    background-size: 400% 100%;
    animation: r62-shimmer 1.6s ease infinite;
}
.r62-skeleton-row.is-wide { height: 40px; }
@keyframes r62-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------------------------------------------------- error cards -- */
.r62-error {
    display: flex;
    gap: 12px;
    padding: var(--r62-s3);
    border-radius: var(--r62-radius);
    border: 1px solid #FDA29B;
    background: var(--r62-error-bg);
}
.r62-error h3 { margin: 0 0 6px; font-size: 18px; color: var(--r62-error); }
.r62-error p { margin: 0 0 12px; color: var(--r62-text); }
.r62-error-icon { flex: none; color: var(--r62-error); }

/* ------------------------------------------------------------- utilities -- */
.r62-stack { display: grid; gap: var(--r62-s3); }
.r62-stack-sm { display: grid; gap: var(--r62-s2); }
.r62-row { display: flex; flex-wrap: wrap; gap: var(--r62-s1); align-items: center; }
.r62-card {
    background: var(--r62-card);
    border: 1px solid var(--r62-border);
    border-radius: var(--r62-radius-sm);
    padding: var(--r62-s3);
}
.r62-disclosure summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--r62-primary-dark);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.r62-disclosure[open] summary { margin-bottom: 10px; }

/* sticky mobile review action */
@media (max-width: 720px) {
    .r62-sticky-action {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding: 12px 0;
        background: linear-gradient(to top, var(--r62-card) 70%, rgba(255,255,255,0));
    }
    .r62-sticky-action .r62-btn-primary { width: 100%; }
    .r62-insights { gap: var(--r62-s1) var(--r62-s2); }
    .r62-score-value { font-size: 34px; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
    .ai-detector-wrapper-v3 *,
    .ai-detector-results-v3 *,
    .ai-detector-loading-screen-v3 * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .r62-progress-track.is-indeterminate .r62-progress-fill { width: 100%; transform: none; }
}

/* §9: the legacy spreadsheet table is superseded by the card explorer above it
   (it truncated sentences and forced horizontal scrolling on mobile). It stays
   in the DOM because the download-report builder reads its rows. */
.ai-detector-results-v3 .breakdown-table-wrapper { display: none !important; }
.ai-detector-results-v3 .r62-sentence-body { font-family: var(--r62-font); }
.ai-detector-results-v3 .r62-expand { padding: 6px 0; }