/**
 * Tradog dual-theme semantic tokens (light / dark).
 * Default document theme is dark when unset; pages set data-theme early.
 */

html,
html[data-theme="dark"] {
    --td-canvas: #0b0e11;
    --td-surface: #161b22;
    --td-surface-2: #1c2330;
    --td-panel: #222a38;
    --td-text: #e8eaed;
    --td-text-muted: #9aa3b2;
    --td-border: #2a3344;
    --td-input: #212938;
    --td-hover: #243041;
    --td-inverse: #e8eaed;
    --td-on-inverse: #0b0e11;
    --td-brand: #419942;
    --td-up: #22C55E;
    --td-down: #dc2626;
    --td-chart-grid: #2a3344;
    --td-accent-purple-bg: rgba(126, 34, 206, 0.28);
    --td-accent-purple-text: #e9d5ff;
    --td-accent-purple-border: #c084fc;
    --td-cash-topup-bg: #419942;
    --td-cash-topup-text: #ffffff;
    /* Lift above --td-surface-2 (#1c2330); page bg-gray-50 remaps to surface-2 */
    --td-market-header-bg: #222a38;
    --td-market-header-text: #e8eaed;
    --td-waterfall-bg: #0b1017;
    --td-waterfall-border: #253041;
    --td-waterfall-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    --td-waterfall-title: #f8fafc;
    --td-waterfall-muted: #64748b;
    --td-waterfall-operator: #f8fafc;
    --td-waterfall-tooltip-bg: #111827;
    --td-waterfall-tooltip-text: #e5e7eb;
    --td-waterfall-tooltip-border: #334155;
    --td-waterfall-warn: #fbbf24;
    color-scheme: dark;
}

html[data-theme="light"] {
    --td-canvas: #f3f4f6;
    --td-surface: #ffffff;
    --td-surface-2: #f9fafb;
    --td-panel: #f3f4f6;
    --td-text: #111827;
    --td-text-muted: #6b7280;
    --td-border: #e5e7eb;
    --td-input: #f3f4f6;
    --td-hover: #f3f4f6;
    --td-inverse: #111827;
    --td-on-inverse: #ffffff;
    --td-brand: #419942;
    --td-up: #22C55E;
    --td-down: #dc2626;
    --td-chart-grid: #e5e7eb;
    --td-accent-purple-bg: #f3e8ff;
    --td-accent-purple-text: #6b21a8;
    --td-accent-purple-border: #e9d5ff;
    --td-cash-topup-bg: #419942;
    --td-cash-topup-text: #ffffff;
    --td-market-header-bg: #f3f4f6;
    --td-market-header-text: #111827;
    --td-waterfall-bg: #ffffff;
    --td-waterfall-border: #e5e7eb;
    --td-waterfall-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    --td-waterfall-title: #111827;
    --td-waterfall-muted: #94a3b8;
    --td-waterfall-operator: #111827;
    --td-waterfall-tooltip-bg: #ffffff;
    --td-waterfall-tooltip-text: #111827;
    --td-waterfall-tooltip-border: #e5e7eb;
    --td-waterfall-warn: #b45309;
    color-scheme: light;
}

