/* Stock Quote Shortcode — DI-624
   Live single-stock quote card embedded in an article body by [stock_quote ticker="..."].
   RTL-native (logical properties only). Tokens first, hex only as fallback. */

.sqs-card {
    margin-block: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-inline-start: 4px solid var(--teal, #0d9488);
    border-radius: 10px;
    background: var(--surface-1, #f8fafc);
}

.sqs-card--up {
    border-inline-start-color: var(--success, #16a34a);
}

.sqs-card--down {
    border-inline-start-color: var(--danger, #dc2626);
}

.sqs-card--nodata {
    border-inline-start-color: var(--ink-soft, #94a3b8);
}

.sqs-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.6rem;
}

.sqs-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy, #152d50);
    text-decoration: none;
}

.sqs-name:hover,
.sqs-name:focus-visible {
    color: var(--teal-dark, #0f766e);
    text-decoration: underline;
}

.sqs-ticker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--surface-2, #f1f5f9);
    color: var(--ink-soft, #64748b);
}

.sqs-priceline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-end: 0.5rem;
}

.sqs-price {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink, #1e293b);
    font-variant-numeric: tabular-nums;
}

.sqs-cur {
    font-size: 0.85rem;
    color: var(--ink-soft, #64748b);
}

.sqs-change {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    /* direction:ltr keeps the sign attached to the number inside an RTL paragraph */
    direction: ltr;
    unicode-bidi: isolate;
}

.sqs-up {
    color: var(--success-dark, #15803d);
    background: var(--success-light, #f0fdf4);
}

.sqs-down {
    color: var(--danger-dark, #b91c1c);
    background: var(--danger-light, #fef2f2);
}

.sqs-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--ink-soft, #64748b);
    margin-block-end: 0.5rem;
}

.sqs-range-val {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
    color: var(--ink, #1e293b);
}

.sqs-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block-start: 0.6rem;
    border-block-start: 1px solid var(--border-color, #e2e8f0);
    font-size: 0.75rem;
}

.sqs-asof {
    color: var(--ink-soft, #64748b);
}

.sqs-more {
    color: var(--teal-dark, #0f766e);
    font-weight: 700;
    text-decoration: none;
    /* 44px touch target (Rule 42) without inflating the visual box */
    padding-block: 0.6rem;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.sqs-more:hover,
.sqs-more:focus-visible {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .sqs-card {
        padding: 0.85rem 1rem;
    }

    .sqs-price {
        font-size: 1.35rem;
    }

    .sqs-meta {
        justify-content: flex-start;
    }
}