/*
 * Everything the rail's list says when it isn't rows - watchlist_rail_rows.html,
 * watchlist_rail_ghosts.html and watchlist_rail_rows.js have the markup and
 * the why:
 *   - reading along: the stock the page is about, offered at the top of a
 *     list that doesn't hold it, wearing the same lime dot as a row you're
 *     viewing (watchlist_rail.css .rail-row-viewing); the star wearing words
 *     outside the rows (watchlist_rail_star.html);
 *   - an empty list: Favorites' first-visit invitation with one-tap starters;
 *   - waiting: ghost rows before the first answer, a dimmed list after;
 *   - failing: what happened, and a way to try again.
 * Their moves live with every other rail move, in watchlist_rail_motion.css.
 * Text clears WCAG AA (4.5:1) on the rail: slate-300/400, never slate-500.
 */

/* ---- the reading card ------------------------------------------------------ */
.rail-reading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.55rem 0.6rem 0.4rem;
    padding: 0.35rem 0.35rem 0.35rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
.rail-reading-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.rail-reading-eyebrow,
.rail-empty-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}
.rail-reading-symbol,
.rail-starters [data-rail-star] span {
    font: 700 0.875rem/1.2 "JetBrains Mono", ui-monospace, monospace; /* a ticker reads as one everywhere */
}
.rail-reading-symbol {
    /* The card's identity: whole, always - up to 10 characters (any stock,
       ETF or crypto pair; a longer FX/futures oddity ends in "..."). The cap
       sits half a character past that: a cap equal to the text's own width
       can round 1/64px short and draw the ellipsis anyway. The "Reading"
       eyebrow gives way first - at the narrowest rail, a long ticker leaves
       it little more than its own "...". */
    flex: none;
    max-width: 10.5ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f8fafc;
}
.rail-reading-eyebrow {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rail-starters [data-rail-star] span {
    font-size: 0.75rem;
}
.rail-reading-follow {
    flex: none;
    margin-left: auto;
}

/* ---- the star, in words ------------------------------------------------------ */
.rail-star-text[data-rail-star] {
    gap: 0.3rem;
    min-height: 1.75rem;
    padding: 0 0.7rem 0 0.55rem;
    border: 1px solid #334155;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}
/* Not yet followed: readable ink, the accent on approach. (The row star's
   slate-600 is an icon's colour - too faint to carry words.) */
.rail-star-text[hx-post] {
    color: #cbd5e1;
}
.rail-star-text[hx-post]:hover,
.rail-star-text[hx-post]:focus-visible {
    color: var(--color-accent);
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.rail-star-text[hx-delete] {
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* ---- an empty list ------------------------------------------------------------ */
.rail-empty {
    padding: 1.25rem 1rem 1.1rem;
}
.rail-empty-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: #f1f5f9;
    text-wrap: balance; /* no lone "read" on a line of its own */
}
.rail-empty-copy {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #94a3b8;
}
.rail-empty-label {
    margin-top: 1.1rem;
}
.rail-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}
.rail-empty-hint {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ---- waiting ------------------------------------------------------------------ */
/* Ghost rows in a real row's box: the star's column, then the two lines. */
.rail-ghost {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    align-items: center;
    gap: 0.6rem 0.5rem;
    min-height: 4.625rem; /* a real row's 74px: the list lands without a jump */
    padding: 0.55rem 0.75rem 0.55rem calc(0.55rem + 1.25rem + 0.3rem);
    border-bottom: 1px solid var(--color-border);
}
.rail-ghost span {
    height: 0.75rem;
    border-radius: 0.3rem;
    background: linear-gradient(90deg, #172030 25%, #222e42 50%, #172030 75%);
    background-size: 200% 100%;
}
.rail-ghost span:nth-child(1) { width: 6.25rem; height: 1.1rem; }                    /* symbol + score */
.rail-ghost span:nth-child(2) { width: 3.75rem; height: 1rem; justify-self: end; }   /* price */
.rail-ghost span:nth-child(3) { width: 7.5rem; height: 1.05rem; border-radius: 999px; } /* the label's pill */
.rail-ghost span:nth-child(4) { width: 2.75rem; justify-self: end; }                 /* the day's change */

/* Every list fetch sets aria-busy (watchlist_rail_rows.js) - htmx.ajax's
   too, which are issued from document.body, where style.css's
   .hx-swap-fade.htmx-request dim never reaches the list: tab switches
   used to leave the old list looking current. The list dims, the shared
   ring turns. Ghost rows are a signal of their own: no dim, no ring. */
#watchlist-rail-content[aria-busy="true"] {
    opacity: 0.4;
    pointer-events: none;
}
#watchlist-rail-content[aria-busy="true"]::after {
    opacity: 1;
    animation: hx-swap-fade-spin 0.8s linear infinite;
}
#watchlist-rail-content:has(.rail-ghosts) {
    opacity: 1;
}
#watchlist-rail-content:has(.rail-ghosts)::after {
    display: none;
}

/* ---- failing ------------------------------------------------------------------ */
.rail-retry {
    margin-top: 0.9rem;
    min-height: 2rem;
    padding: 0 0.95rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
}
.rail-retry:hover,
.rail-retry:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}