/* Semantic utilities */
.td-bg-canvas { background-color: var(--td-canvas) !important; }
.td-bg-surface { background-color: var(--td-surface) !important; }
.td-bg-surface-2 { background-color: var(--td-surface-2) !important; }
.td-bg-panel { background-color: var(--td-panel) !important; }
.td-bg-input { background-color: var(--td-input) !important; }
.td-bg-hover { background-color: var(--td-hover) !important; }
.td-bg-inverse { background-color: var(--td-inverse) !important; }
.td-text { color: var(--td-text) !important; }
.td-text-brand { color: var(--td-brand) !important; }
.td-bg-brand { background-color: var(--td-brand) !important; }
.td-text-up { color: var(--td-up) !important; }
.td-text-down { color: var(--td-down) !important; }
.td-bg-up { background-color: var(--td-up) !important; }
.td-bg-down { background-color: var(--td-down) !important; }
.text-green-400, .text-green-500, .text-green-600 { color: var(--td-up) !important; }
.text-red-400, .text-red-500, .text-red-600 { color: var(--td-down) !important; }
.bg-green-500, .bg-green-600 { background-color: var(--td-up) !important; }
.bg-red-600 { background-color: var(--td-down) !important; }
.td-brand-border-b { border-bottom-color: var(--td-brand) !important; }
.td-brand-border { border-color: var(--td-brand) !important; }
.hover\:td-text-brand:hover { color: var(--td-brand) !important; }
.td-strategy-hit { background-color: rgba(65, 153, 66, 0.22) !important; }
html[data-theme="light"] .td-strategy-hit { background-color: rgba(65, 153, 66, 0.12) !important; }
.td-text-muted { color: var(--td-text-muted) !important; }
.td-text-on-inverse { color: var(--td-on-inverse) !important; }
.td-border { border-color: var(--td-border) !important; }
.td-border-b { border-bottom-color: var(--td-border) !important; }
.td-border-t { border-top-color: var(--td-border) !important; }
.td-border-r { border-right-color: var(--td-border) !important; }
.td-fade-from-surface-left {
    background: linear-gradient(to right, var(--td-surface), transparent) !important;
}
.td-fade-from-surface-right {
    background: linear-gradient(to left, var(--td-surface), transparent) !important;
}

.td-hover:hover,
.hover\:td-bg-hover:hover {
    background-color: var(--td-hover) !important;
}

/* Purple action chips (diagnosis / citation badges) */
.td-chip-purple {
    background-color: var(--td-accent-purple-bg) !important;
    color: var(--td-accent-purple-text) !important;
    border-color: var(--td-accent-purple-border) !important;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    overflow: hidden;
}

/* Diagnosis entry CTA — brand fill, no border; size comes from each button */
.td-btn-diag {
    background-color: var(--td-brand) !important;
    color: #ffffff !important;
    border: none !important;
}
.td-btn-diag:active {
    filter: brightness(0.92);
}

/* Cash top-up CTA */
.td-cash-topup {
    background-color: var(--td-cash-topup-bg) !important;
    color: var(--td-cash-topup-text) !important;
    border: none !important;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 10px;
    padding: 0.35rem 0.55rem;
    line-height: 1.2;
    flex-shrink: 0;
}
.td-cash-topup:active {
    filter: brightness(0.92);
}

/* Portfolio market section header — theme-aware (never forever-black on light) */
.td-market-header {
    background-color: var(--td-market-header-bg) !important;
    color: var(--td-market-header-text) !important;
    border-top: 1px solid var(--td-border);
    border-bottom: 1px solid var(--td-border);
}

