/*
    Live Prices, the panchangam, channels and media, on the website.

    Carries the app's design language across rather than inventing a second
    one: the gradient accent rail beside every heading, the letter-spaced
    kicker, hairline rules instead of boxes, and one colour per subject taken
    from the same palette the app's section pillars use.

    Written against custom properties and no theme classes, so it looks the
    same whatever NewSpare does to its own styles, and follows the reader's
    light or dark preference without needing to be told which is on.
*/

.roja-panel,
.roja-grid {
    --roja-accent: #c42323;
    --roja-ink: #16181c;
    --roja-dim: #5c6470;
    --roja-line: rgba(0, 0, 0, .10);
    --roja-surface: rgba(0, 0, 0, .028);
    --roja-up: #12805c;
    --roja-down: #c62828;
}

@media (prefers-color-scheme: dark) {
    .roja-panel,
    .roja-grid {
        --roja-ink: #f2f4f7;
        --roja-dim: #9aa3b0;
        --roja-line: rgba(255, 255, 255, .13);
        --roja-surface: rgba(255, 255, 255, .045);
        --roja-up: #4cc79b;
        --roja-down: #ef6a6a;
    }
}

/*
    NewSpare ships an explicit dark toggle as well as following the system,
    so honour the class it sets - otherwise a reader who has chosen dark on a
    light system gets black text on a black page.
*/
body.dark-mode .roja-panel,
body.dark-mode .roja-grid,
[data-theme="dark"] .roja-panel,
[data-theme="dark"] .roja-grid {
    --roja-ink: #f2f4f7;
    --roja-dim: #9aa3b0;
    --roja-line: rgba(255, 255, 255, .13);
    --roja-surface: rgba(255, 255, 255, .045);
    --roja-up: #4cc79b;
    --roja-down: #ef6a6a;
}

.roja-panel {
    background: var(--roja-surface);
    border: 1px solid var(--roja-line);
    border-radius: 10px;
    padding: 14px 16px 8px;
    margin: 0 0 18px;
    color: var(--roja-ink);
    font-size: 15px;
    line-height: 1.4;
}

/* --------------------------------------------------------------- heading */

.roja-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--roja-line);
}

.roja-rail {
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(to bottom,
        var(--roja-accent),
        color-mix(in srgb, var(--roja-accent) 15%, transparent));
    flex: 0 0 auto;
}

/* color-mix is recent; this is what older browsers get. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .roja-rail { background: var(--roja-accent); }
}

.roja-title {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.roja-stamp {
    margin-left: auto;
    font-size: 11px;
    color: var(--roja-dim);
}

.roja-note {
    margin: 10px 0 12px;
    font-size: 13px;
    color: var(--roja-dim);
}

/* ----------------------------------------------------------------- rates */

.roja-rates {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 15px;
}

.roja-rates th,
.roja-rates td {
    border: 0;
    border-bottom: 1px solid var(--roja-line);
    padding: 9px 0;
    text-align: left;
    vertical-align: baseline;
    background: none;
}

.roja-rates tr:last-child th,
.roja-rates tr:last-child td {
    border-bottom: 0;
}

.roja-rates th {
    font-weight: 600;
    color: var(--roja-ink);
}

.roja-unit {
    color: var(--roja-dim);
    font-size: 12px;
    white-space: nowrap;
    padding-left: 8px !important;
}

.roja-price {
    text-align: right !important;
    white-space: nowrap;
    font-weight: 700;
    /* Tabular figures, so a column of prices lines up on the decimal. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.roja-rupee {
    color: var(--roja-dim);
    font-weight: 500;
    margin-right: 1px;
}

.roja-change {
    text-align: right !important;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    padding-left: 10px !important;
    font-variant-numeric: tabular-nums;
}

.roja-up { color: var(--roja-up); }
.roja-down { color: var(--roja-down); }

/* ------------------------------------------------------------------ grid */

.roja-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    align-items: start;
}

.roja-grid .roja-panel { margin: 0; }

/* ------------------------------------------------------------ panchangam */

.roja-elements {
    display: grid;
    gap: 10px;
    padding: 12px 0;
}

.roja-element {
    display: grid;
    grid-template-columns: 3px 1fr;
    gap: 10px;
    align-items: center;
}

.roja-element::before {
    content: "";
    display: block;
    width: 3px;
    height: 100%;
    min-height: 34px;
    border-radius: 2px;
    background: var(--roja-accent);
}

.roja-element-label {
    grid-column: 2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--roja-accent);
}

.roja-element-name {
    grid-column: 2;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.roja-element-till {
    grid-column: 2;
    font-size: 11px;
    color: var(--roja-dim);
}

/* -------------------------------------------------------------- channels */

.roja-channels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 14px 12px;
    padding: 14px 0 16px;
}

.roja-channel {
    text-decoration: none;
    color: inherit;
    display: block;
}

.roja-channel-art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    background: var(--roja-surface);
    border: 1px solid var(--roja-line);
}

.roja-channel-art img,
.roja-media-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
    The dot that says a channel is live. It breathes, the way a broadcast
    indicator does - and stops for anyone who has asked their system to stop
    animating things.
*/
.roja-live-dot {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, .7);
    animation: roja-pulse 2s infinite;
}

@keyframes roja-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, .7); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .roja-live-dot { animation: none; }
}

.roja-channel-name {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.25;
}

/* ----------------------------------------------------------------- media */

.roja-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px 14px;
    padding: 14px 0 16px;
}

.roja-media-item {
    text-decoration: none;
    color: inherit;
    display: block;
}

.roja-media-art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--roja-surface);
    border: 1px solid var(--roja-line);
}

.roja-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
}

