/* ---------------------------------------------------------------------------
   Public accuracy scorecard.

   The page has one job — tell a sceptical reader whether to believe anything
   else on this site — so the design spends everything on one idea and keeps the
   rest quiet.

   That idea is the TAPE: every call as a mark on a centre line, hits above,
   misses below, height showing how much the move was worth. Traders already
   read tapes; this is the site's own record drawn in the instrument its readers
   use. It replaces four tiles of statistics as the first thing on the page,
   because a tile of "Expectancy −0.19%" teaches nothing to someone who does not
   already know the word, and the shape of a run of wins against one large loss
   teaches it immediately.

   Colour carries exactly one meaning here — the outcome of a call. Green is a
   hit, red is a miss, slate is a call that claimed nothing. The site's purple
   is used for structure and links only, and never for a result, so that nothing
   on this page can be mistaken for a verdict that isn't one.
--------------------------------------------------------------------------- */

:root {
    --sk-hit: #16d195;
    --sk-miss: #ff5d6c;
    --sk-flat: #6b7191;
    --sk-aside: #454b66;
    --sk-line: rgba(255, 255, 255, 0.13);
}

/* How to read the tape, said once, before the first one appears. */
.hero-read {
    max-width: 62ch;
    margin: 14px auto 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--faint, #5a5f72);
}

/* --- the filters ---------------------------------------------------------
   Period, index and engine sit here because each of them asks the server for a
   different but still complete record. The filters that only hide rows of the
   log live down in the log, where what they act on is obvious. */