/* Theme preference segmented control */
.td-theme-segment {
    display: inline-flex;
    align-items: stretch;
    min-width: 8.5rem;
    height: auto;
    padding: 3px;
    border-radius: 0.75rem;
    border: 1px solid var(--td-border);
    background: var(--td-input);
    gap: 2px;
}
.td-theme-segment-option {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--td-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.td-theme-segment-option.is-selected,
.td-theme-segment-option[aria-checked="true"] {
    background: var(--td-brand) !important;
    color: #ffffff !important;
}
@media (hover: hover) and (pointer: fine) {
    .td-theme-segment-option:not(.is-selected):not([aria-checked="true"]):hover {
        background: var(--td-hover);
        color: var(--td-text);
    }
}

/* Diagnosis waterfall chart shell */
.td-waterfall-shell {
    background-color: var(--td-waterfall-bg) !important;
    border-color: var(--td-waterfall-border) !important;
    box-shadow: var(--td-waterfall-shadow) !important;
}

/* Map common Tailwind neutrals → semantic tokens */
.bg-white { background-color: var(--td-surface) !important; }
.bg-gray-50,
.bg-gray-50\/95,
.bg-gray-50\/50,
.bg-gray-50\/30 { background-color: var(--td-surface-2) !important; }
.bg-gray-100 { background-color: var(--td-input) !important; }
.bg-gray-200 { background-color: var(--td-surface-2) !important; }
.bg-gray-300 { background-color: var(--td-border) !important; }

.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.active\:bg-gray-50:active,
.active\:bg-gray-100:active,
.active\:bg-gray-200:active {
    background-color: var(--td-hover) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700 {
    color: var(--td-text) !important;
}
.hover\:text-gray-900:hover,
.hover\:text-gray-800:hover,
.hover\:text-gray-700:hover {
    color: var(--td-text) !important;
}
.text-gray-600,
.text-gray-500,
.text-gray-400,
.text-gray-300 {
    color: var(--td-text-muted) !important;
}
.hover\:text-gray-600:hover,
.hover\:text-gray-500:hover {
    color: var(--td-text-muted) !important;
}

.border-gray-50,
.border-gray-100,
.border-gray-200,
.border-gray-300 {
    border-color: var(--td-border) !important;
}

/* Inverse ONLY for high-contrast buttons/chips — never panel divs */
button.bg-gray-900,
a.bg-gray-900,
.td-chip-inverse {
    background-color: var(--td-inverse) !important;
    color: var(--td-on-inverse) !important;
}

/* Purple soft fills → accent chip tokens (fixes white-lavender on dark) */
.bg-purple-50,
.bg-purple-50\/40,
.bg-purple-100 {
    background-color: var(--td-accent-purple-bg) !important;
}
.text-purple-700,
.text-purple-600 {
    color: var(--td-accent-purple-text) !important;
}
.border-purple-200,
.border-purple-100,
.border-purple-400 {
    border-color: var(--td-accent-purple-border) !important;
}
.hover\:bg-purple-100:hover,
.hover\:bg-purple-200:hover {
    filter: brightness(1.08);
}

html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-red-50\/50 {
    background-color: rgba(127, 29, 29, 0.35) !important;
}
html[data-theme="dark"] .border-red-100 {
    border-color: rgba(248, 113, 113, 0.35) !important;
}
html[data-theme="dark"] .bg-amber-50 {
    background-color: rgba(120, 53, 15, 0.35) !important;
}
html[data-theme="dark"] .border-amber-200 {
    border-color: rgba(251, 191, 36, 0.35) !important;
}
html[data-theme="dark"] .text-amber-800 {
    color: #fbbf24 !important;
}
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-blue-50\/50 {
    background-color: rgba(30, 58, 138, 0.45) !important;
}
html[data-theme="dark"] .border-blue-100,
html[data-theme="dark"] .border-blue-200 {
    border-color: rgba(96, 165, 250, 0.45) !important;
}
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800 {
    color: #93c5fd !important;
}
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-indigo-50\/50 {
    background-color: rgba(49, 46, 129, 0.45) !important;
}
html[data-theme="dark"] .border-indigo-100 {
    border-color: rgba(165, 180, 252, 0.4) !important;
}
html[data-theme="dark"] .text-indigo-700 {
    color: #c7d2fe !important;
}
html[data-theme="dark"] .bg-orange-50 {
    background-color: rgba(124, 45, 18, 0.4) !important;
}
html[data-theme="dark"] .border-orange-100 {
    border-color: rgba(251, 146, 60, 0.4) !important;
}
html[data-theme="dark"] .text-orange-700 {
    color: #fdba74 !important;
}

/* Me-tab leaping-dog icon: alpha mask, color from currentColor */
.td-tab-dog {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.125rem;
    background-color: currentColor;
    -webkit-mask-image: url("../images/tradog_tab_dog_mask.png?m=shade");
    mask-image: url("../images/tradog_tab_dog_mask.png?m=shade");
    mask-mode: alpha;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Page shell safe-area (layout only; env values are 0 when unused) */
:root {
    --td-safe-top: env(safe-area-inset-top, 0px);
    --td-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.td-page-header {
    padding-top: max(var(--td-page-header-pad-top, 0.5rem), var(--td-safe-top));
}

.td-page-header-pad-y-2 {
    --td-page-header-pad-top: 0.5rem;
}

.td-page-header-pad-y-3 {
    --td-page-header-pad-top: 0.75rem;
}

.td-page-header-pad-y-4 {
    --td-page-header-pad-top: 1rem;
}

.td-page-tab-bar {
    box-sizing: border-box;
    height: auto;
    min-height: 68px;
    padding-bottom: max(0.5rem, var(--td-safe-bottom));
}

html[data-td-display="standalone"] .td-page-header {
    padding-top: max(var(--td-page-header-pad-top, 0.5rem), env(safe-area-inset-top, 0px), 59px);
}

html[data-td-display="standalone"] #ai-drawer > div {
    height: min(96%, calc(100% - max(env(safe-area-inset-top, 0px), 59px)));
}

html[data-td-display="standalone"] #article-reader-view {
    padding-top: max(env(safe-area-inset-top, 0px), 59px);
}

html[data-td-display="standalone"] .td-page-tab-bar {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px), 34px);
    min-height: calc(68px + max(0px, env(safe-area-inset-bottom, 0px), 34px) - 0.5rem);
}

