/**
 * Market Data — unified design system (v2.0.0).
 *
 * Replaces the three older stylesheets (market-ticker.css, market-grid.css,
 * market-widgets.css) with a single sheet that matches the Claude-design
 * handoff for tikshoret.news.
 *
 * Scope: every class is prefixed `tkm-` (TikShoret Market) to avoid
 * stomping on theme styles. The design tokens are scoped to `.tkm-scope`
 * so this stylesheet doesn't redefine global CSS variables — themes that
 * use `--text`, `--surface`, `--red`, etc. for their own components stay
 * untouched.
 *
 * Theme: dark mode activates when EITHER `html.dark` (design-handoff
 * convention) OR `body.dark-mode` (the v1.x convention this plugin
 * shipped with) is present on the document. Both work.
 *
 * @since 2.0.0
 */

/* =============================================================================
 *  Design tokens — scoped to .tkm-scope to keep them off :root
 * ========================================================================== */
.tkm-scope {
    /* surfaces */
    --tkm-bg:           #ffffff;
    --tkm-surface:      #ffffff;
    --tkm-surface-2:    #f5f6f8;
    --tkm-surface-3:    #eceef1;
    --tkm-line:         #e4e6ea;
    --tkm-line-strong:  #d2d5db;

    /* ink */
    --tkm-text:         #14171c;
    --tkm-text-2:       #5a626c;
    --tkm-text-3:       #8b929b;

    /* brand */
    --tkm-red:          #db1f2b;
    --tkm-red-deep:     #b8161f;
    --tkm-navy:         #0a1730;

    /* finance */
    --tkm-up:           #0f9d58;
    --tkm-up-bg:        rgba(15, 157, 88, 0.10);
    --tkm-down:         #e0322f;
    --tkm-down-bg:      rgba(224, 50, 47, 0.10);

    --tkm-shadow-sm:    0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
    --tkm-shadow-md:    0 6px 24px rgba(16, 24, 40, 0.08);
}
/* Dark theme — accept either convention. */
html.dark .tkm-scope,
body.dark-mode .tkm-scope {
    --tkm-bg:           #0c0f14;
    --tkm-surface:      #14181f;
    --tkm-surface-2:    #1a1f28;
    --tkm-surface-3:    #222834;
    --tkm-line:         #2a313c;
    --tkm-line-strong:  #38414e;

    --tkm-text:         #f1f3f6;
    --tkm-text-2:       #a6aeb9;
    --tkm-text-3:       #717a86;

    --tkm-red:          #f23b46;
    --tkm-red-deep:     #d8222d;
    --tkm-navy:         #05080f;

    --tkm-up:           #2bbf78;
    --tkm-up-bg:        rgba(43, 191, 120, 0.14);
    --tkm-down:         #ff5a52;
    --tkm-down-bg:      rgba(255, 90, 82, 0.14);

    --tkm-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
    --tkm-shadow-md:    0 8px 30px rgba(0, 0, 0, 0.5);
}

/* =============================================================================
 *  Root container — root for every shortcode this plugin renders.
 * ========================================================================== */
.tkm-scope {
    direction: rtl;
    color: var(--tkm-text);
    font-family: "Assistant", "Heebo", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background .25s ease, color .25s ease;
}
.tkm-scope * { box-sizing: border-box; }
.tkm-scope h2, .tkm-scope h3, .tkm-scope h4 {
    font-family: "Frank Ruhl Libre", "Assistant", serif;
    margin: 0;
    color: var(--tkm-text);
    line-height: 1.18;
    letter-spacing: -0.01em;
}
.tkm-scope a { color: inherit; text-decoration: none; }
.tkm-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* =============================================================================
 *  Section header — red square + serif title + chevron
 *  Matches `.sec-head` in the design handoff.
 * ========================================================================== */
.tkm-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 22px;
}
.tkm-sec-head__title { display: flex; align-items: center; gap: 12px; }
.tkm-sec-head__square {
    width: 9px;
    height: 26px;
    background: var(--tkm-red);
    border-radius: 1px;
    flex-shrink: 0;
}
.tkm-sec-head__title h3 { font-size: 27px; font-weight: 900; }
.tkm-sec-head__more {
    color: var(--tkm-text-3);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -2px;
    cursor: pointer;
}
.tkm-sec-head__more:hover { color: var(--tkm-text); }

/* =============================================================================
 *  Market meta row — live pulse + status text + index value
 * ========================================================================== */
.tkm-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--tkm-text-3);
    font-size: 13px;
    font-weight: 600;
    flex-wrap: wrap;
}
.tkm-meta__live { display: inline-flex; align-items: center; gap: 6px; }
.tkm-meta__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tkm-up);
    box-shadow: 0 0 0 0 var(--tkm-up);
    animation: tkm-pulse 2s infinite;
}
@keyframes tkm-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(15, 157, 88, 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(15, 157, 88, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 157, 88, 0); }
}
.tkm-meta__index-value { font-variant-numeric: tabular-nums; }
.tkm-meta__index-value--up   { color: var(--tkm-up); }
.tkm-meta__index-value--down { color: var(--tkm-down); }
.tkm-meta__index-value--flat { color: var(--tkm-text-3); }

/* =============================================================================
 *  Section grid — 5-card layout for the homepage section
 *  Matches `.stkC` in the design handoff.
 * ========================================================================== */
.tkm-section-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 22px;
}
.tkm-section-disclaimer {
    color: var(--tkm-text-3);
    font-size: 12px;
    font-weight: 600;
    margin: 16px 2px 0;
}

/* =============================================================================
 *  Card — the unit shared by section + slider
 *  Matches `.scard` in the design handoff.
 * ========================================================================== */