.sk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto 20px;
}
.sk-f {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint, #5a5f72);
}
.sk-f select,
.sk-logf select {
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(22, 24, 40, 0.7);
    color: var(--ink, #e8eaf2);
    font-family: inherit;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}
.sk-reset {
    margin-left: auto;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: transparent;
    color: var(--muted, #8a8fa3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.sk-reset:hover {
    color: var(--ink, #e8eaf2);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Labels that the layout carries visually but a screen reader still needs. */
.sk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sk-card {
    max-width: 980px;
    margin: 0 auto 22px;
    padding: 26px 28px 22px;
    border-radius: 20px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(22, 24, 40, 0.6);
}
.sk-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.sk-card-head h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--faint, #7a8097);
}
.sk-what {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted, #8a8fa3);
    max-width: 62ch;
}
.sk-live {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #8b5cf6;
    text-decoration: none;
    white-space: nowrap;
}
.sk-live:hover { text-decoration: underline; }

/* --- the verdict: the answer, in words, in the biggest type on the page --- */
.sk-verdict {
    margin: 22px 0 0;
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink, #e8eaf2);
}
.sk-verdict b {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.sk-verdict.is-up b { color: var(--sk-hit); }
.sk-verdict.is-down b { color: var(--sk-miss); }
.sk-verdict-thin,
.sk-verdict-none { color: #c7cbdb; }
.sk-verdict-sub {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted, #8a8fa3);
    max-width: 64ch;
}
.sk-verdict-sub b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* The sample is filling up rather than simply being too small. */
.sk-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    max-width: 380px;
}
.sk-progress-track {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.sk-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #6d5cf5, #8b5cf6);
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sk-progress-n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--faint, #5a5f72);
    font-variant-numeric: tabular-nums;
}

/* --- the tape ------------------------------------------------------------ */
.sk-tape-wrap { margin: 26px 0 0; }
.sk-tape {
    position: relative;
    display: flex;
    align-items: center;
    /* Centred, not left-packed: a young record is a handful of marks, and
       stranded against the left edge of a wide rail they read as a chart that
       failed to load rather than as six calls. */
    justify-content: center;
    gap: 3px;
    height: 108px;
    padding: 0 2px;
    /* A long run of marks must never escape the card it lives in: the marks
       shrink to fit, and this is the guard that holds when they can't. */
    overflow: hidden;
}
/* The centre line is the zero: above it the call made money, below it lost. */
.sk-tape::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--sk-line);
}
.sk-mk {
    position: relative;
    flex: 1 1 6px;
    min-width: 4px;
    /* Wide enough that a lone call is a mark rather than a speck, narrow
       enough that eighty of them still fit the rail. */
    max-width: 22px;
    align-self: stretch;
    cursor: default;
}
.sk-mk i {
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 2px;
    display: block;
    transform-origin: center bottom;
    animation: sk-grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sk-mk.is-hit i {
    bottom: 50%;
    background: var(--sk-hit);
    box-shadow: 0 0 12px rgba(22, 209, 149, 0.28);
}
.sk-mk.is-miss i {
    top: 50%;
    background: var(--sk-miss);
    box-shadow: 0 0 12px rgba(255, 93, 108, 0.24);
    transform-origin: center top;
}
/* Claimed nothing, so it sits on the line: a dash for a move inside the dead
   band, a hollow tick for standing aside. Present, because it happened. */
.sk-mk.is-flat i {
    top: calc(50% - 1.5px);
    height: 3px;
    background: var(--sk-flat);
}
.sk-mk.is-aside i {
    top: calc(50% - 3px);
    height: 6px;
    background: transparent;
    border: 1px solid var(--sk-aside);
    border-radius: 3px;
}
.sk-mk.is-pending i,
.sk-mk.is-none i {
    top: calc(50% - 2px);
    height: 4px;
    background: repeating-linear-gradient(
        90deg, var(--sk-aside) 0 2px, transparent 2px 4px);
}
.sk-mk:hover i { filter: brightness(1.25); }

@keyframes sk-grow {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

.sk-tape-axis {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--faint, #5a5f72);
}
.sk-tape-axis.is-one { justify-content: center; }

/* The legend labels the tape and counts it — one fact, told once. */
.sk-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--muted, #8a8fa3);
}
.sk-legend li { display: flex; align-items: center; gap: 7px; }
.sk-legend b {
    color: var(--ink, #e8eaf2);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.sk-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--sk-flat);
    flex: none;
}
.lg-hit .sk-dot { background: var(--sk-hit); }
.lg-miss .sk-dot { background: var(--sk-miss); }
.lg-flat .sk-dot { background: var(--sk-flat); }
.lg-aside .sk-dot { background: transparent; border: 1px solid var(--sk-aside); }
.lg-pending .sk-dot,
.lg-none .sk-dot { background: var(--sk-aside); }

.sk-last {
    margin: 14px 0 0;
    font-size: 11.5px;
    color: var(--faint, #5a5f72);
}

/* --- folds: the arithmetic and the raw log ------------------------------- */
.sk-fold {
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}
.sk-fold summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted, #8a8fa3);
}
.sk-fold summary::-webkit-details-marker { display: none; }
.sk-fold summary::before {
    content: "›";
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transition: transform 0.18s ease;
    color: var(--faint, #5a5f72);
}
.sk-fold[open] summary::before { transform: rotate(90deg); }
.sk-fold summary:hover { color: var(--ink, #e8eaf2); }
.sk-fold summary:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 3px;
    border-radius: 4px;
}
.sk-fold-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--faint, #5a5f72);
    max-width: 70ch;
}

.sk-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.sk-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 13px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.02);
}
.sk-tile-k {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint, #5a5f72);
}
.sk-tile-v {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink, #e8eaf2);
    font-variant-numeric: tabular-nums;
}
.sk-tile-s { font-size: 11.5px; line-height: 1.5; color: var(--muted, #8a8fa3); }
.sk-tile.is-up .sk-tile-v { color: var(--sk-hit); }
.sk-tile.is-down .sk-tile-v { color: var(--sk-miss); }

/* --- per index ----------------------------------------------------------- */
.sk-subs {
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 16px;
}
.sk-subs h3 {
    margin: 0 0 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--faint, #5a5f72);
}
.sk-sub-row {
    display: grid;
    grid-template-columns: 108px 1fr 78px 62px;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.sk-sub-row:last-child { border-bottom: 0; }
.sk-sub-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink, #e8eaf2);
}
/* The per-index tape is a glance, not a study: shorter, no axis, and packed
   left so the rows read as a column of comparable runs. */
.sk-sub-tape .sk-tape { height: 34px; gap: 2px; justify-content: flex-start; }
.sk-sub-tape .sk-mk { flex: 0 0 9px; max-width: 9px; }
/* The marks carry a height in pixels sized for the full-height tape; in a
   34px row they have to be reined in rather than overflowing it. */
.sk-sub-tape .sk-mk i { max-height: 14px; }
.sk-sub-tape .sk-tape-wrap { margin: 0; }
.sk-sub-tape .sk-tape-axis { display: none; }
.sk-sub-tape .sk-mk i { box-shadow: none; }
.sk-sub-n,
.sk-sub-rate {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--muted, #8a8fa3);
}
.sk-sub-rate { font-weight: 700; }

/* --- the log: every call, grouped by index -------------------------------
   The table is on the page rather than behind a fold now, because grouped by
   index it is evidence rather than a dump: each block's own hit rate sits in
   its header band, so "is one index carrying this record?" is answered by
   glancing down the right-hand edge. */
.sk-logsec {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.sk-logsec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sk-logsec-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #8a8fa3);
}
.sk-logf { display: flex; gap: 8px; }
.sk-logf select { padding: 6px 9px; font-size: 12px; }

.sk-log-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--faint, #5a5f72);
    max-width: 76ch;
}
.sk-log-empty {
    margin: 14px 0 4px;
    padding: 22px;
    border-radius: 12px;
    border: 1px dashed var(--border, rgba(255, 255, 255, 0.08));
    text-align: center;
    font-size: 13px;
    color: var(--muted, #8a8fa3);
}

/* A tall log scrolls inside itself rather than pushing the method note a
   thousand rows down the page — and both header bands stick while it does, so
   you never lose which index or which column you are reading. */
.sk-log-wrap {
    overflow: auto;
    max-height: 560px;
    margin-top: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
}
.sk-log {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.sk-log th {
    text-align: right;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint, #5a5f72);
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    white-space: nowrap;
}
/* A fixed header height keeps the index band's sticky offset exact — a couple
   of pixels out and rows scroll through the seam between the two. */
.sk-log thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 30px;
    padding: 0 10px;
    background: #12141f;
}
.sk-log th:first-child { text-align: left; }
.sk-log td {
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #e8eaf2);
    white-space: nowrap;
}
.sk-log td:first-child { text-align: left; font-family: inherit; }
.sk-unit { font-weight: 500; opacity: 0.55; }
.sk-when .w-t::before {
    content: "·";
    margin: 0 6px;
    opacity: 0.4;
}

/* The index band: name, count, the hit/miss split as a bar, and the rate. */
.sk-log .sk-grp th {
    position: sticky;
    top: 30px;
    z-index: 2;
    padding: 9px 10px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    background: #191c2b;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.sk-grp-in {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sk-grp-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink, #e8eaf2);
    letter-spacing: 0.02em;
}
.sk-grp-n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--faint, #5a5f72);
}
/* Hits against misses for this index, at a glance: the green share of the bar
   is the hit rate, drawn even when the sample is too small to print as a
   number — a shape claims less than a percentage does. */
.sk-ratio {
    display: flex;
    flex: 1 1 60px;
    max-width: 160px;
    height: 5px;
    border-radius: 99px;
    overflow: hidden;
    /* The track is what has not been settled either way — pending calls, no-move
       calls, calls where the engine stood aside. Green and red are painted over
       it, so the bar is always a share of every call in the block. */
    background: rgba(255, 255, 255, 0.08);
}
.sk-ratio i { display: block; height: 100%; }
.sk-ratio .r-hit { background: var(--sk-hit); }
.sk-ratio .r-miss { background: var(--sk-miss); }
.sk-grp-rate {
    margin-left: auto;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* The verdict as a pill, so a column of outcomes reads as a column rather than
   as five different colours of text competing with the numbers beside it. */
.sk-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
}
.sk-pill.v-hit { background: rgba(22, 209, 149, 0.12); }
.sk-pill.v-miss { background: rgba(255, 93, 108, 0.12); }
.sk-pill.v-open { color: var(--faint, #5a5f72); background: rgba(255, 255, 255, 0.04); }

.v-hit { color: var(--sk-hit); }
.v-miss { color: var(--sk-miss); }
.v-flat { color: var(--sk-flat); }
.v-aside { color: var(--sk-aside); }
.v-none { color: var(--sk-aside); font-style: italic; }
.sk-weak { color: #5a5f72; font-weight: 500 !important; }
.sk-dir { font-family: inherit !important; font-weight: 600; }
.sk-long, .sk-bullish { color: var(--sk-hit); }
.sk-short, .sk-bearish { color: var(--sk-miss); }
.sk-wait, .sk-neutral { color: #f5b651; }

/* --- the recorder has stopped -------------------------------------------- */
.sk-stale {
    display: flex;
    gap: 13px;
    max-width: 980px;
    margin: 0 auto 20px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 93, 108, 0.35);
    background: rgba(255, 93, 108, 0.08);
    color: #ffd4d8;
    font-size: 13.5px;
    line-height: 1.65;
}
.sk-stale b { color: #fff; }
.sk-stale-dot {
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border-radius: 99px;
    background: var(--sk-miss);
    animation: sk-pulse 2s ease-in-out infinite;
}
@keyframes sk-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 93, 108, 0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(255, 93, 108, 0); }
}

.sk-method {
    max-width: 980px;
    margin: 8px auto 20px;
    padding: 22px 24px;
    border-radius: 18px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.02);
}
.sk-method h2 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink, #e8eaf2);
}
.sk-method p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--muted, #8a8fa3);
    max-width: 76ch;
}
.sk-method p:last-child { margin-bottom: 0; }
.sk-method b { color: #c9ccd8; }

.sk-msg {
    max-width: 980px;
    margin: 40px auto;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted, #8a8fa3);
}
.sk-msg b { color: var(--ink, #e8eaf2); }

@media (max-width: 700px) {
    .sk-card { padding: 20px 18px 18px; }
    /* Eighty marks have to fit a phone, so they get thinner rather than
       spilling over the edge of the card. */
    .sk-tape { height: 84px; gap: 1px; }
    .sk-mk { min-width: 2px; max-width: 14px; }
    .sk-sub-tape .sk-mk { flex: 0 0 6px; max-width: 6px; }
    .sk-sub-row {
        grid-template-columns: 92px 1fr 56px;
        gap: 10px;
    }
    .sk-sub-n { display: none; }
    /* Five columns don't fit a phone; the level a call was made at is the one
       a reader can lose without the row stopping making sense. */
    .sk-log thead th:nth-child(3),
    .sk-log td:nth-child(3) { display: none; }
    /* Everything that is left has to fit without the outcome sliding off the
       right-hand edge, which is the one column nobody should have to swipe for. */
    .sk-log { font-size: 12px; }
    .sk-log th, .sk-log td { padding: 7px 8px; }
    .sk-when .w-d { display: block; }
    .sk-when .w-t { display: block; opacity: 0.65; }
    .sk-when .w-t::before { content: none; margin: 0; }
    .sk-pill { padding: 3px 7px; font-size: 10.5px; }
    .sk-log-wrap { max-height: 460px; }
    .sk-logsec-head { align-items: flex-start; flex-direction: column; }
    .sk-logf { width: 100%; }
    .sk-logf label { flex: 1; }
    .sk-logf select { width: 100%; }
    .sk-ratio { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sk-mk i { animation: none; }
    .sk-progress-fill { transition: none; }
    .sk-stale-dot { animation: none; }
}