.td-page-dock {
    box-sizing: border-box;
    padding-bottom: max(var(--td-page-dock-pad-bottom, 0.5rem), var(--td-safe-bottom));
}

html[data-td-display="standalone"] .td-page-dock {
    padding-bottom: max(var(--td-page-dock-pad-bottom, 0.5rem), env(safe-area-inset-bottom, 0px), 34px);
}

html[data-td-display="standalone"] .td-page-dock.min-h-20 {
    min-height: calc(5rem + max(0px, env(safe-area-inset-bottom, 0px), 34px) - var(--td-page-dock-pad-bottom, 0px));
}

html[data-td-display="standalone"] .h-dvh {
    height: 100lvh;
}

.td-page-dock-pad-y-2 {
    --td-page-dock-pad-bottom: 0.5rem;
}

.td-page-dock-pad-y-5 {
    --td-page-dock-pad-bottom: 1.25rem;
}

.td-page-scroll-avoid-tab {
    padding-bottom: max(6rem, calc(6rem + var(--td-safe-bottom)));
}

.td-page-scroll-avoid-dock {
    padding-bottom: max(5rem, calc(5rem + var(--td-safe-bottom)));
}

html,
body {
    touch-action: pan-y;
}

html:has(.h-dvh),
html:has(.h-dvh) body {
    overflow: hidden;
    overscroll-behavior: none;
}

* {
    touch-action: pan-y;
}

.overflow-y-auto {
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.overflow-x-auto,
.overflow-auto {
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
}

/* Me brand lockup: crop PNG to dog+candles; wordmark is HTML copy. */
.td-brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.td-brand-logo-art {
    object-fit: cover;
    object-position: top center;
    height: auto;
    aspect-ratio: 578 / 435;
    display: block;
    flex-shrink: 0;
    align-self: center;
}

.td-brand-name {
    margin: 20px 0 0;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--td-brand);
}

.td-brand-slogan {
    margin: 16px 0 0;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.32em;
    color: var(--td-brand);
}

html[lang="en"] .td-brand-name {
    letter-spacing: 0.08em;
}

html[lang="en"] .td-brand-slogan {
    letter-spacing: 0.1em;
}

.td-brand-lockup-compact .td-brand-name {
    margin-top: 16px;
    font-size: 28px;
    line-height: 32px;
}

.td-brand-lockup-compact .td-brand-slogan {
    margin-top: 12px;
    font-size: 13px;
    line-height: 18px;
}