.tkm-card {
    border: 1px solid var(--tkm-line);
    border-radius: 8px;
    padding: 16px;
    background: var(--tkm-surface);
    position: relative;
    overflow: hidden;
    transition: background .25s ease, border-color .25s ease;
}
.tkm-card__accent {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tkm-text-3);
}
.tkm-card--up   .tkm-card__accent { background: var(--tkm-up); }
.tkm-card--down .tkm-card__accent { background: var(--tkm-down); }
.tkm-card--flat .tkm-card__accent { background: var(--tkm-text-3); }

.tkm-card__name {
    font-family: "Frank Ruhl Libre", serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--tkm-text);
}
.tkm-card__tick {
    font-size: 10.5px;
    color: var(--tkm-text-3);
    font-weight: 700;
    letter-spacing: .03em;
    margin-top: 1px;
    direction: ltr;
    unicode-bidi: isolate;
}
.tkm-card__price {
    font-size: 21px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-top: 10px;
    color: var(--tkm-text);
    direction: ltr;
    unicode-bidi: isolate;
}
.tkm-card__sparkwrap {
    height: 38px;
    margin: 10px -2px;
}
.tkm-card__sparkwrap svg.tkm-spark {
    display: block;
    width: 100%;
    height: 100%;
}
.tkm-card__sparkwrap .tkm-spark--up   { color: var(--tkm-up); }
.tkm-card__sparkwrap .tkm-spark--down { color: var(--tkm-down); }
.tkm-card__sparkwrap .tkm-spark--flat { color: var(--tkm-text-3); }

.tkm-card__chg {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    direction: ltr;
    unicode-bidi: isolate;
}
.tkm-card__chg--up   { color: var(--tkm-up); }
.tkm-card__chg--down { color: var(--tkm-down); }
.tkm-card__chg--flat { color: var(--tkm-text-3); }
.tkm-card__chg-tri { font-size: 0.8em; }

.tkm-card__range { margin-top: 8px; }
.tkm-card__range-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--tkm-surface-3);
    position: relative;
}
.tkm-card__range-dot {
    position: absolute;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tkm-text);
    transform: translateX(50%);
}
.tkm-card__range-lbl {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--tkm-text-3);
    font-weight: 700;
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

/* =============================================================================
 *  Slider — category page horizontal scroll
 *  Matches `.grp` + `.slider.bare` in the design handoff.
 * ========================================================================== */
.tkm-slider-block { margin-top: 18px; }
.tkm-slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
    gap: 12px;
    flex-wrap: wrap;
}
.tkm-slider-nav { display: flex; gap: 8px; }
.tkm-slider-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--tkm-line-strong);
    background: var(--tkm-surface);
    color: var(--tkm-text-2);
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    display: grid;
    place-items: center;
    transition: .15s;
    line-height: 1;
    font-family: inherit;
}
.tkm-slider-btn:hover {
    background: var(--tkm-surface-2);
    color: var(--tkm-text);
    border-color: var(--tkm-text-3);
}
.tkm-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-bottom: 0;
    /* Hide the native scrollbar — controlled by nav buttons. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tkm-slider::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tkm-slider .tkm-card {
    min-width: 212px;
    flex: 0 0 212px;
    scroll-snap-align: start;
}

/* =============================================================================
 *  Compact widgets — TIX + forex sidebars
 *  Inherit the design tokens but keep their distinct vertical layout
 *  from the v1.x widgets.
 * ========================================================================== */
.tkm-widget {
    background: var(--tkm-surface);
    color: var(--tkm-text);
    border: 1px solid var(--tkm-line);
    border-radius: 8px;
    padding: 16px;
    font-family: "Assistant", "Heebo", system-ui, sans-serif;
    box-sizing: border-box;
}
.tkm-widget__label {
    font-size: 12px;
    color: var(--tkm-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    font-weight: 700;
}
.tkm-widget__label small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-inline-start: 4px;
}

/* TIX variant */
.tkm-widget--tix .tkm-widget__value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    color: var(--tkm-text);
}
.tkm-widget--tix .tkm-widget__change {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tkm-widget__change--up   { color: var(--tkm-up); }
.tkm-widget__change--down { color: var(--tkm-down); }
.tkm-widget__change--flat { color: var(--tkm-text-3); }
.tkm-widget__meta {
    margin-top: 8px;
    font-size: 11px;
    color: var(--tkm-text-3);
}
.tkm-widget__meta--warning { color: #D9881A; }

/* Forex variant */
.tkm-widget--forex .tkm-widget__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tkm-widget__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--tkm-line);
}
.tkm-widget__row:last-child { border-bottom: 0; }
.tkm-widget__row-name {
    flex: 1;
    font-weight: 700;
    font-size: 14px;
    color: var(--tkm-text);
}
.tkm-widget__row-price {
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--tkm-text);
}
.tkm-widget--forex .tkm-widget__change {
    font-size: 13px;
    font-weight: 700;
    min-width: 60px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.tkm-widget__empty {
    padding: 12px 0;
    color: var(--tkm-text-3);
    font-size: 13px;
    text-align: center;
}

/* =============================================================================
 *  Status / loading states
 * ========================================================================== */
.tkm-loading {
    color: var(--tkm-text-3);
    font-size: 13px;
    padding: 12px 4px;
}

/* =============================================================================
 *  Responsive — break to 2 columns at 1080px, single at small mobile.
 *  The slider stays horizontal at all sizes — that's its purpose.
 * ========================================================================== */
@media (max-width: 1080px) {
    .tkm-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .tkm-section-grid {
        grid-template-columns: 1fr;
    }
    .tkm-sec-head__title h3 { font-size: 22px; }
}