.roja-play::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0;
    height: 0;
    /* A triangle, nudged right so it looks centred rather than measuring so. */
    border-left: 11px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    transform: translateX(2px);
}

.roja-media-title {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* ----------------------------------------------------------------- small */

@media (max-width: 480px) {
    .roja-panel { padding: 12px 13px 6px; }
    .roja-rates { font-size: 14px; }
    .roja-channels { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ---------------------------------------------------------------- ticker */

/*
    One line of headline numbers, for the top of a page. Scrolls sideways on
    a narrow screen rather than wrapping to four lines and shoving the news
    below the fold - a strip that becomes a block is not a strip.
*/
.roja-ticker {
    --roja-accent: #c42323;
    --roja-ink: #16181c;
    --roja-dim: #5c6470;
    --roja-line: rgba(0, 0, 0, .10);
    --roja-surface: rgba(0, 0, 0, .028);
    --roja-up: #12805c;
    --roja-down: #c62828;

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 0 0 18px;
    border: 1px solid var(--roja-line);
    border-radius: 8px;
    background: var(--roja-surface);
    color: var(--roja-ink);
    font-size: 14px;
}

@media (prefers-color-scheme: dark) {
    .roja-ticker {
        --roja-ink: #f2f4f7;
        --roja-dim: #9aa3b0;
        --roja-line: rgba(255, 255, 255, .13);
        --roja-surface: rgba(255, 255, 255, .045);
        --roja-up: #4cc79b;
        --roja-down: #ef6a6a;
    }
}

body.dark-mode .roja-ticker,
[data-theme="dark"] .roja-ticker {
    --roja-ink: #f2f4f7;
    --roja-dim: #9aa3b0;
    --roja-line: rgba(255, 255, 255, .13);
    --roja-surface: rgba(255, 255, 255, .045);
    --roja-up: #4cc79b;
    --roja-down: #ef6a6a;
}

.roja-ticker-label {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    background: #c42323;
    padding: 3px 7px;
    border-radius: 3px;
}

.roja-ticker-rail {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.roja-ticker-rail::-webkit-scrollbar { display: none; }

.roja-tick {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    border-left: 2px solid var(--roja-accent);
    padding-left: 8px;
}

.roja-tick-name { font-weight: 600; }

.roja-tick-price {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.roja-tick-unit,
.roja-ticker-more { color: var(--roja-dim); font-size: 12px; }

.roja-tick-change { font-size: 11px; font-weight: 700; }

.roja-ticker-more {
    flex: 0 0 auto;
    margin-left: auto;
    text-decoration: none;
    font-weight: 700;
}

/* ---------------------------------------------------------------- player */

/*
    A player that has replaced a tile's artwork, and one rendered on a
    channel's own page. Both sit in a 16:9 box that fills its container, so
    the grid does not jump when a tile starts playing.
*/
.roja-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    margin: 0 0 18px;
}

.roja-player iframe,
.roja-player video,
.roja-channel-art iframe,
.roja-channel-art video,
.roja-media-art iframe,
.roja-media-art video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

/*
    A playing tile is taller than a still one - a 16:10 thumbnail cropping a
    16:9 stream would letterbox it - so the box changes shape rather than the
    picture being squeezed.
*/
.roja-channel-art.roja-playing {
    aspect-ratio: 16 / 9;
}

.roja-player-note {
    margin: 0;
    padding: 14px;
    font-size: 13px;
    color: var(--roja-dim, #5c6470);
    background: var(--roja-surface, rgba(0, 0, 0, .04));
    text-align: center;
}

.roja-player-note a { color: inherit; }

/*
    The cursor says the tile does something. Without this a tile that plays in
    place looks identical to one that navigates.
*/
[data-roja-play] { cursor: pointer; }

/*
    A channel's or a video's own page.

    NewSpare prints the featured image at whatever size it likes, which for a
    channel logo on a transparent square means a 700-pixel circle above the
    fold and the player pushed off the bottom of the screen. The logo is a
    label, not the content - the player is the content - so it is capped and
    the player goes first.
*/
.single-live-videos .wp-block-post-featured-image,
.single-videos .wp-block-post-featured-image,
.single-audio .wp-block-post-featured-image,
.postid-live-videos .wp-block-post-featured-image {
    max-width: 160px;
    margin: 0 0 16px;
}

.single-live-videos .wp-block-post-featured-image img,
.single-videos .wp-block-post-featured-image img,
.single-audio .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
}

.roja-audio {
    margin: 0 0 18px;
}

.roja-audio audio {
    width: 100%;
    display: block;
}

/* An audio tile plays in the strip where a video would show a picture. */
.roja-media-art audio {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
}

/* ------------------------------------------------------- read next / index */

.roja-more-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 4px 20px;
    padding: 6px 0 10px;
}

.roja-more-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--roja-line);
    text-decoration: none;
    color: inherit;
}

.roja-more-art {
    flex: 0 0 72px;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--roja-surface);
}

.roja-more-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.roja-more-text { display: block; }

.roja-more-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.roja-more-date {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--roja-dim);
}

.roja-more-all {
    margin: -6px 0 22px;
    font-size: 14px;
    font-weight: 700;
}

.roja-more-all a {
    color: var(--roja-accent, #c42323);
    text-decoration: none;
}

/*
    The index. Deliberately dense - it is a directory, not a feature list, and
    a reader scanning for "Cricket" wants to find it without scrolling.
*/
.roja-index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0 16px;
}

.roja-index-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--roja-line);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.roja-index-item:hover {
    border-color: var(--roja-accent);
}

.roja-index-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--roja-dim);
    font-variant-numeric: tabular-nums;
}