/* Shared, lightweight feedback for the existing tool pages. */
body[data-ui-page] {
    --yw-accent: #1768ef;
    --yw-soft: #eff6ff;
    --yw-line: #d5e4fa;
    --yw-ink: #183153;
    --yw-glint: #8dcaff;
}
html[data-home-theme="red"] body[data-ui-page],
body[data-ui-page="opportunity"]:has(.atlas-theme-toggle.is-red) {
    --yw-accent: #d63f52;
    --yw-soft: #fff2f0;
    --yw-line: #f0d2d5;
    --yw-ink: #70313b;
    --yw-glint: #ffb4a5;
}
@property --yw-beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes yw-beam { to { --yw-beam-angle: 360deg; } }
@keyframes yw-orbit { to { transform: rotate(360deg); } }
@keyframes yw-enter { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Search focus remains visible even on devices with animation disabled. */
body[data-ui-page] :is(input[type="search"], .atlas-query input, #custom-term-value, #keywordInput):focus {
    outline: 2px solid var(--yw-accent);
    outline-offset: 3px;
    border-color: var(--yw-accent);
    box-shadow: 0 0 0 6px var(--yw-soft);
}
body[data-ui-page] :is(button, a, input, select):focus-visible {
    outline: 2px solid var(--yw-accent);
    outline-offset: 3px;
}
body[data-ui-page] :is(.report-library-search, .atlas-composer-entry):focus-within {
    border-color: var(--yw-accent);
    box-shadow: 0 0 0 4px var(--yw-soft), 0 10px 26px rgb(24 49 83 / 5%);
}
body[data-ui-page] :is(.report-library-search, .atlas-composer-entry) {
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Task status belongs next to actual progress, with no artificial percentage. */
body[data-ui-page] [data-ui-state] {
    position: relative;
    border: 1px solid var(--yw-line);
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(120deg, #fff, var(--yw-soft));
}
.yw-task-feedback { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 12px; color: var(--yw-ink); font-size: 13px; font-weight: 650; line-height: 1.5; }
.yw-orb { flex: 0 0 25px; width: 25px; height: 25px; position: relative; display: grid; place-items: center; border-radius: 50%; background: var(--yw-soft); color: var(--yw-accent); border: 1px solid var(--yw-line); }
.yw-orb::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
[data-ui-state="running"] .yw-orb { background: radial-gradient(circle at 30% 25%, #fff 3%, var(--yw-glint) 28%, var(--yw-accent) 72%); border: 0; box-shadow: 0 3px 10px rgb(23 104 239 / 18%); }
[data-ui-state="running"] .yw-orb::before { position: absolute; inset: 4px; width: auto; height: auto; background: none; border: 1px solid rgb(255 255 255 / 25%); border-top-color: white; border-right-color: white; animation: yw-orbit 2.8s linear infinite; }
[data-ui-state="success"] .yw-orb { color: #19714c; background: #edf9f2; border-color: #c5e7d3; }
[data-ui-state="success"] .yw-orb::before { content: '✓'; width: auto; height: auto; background: none; }
[data-ui-state="error"] .yw-orb { color: #b52e43; background: #fff0f1; border-color: #f4cbd1; }
[data-ui-state="error"] .yw-orb::before { content: '!'; width: auto; height: auto; background: none; }
body[data-ui-page] [data-ui-state="error"] { border-color: #e8aeb8; }
body[data-ui-page] [data-ui-state="success"] { border-color: #aaceb9; }
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    body[data-ui-page] [data-ui-state="running"]::after {
        content: ''; position: absolute; inset: -1px; padding: 1.5px; border-radius: inherit; pointer-events: none;
        background: conic-gradient(from var(--yw-beam-angle), transparent 60%, var(--yw-glint) 80%, var(--yw-accent) 94%, transparent);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: yw-beam 9s linear infinite;
    }
}
body[data-ui-page="assistant"] :is(.results-section, .progress-section) { border-radius: 18px; }
body[data-ui-page="assistant"] .progress-fill,
body[data-ui-page="qc"] .progress-fill { background: linear-gradient(90deg, var(--yw-accent), var(--yw-glint)); }
body[data-ui-page="qc"] :is(.drop, .live-file-label) { transition: border-color 180ms ease, box-shadow 180ms ease; }
body[data-ui-page="qc"] :is(.drop, .live-file-label):focus-within { outline: 2px solid var(--yw-accent); outline-offset: 3px; }
body[data-ui-page="qc"] .live-task-row:has(.live-status-chip.running) { background: var(--yw-soft); box-shadow: inset 3px 0 var(--yw-accent); }
body[data-ui-page="qc"] .live-task-row:has(.live-status-chip.error) { box-shadow: inset 3px 0 #bd354b; }
body[data-ui-page="qc"] .live-result-row { animation: yw-enter 220ms ease both; background: #f7fcf9; }
body[data-ui-page="qc"] .live-result-row .live-row-btn.primary { min-height: 38px; border-radius: 10px; }
body[data-ui-page="qc"] .live-save-all:not(:disabled) { border-color: var(--yw-accent); color: var(--yw-accent); background: var(--yw-soft); }

/* Library filtering uses the current category, query and real result count. */
.yw-filter-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; padding: 12px 15px; border: 1px solid var(--yw-line); border-radius: 12px; background: var(--yw-soft); font-size: 13px; color: var(--yw-ink); line-height: 1.6; }
.yw-filter-text { min-width: 0; overflow-wrap: anywhere; }
.yw-clear-search { flex-shrink: 0; min-height: 34px; padding: 5px 12px; color: var(--yw-accent); background: #fff; border: 1px solid var(--yw-line); border-radius: 8px; font: inherit; cursor: pointer; }
.yw-clear-search[hidden] { display: none; }
body[data-ui-page] .report-category-button { transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
body[data-ui-page] .report-category-button.is-active { border-color: var(--yw-accent); box-shadow: inset 3px 0 var(--yw-accent); background: var(--yw-soft); color: var(--yw-accent); }
body[data-ui-page="reports"] .report-list-card { border-radius: 18px; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; animation: yw-enter 200ms ease both; }
body[data-ui-page="selection"] .selection-table tbody tr { transition: background 180ms ease; }
body[data-ui-page="selection"] .selection-table tbody tr:focus-within { background: var(--yw-soft); }
body[data-ui-page="selection"] .selection-table-wrap { border-radius: 16px; }

/* Preserve the React app's own selected state; only enhance presentation. */
body[data-ui-page="opportunity"] :is(.research-start-option, .context-insight-preview-list article, .opportunity-cluster, .shortlist-item-card, .full-export-insight-card) { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
body[data-ui-page="opportunity"] :is(.product-chip.is-selected, .context-direction-card.is-selected, .context-category-card.is-active, .direction-research-select.is-selected, .context-switcher .is-active, .context-behaviour-picker .is-active, .product-test-options .is-selected, .full-export-insight-filters .is-active) { border-color: var(--yw-accent); box-shadow: 0 0 0 2px var(--yw-soft); }
body[data-ui-page="opportunity"] .opportunity-cluster.is-expanded { border-color: var(--yw-accent); box-shadow: 0 8px 28px rgb(24 49 83 / 6%); }
body[data-ui-page="opportunity"] .shortlist-item-card { border-left: 3px solid var(--yw-accent); }
body[data-ui-page="opportunity"] :is(.atlas-notice, .cluster-detail) { animation: yw-enter 220ms ease both; }
@media (hover: hover) and (pointer: fine) {
    body[data-ui-page="reports"] .report-list-card:hover,
    body[data-ui-page="opportunity"] :is(.research-start-option, .context-insight-preview-list article, .full-export-insight-card):hover { transform: translateY(-2px); border-color: var(--yw-accent); box-shadow: 0 12px 28px rgb(24 49 83 / 8%); }
    body[data-ui-page="selection"] .selection-table tbody tr:hover { background: var(--yw-soft); }
}
@media (max-width: 600px), (pointer: coarse) {
    body[data-ui-page] [data-ui-state="running"]::after, [data-ui-state="running"] .yw-orb::before { animation: none; }
    body[data-ui-page] [data-ui-state] { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-ui-page] *, body[data-ui-page] *::before, body[data-ui-page] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the sidebar decoration positioned inside its card on narrow screens. */
@media (max-width: 980px) {
    body[data-ui-page="qc"] .left { position: relative; top: auto; }
}