/* ============================================================
   ARGUS RECORD PAGE — T&C change detail (/terms-changes/{slug})
   Extends the tc-change.css design language: Outfit display +
   Inter body, white cards on light bg, orange signal accents,
   and the warm 7-bucket severity scale. Loaded with tc-change.css.

   The record's ONE severity class sits on the .tcd root and
   drives every severity-colored element below via --sev/--sev-bg.
   ============================================================ */

.tcd {
    --tcd-text: #281e32;
    --tcd-text-dim: #6b5d78;
    /* 4.6:1 on white — the old #9b8fa8 was 3.0:1 and this token carries
       11-12px labels (rail titles, dates, scale ends), so it must clear AA. */
    --tcd-text-faint: #7d7089;
    --tcd-line: rgba(40, 30, 50, .10);
    --tcd-line-soft: rgba(40, 30, 50, .06);
    --tcd-orange: #fe5001;
    --tcd-orange-deep: #e2530a;
    --tcd-orange-soft: #ff8f65;
    --tcd-radius: 18px;
    /* neutral fallback so an unexpected score still renders */
    --sev: #8a7e97;
    --sev-bg: rgba(40, 30, 50, .07);
}

/* Same warm scale as .vg-card in tc-change.css */
.tcd.severity-very-positive     { --sev: #15803d; --sev-bg: rgba(34, 197, 94, .14); }
.tcd.severity-positive          { --sev: #1ca57a; --sev-bg: rgba(70, 214, 160, .16); }
.tcd.severity-slightly-positive { --sev: #1f9d57; --sev-bg: rgba(70, 214, 160, .12); }
.tcd.severity-neutral           { --sev: #8a7e97; --sev-bg: rgba(40, 30, 50, .07); }
.tcd.severity-slightly-negative { --sev: #d9760a; --sev-bg: rgba(255, 176, 92, .16); }
.tcd.severity-negative          { --sev: #e2530a; --sev-bg: rgba(254, 80, 1, .14); }
.tcd.severity-very-negative     { --sev: #d83545; --sev-bg: rgba(255, 93, 108, .14); }

/* --- Hero additions (base hero styles come from tc-change.css) --- */
.tcd-hero__row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: .35rem;
}

.tcd-hero__logo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 15px;
    background: #fff;
    padding: 5px;
    object-fit: contain;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}

.tcd-hero__body {
    flex: 1;
    min-width: 0;
}

.tcd-hero__casino {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    margin-bottom: .35rem;
    transition: color .2s;
}

a.tcd-hero__casino:hover { color: var(--tcd-orange-soft); }

.tcd-hero__body h1 {
    max-width: 820px;
    margin-bottom: .35rem;
}

/* One-line reviewer byline under the H1 (news-article convention; the full
   credibility card stays in the sidebar) */
.tcd-hero__byline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: .4rem;
    font-size: 13px;
    color: rgba(255, 255, 255, .65);
}

.tcd-hero__byline img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.tcd-hero__byline b,
.tcd-hero__byline a {
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
    text-decoration: none;
}

.tcd-hero__byline a:hover {
    color: var(--tcd-orange-soft);
    text-decoration: underline;
}

.tcd-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: .9rem;
}

.tcd-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.tcd-hero__chip i { color: var(--tcd-orange-soft); font-size: 11px; }

/* The "Detected by VistaGamble Argus" chip is a link to /argus — same chip look, link affordance on hover */
a.tcd-argus-chip { text-decoration: none; transition: background .15s ease, border-color .15s ease; }
a.tcd-argus-chip:hover { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }

/* The hero carries identity only — casino, title, byline, context chips.
   The score and the verdict live once, in the verdict band below it. */
@media (max-width: 767.98px) {
    .tcd-hero__row { flex-wrap: wrap; }
}

/* ============================================================
   THE VERDICT — the finding, stated once, with its provenance.
   This is the page's single authoritative answer: score, plain
   sentence, position on the scale, then the chronology rail that
   shows how the record was produced.
   ============================================================ */
.tcd-verdict {
    position: relative;
    background: #fff;
    border: 1px solid var(--tcd-line);
    border-left: 4px solid var(--sev);
    border-radius: var(--tcd-radius);
    box-shadow: 0 1px 2px rgba(40, 30, 50, .04);
    margin: 1.75rem 0;
    overflow: hidden;
}

.tcd-verdict__main {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 24px 20px;
}

/* Score plate — the number, sized as the page's loudest element */
.tcd-verdict__score {
    flex-shrink: 0;
    width: 78px;
    padding: 12px 0 10px;
    border-radius: 14px;
    text-align: center;
    background: var(--sev-bg);
    border: 1px solid var(--sev);
}

.tcd-verdict__num {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    color: var(--sev);
    font-variant-numeric: tabular-nums;
}

.tcd-verdict__unit {
    display: block;
    margin-top: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sev);
    opacity: .85;
}

.tcd-verdict__body { flex: 1; min-width: 0; }

.tcd-verdict__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tcd-verdict__sentiment {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--tcd-text);
    margin: 0;
}

.tcd-verdict__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    color: var(--sev);
    background: var(--sev-bg);
    white-space: nowrap;
}

/* The plain-English answer, held to a readable measure */
.tcd-verdict__summary {
    max-width: 68ch;
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a3f55;
}

.tcd-verdict__summary p { margin: 0; }
.tcd-verdict__summary p + p { margin-top: 9px; }
.tcd-verdict__summary b,
.tcd-verdict__summary strong { color: var(--tcd-text); }

.tcd-verdict__scale { margin: 18px 0 0; }

/* --- Provenance rail — the captured moments of this record --- */
.tcd-rail {
    padding: 16px 24px 18px;
    border-top: 1px solid var(--tcd-line-soft);
    background: linear-gradient(180deg, rgba(40, 30, 50, .015), transparent);
}

.tcd-rail__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tcd-text-faint);
    margin: 0 0 16px;
}

.tcd-rail__title i { color: var(--tcd-orange-deep); }

.tcd-rail__moments {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tcd-moment {
    flex: 1;
    min-width: 0;
    position: relative;
    text-align: center;
    padding: 0 6px;
}

/* connector segment from the previous node */
.tcd-moment:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -50%;
    top: 13px;
    width: 100%;
    height: 2px;
    background: rgba(40, 30, 50, .12);
}

/* the line ignites to the record's severity color at detection */
.tcd-moment--ignite:not(:first-child)::before {
    background: linear-gradient(90deg, rgba(40, 30, 50, .12), var(--sev));
}

.tcd-moment--signal:not(.tcd-moment--ignite):not(:first-child)::before {
    background: var(--sev);
}

.tcd-moment__dot {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    margin: 0 auto 9px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: #fff;
    border: 2px solid rgba(40, 30, 50, .18);
    color: var(--tcd-text-faint);
}

.tcd-moment--signal .tcd-moment__dot {
    background: var(--sev);
    border-color: var(--sev);
    color: #fff;
    box-shadow: 0 0 0 4px var(--sev-bg);
}

.tcd-moment__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--tcd-text);
    line-height: 1.3;
}

.tcd-moment__date {
    margin-top: 3px;
    font-size: 12px;
    color: var(--tcd-text-dim);
}

.tcd-rail__note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    max-width: 78ch;
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tcd-text-faint);
}

.tcd-rail__note i { margin-top: 2px; }

/* On a phone the side-by-side score/body split starved the summary down to a
   ~26-character measure. Re-flow as two rows instead: score plate + sentiment
   head share row 1, the summary and scale run the full card width in row 2.
   `display: contents` on the body lifts its children into the same grid so
   this needs no separate mobile markup. */
@media (max-width: 767.98px) {
    .tcd-verdict__main {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
        row-gap: 4px;
        padding: 18px 16px;
    }

    .tcd-verdict__score { width: 72px; padding: 10px 0 9px; }
    .tcd-verdict__num { font-size: 30px; }

    .tcd-verdict__body { display: contents; }

    .tcd-verdict__head { min-width: 0; gap: 8px; }
    .tcd-verdict__sentiment { font-size: 19px; }

    .tcd-verdict__summary,
    .tcd-verdict__scale { grid-column: 1 / -1; }

    .tcd-verdict__summary { margin-top: 10px; font-size: 15px; line-height: 1.65; }
    .tcd-verdict__scale { margin-top: 16px; }

    .tcd-rail { padding: 14px 16px 16px; }
}

@media (max-width: 639.98px) {
    .tcd-rail__moments { flex-direction: column; gap: 14px; }
    .tcd-moment { display: flex; align-items: center; gap: 12px; text-align: left; padding: 0; }
    .tcd-moment::before { display: none !important; }
    .tcd-moment__dot { margin: 0; flex-shrink: 0; }
    .tcd-moment__date { margin: 0 0 0 auto; white-space: nowrap; }
}

/* --- Content grid --- */
.tcd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
    padding-bottom: 2.5rem;
}

.tcd-aside {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 991.98px) {
    /* minmax(0, 1fr), NOT a bare 1fr: a bare track sizes to its min-content,
       so one long unbreakable token in the scraped diff widened this column
       past the viewport and dragged every card in it off-screen with it. */
    .tcd-grid { grid-template-columns: minmax(0, 1fr); }
    .tcd-aside { position: static; order: 2; }
}

/* --- Cards --- */
.tcd-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--tcd-line);
    border-radius: var(--tcd-radius);
    box-shadow: 0 1px 2px rgba(40, 30, 50, .04);
    overflow: hidden;
    margin-bottom: 22px;
}

.tcd-card--accent::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tcd-orange), var(--tcd-orange-soft));
    z-index: 1;
}

.tcd-card__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--tcd-line-soft);
}

/* Numbered section plate — the record reads as a formal document with
   ordered sections rather than a stack of unrelated cards. */
.tcd-card__num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--tcd-orange), var(--tcd-orange-deep));
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    box-shadow: 0 4px 10px -3px rgba(254, 80, 1, .5);
}

.tcd-card__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--tcd-text);
    margin: 0;
}

.tcd-card__title i {
    margin-right: 8px;
    color: var(--tcd-text-faint);
    font-size: 14px;
}

.tcd-card__body { padding: 18px 22px 22px; }

/* --- Was → Now comparison --- */
.tcd-ba {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
}

.tcd-ba__side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid;
}

.tcd-ba__side--was { background: rgba(216, 53, 69, .06); border-color: rgba(216, 53, 69, .22); }
.tcd-ba__side--now { background: rgba(28, 165, 122, .08); border-color: rgba(28, 165, 122, .25); }

.tcd-ba__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.tcd-ba__label i { font-size: 9px; }
.tcd-ba__side--was .tcd-ba__label { color: #b02a37; }
.tcd-ba__side--now .tcd-ba__label { color: #157347; }

.tcd-ba__val {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.45;
    letter-spacing: -.01em;
}

.tcd-ba__side--was .tcd-ba__val {
    color: #8f3a40;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(143, 58, 64, .45);
}

.tcd-ba__side--now .tcd-ba__val { color: #176438; }

.tcd-ba__arrow {
    align-self: center;
    z-index: 1;
    width: 36px;
    height: 36px;
    margin: 0 -6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tcd-orange);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(254, 80, 1, .4);
    flex-shrink: 0;
}

@media (max-width: 559.98px) {
    .tcd-ba { grid-template-columns: 1fr; }
    .tcd-ba__arrow { margin: -6px 0; transform: rotate(90deg); }
}

/* --- Full comparison (collapsible word diff) --- */
.tcd-full { border-top: 1px solid var(--tcd-line-soft); }

.tcd-full__bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #faf9fb;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background .2s;
}

.tcd-full__bar:hover { background: #f4f2f7; }

.tcd-full__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--tcd-text);
    white-space: nowrap;
}

.tcd-full__counts {
    font-size: 12px;
    font-weight: 600;
    color: var(--tcd-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcd-full__counts .add { color: #1ca57a; }
.tcd-full__counts .del { color: #d83545; }

.tcd-full__toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--tcd-orange-deep);
    white-space: nowrap;
}

.tcd-full__toggle i { transition: transform .2s; font-size: 12px; }
.tcd-full__bar[aria-expanded="true"] .tcd-full__toggle i { transform: rotate(90deg); }

.tcd-full__body {
    border-top: 1px solid var(--tcd-line-soft);
}

/* Toolbar: view toggle + change navigation (legal-redline convention) */
.tcd-diff-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 22px;
    background: #fff;
}

.tcd-diff-views {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: #f4f2f7;
    border: 1px solid var(--tcd-line);
    border-radius: 10px;
}

.tcd-diff-viewbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tcd-text-dim);
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}

.tcd-diff-viewbtn i { font-size: 11px; }

.tcd-diff-viewbtn.is-active {
    background: #fff;
    color: var(--tcd-text);
    box-shadow: 0 1px 3px rgba(40, 30, 50, .12);
}

.tcd-diff-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tcd-diff-nav button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(40, 30, 50, .15);
    border-radius: 8px;
    background: #fff;
    color: var(--tcd-text-dim);
    font-size: 11px;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.tcd-diff-nav button:hover:not(:disabled) {
    border-color: var(--tcd-orange);
    color: var(--tcd-orange-deep);
}

.tcd-diff-nav button:disabled { opacity: .4; cursor: default; }

#tcd-diff-pos {
    min-width: 70px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--tcd-text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Side-by-side panes with synchronized scrolling */
.tcd-diff-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 4px 22px 20px;
}

.tcd-diff-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tcd-line);
    border-radius: 12px;
    overflow: hidden;
}

.tcd-diff-pane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--tcd-line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tcd-diff-pane__head--before { background: rgba(216, 53, 69, .06); color: #b02a37; }
.tcd-diff-pane__head--after  { background: rgba(28, 165, 122, .08); color: #157347; }

.tcd-diff-pane__date {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: .85;
}

.tcd-diff-pane__body {
    position: relative;
    max-height: 420px;
    overflow-y: auto;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 699.98px) {
    .tcd-diff-split { grid-template-columns: 1fr; }
    .tcd-diff-pane__body { max-height: 260px; }
}

/* Unified view */
.tcd-diff-scroll {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
    padding: 16px 22px 20px;
    -webkit-overflow-scrolling: touch;
}

.tcd-diff {
    font-size: 14px;
    line-height: 1.95;
    color: var(--tcd-text-faint);   /* unchanged context, dimmed */
    margin: 0;
}

.tcd-full .add {
    color: #155724;
    background: #d4edda;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    margin: 0 1px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.tcd-full .del {
    color: #721c24;
    background: #f8d7da;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    padding: 1px 5px;
    border-radius: 4px;
    margin: 0 1px;
    opacity: .85;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Change currently focused via prev/next navigation */
.tcd-full .add.is-current,
.tcd-full .del.is-current {
    outline: 2px solid var(--tcd-orange);
    outline-offset: 1px;
}

.tcd-diff-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tcd-text-faint);
    font-size: 14px;
}

/* "What this means" prose */
.tcd-means p {
    font-size: 14.5px;
    line-height: 1.75;
    color: #4a3f55;
    margin: 0 0 12px;
}

.tcd-means p:last-child { margin-bottom: 0; }
.tcd-means p strong, .tcd-means p b { color: var(--tcd-text); font-weight: 700; }

/* --- Evidence captures --- */
.tcd-ev-h {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--tcd-text);
    margin: 26px 0 16px;
}

.tcd-ev-h i { color: var(--tcd-orange-deep); font-size: 16px; }

/* --- Evidence exhibits ---
   Two captures bound into one record by the interval between them. Deliberately
   no mock-up of the captured page: on a page whose job is proof, a drawn
   approximation of the artifact is the one thing that must not appear. */
.tcd-exhibits {
    background: #fff;
    border: 1px solid var(--tcd-line);
    border-radius: var(--tcd-radius);
    box-shadow: 0 1px 2px rgba(40, 30, 50, .04);
    overflow: hidden;
}

.tcd-exhibit {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 18px;
    padding: 18px 22px 18px 20px;
    text-decoration: none;
    transition: background .2s;
}

.tcd-exhibit::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--exhibit-rule);
}

.tcd-exhibit--before { --exhibit-rule: rgba(216, 53, 69, .55); }
.tcd-exhibit--after { --exhibit-rule: rgba(28, 165, 122, .6); }

.tcd-exhibit:hover { background: #faf9fb; }

.tcd-exhibit__role {
    grid-row: 1 / span 2;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--exhibit-rule);
}

/* Timestamps carry the forensic weight, so they get the display face and
   tabular figures — the two exhibits line up digit for digit. */
.tcd-exhibit__when {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-variant-numeric: tabular-nums;
}

.tcd-exhibit__when b {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--tcd-text);
}

.tcd-exhibit__when span { font-size: 12.5px; color: var(--tcd-text-dim); }

.tcd-exhibit__source {
    grid-column: 2;
    font-size: 12.5px;
    color: var(--tcd-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcd-exhibit__open {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tcd-orange-deep);
    white-space: nowrap;
}

.tcd-exhibit__open i { font-size: 11px; transition: transform .2s; }
.tcd-exhibit:hover .tcd-exhibit__open i { transform: translate(2px, -2px); }

/* The seam — the interval is the fact that binds the two exhibits, so it sits
   in the join rather than being reported as another field. */
.tcd-exhibits__seam {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    border-top: 1px solid var(--tcd-line-soft);
    border-bottom: 1px solid var(--tcd-line-soft);
    background: linear-gradient(180deg, rgba(40, 30, 50, .015), transparent);
}

.tcd-exhibits__seam::before,
.tcd-exhibits__seam::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tcd-line), transparent);
}

.tcd-exhibits__seam span {
    padding: 7px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tcd-text-faint);
    font-variant-numeric: tabular-nums;
}

.tcd-exhibits__note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 2px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tcd-text-faint);
}

.tcd-exhibits__note i { margin-top: 2px; }

@media (max-width: 559.98px) {
    .tcd-exhibit {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 14px;
        padding: 16px 16px 16px 15px;
    }

    .tcd-exhibit__role { grid-row: 1; grid-column: 1 / -1; }
    .tcd-exhibit__when { grid-column: 1; }
    .tcd-exhibit__source { grid-column: 1; }
    .tcd-exhibit__open { grid-column: 2; grid-row: 2 / span 2; }
    .tcd-exhibits__seam { padding: 0 16px; }
}


/* --- Sidebar --- */
.tcd-side { margin-bottom: 0; }

/* Rendered as <h2> so the sidebar sections appear in the document
   outline; the visual size is deliberately smaller than the body h2s. */
.tcd-side__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--tcd-line-soft);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--tcd-text);
}

.tcd-side__head::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--tcd-orange);
    flex-shrink: 0;
}

.tcd-side__body { padding: 14px 18px 16px; }

/* --- Impact scale (lives in the verdict band) ---
   The bar is decorative: the score and its label are already stated in
   text beside it, and the wrapper carries an aria-label for assistive
   tech, so nothing here is meaning-by-colour-alone. */
.tcd-scale {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c92a2a, #e8590c 26%, #e9ecef 50%, #40c057 74%, #2b8a3e);
}

.tcd-scale__marker {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--sev);
    box-shadow: 0 1px 6px rgba(40, 30, 50, .35);
    transform: translate(-50%, -50%);
}

.tcd-scale__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tcd-text-faint);
    font-variant-numeric: tabular-nums;
}

.tcd-scale__ends .worse { color: #c92a2a; font-weight: 700; }
.tcd-scale__ends .better { color: #2b8a3e; font-weight: 700; }

/* Record detail rows */
.tcd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tcd-line-soft);
    font-size: 13px;
    color: var(--tcd-text-dim);
}

.tcd-row:last-of-type { border-bottom: none; }
.tcd-row b { color: var(--tcd-text); font-weight: 600; text-align: right; }
.tcd-row b i { color: var(--tcd-orange-deep); font-size: 11px; margin-right: 5px; }

.tcd-links {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tcd-line-soft);
}

.tcd-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tcd-orange-deep);
    text-decoration: none;
}

.tcd-link:hover { color: var(--tcd-orange); text-decoration: underline; }
.tcd-link i { font-size: 11px; }

/* Reviewer (credibility card) */
.tcd-reviewer__top {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 2px 0 14px;
}

.tcd-reviewer__av {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #281e32;
    box-shadow: 0 1px 3px rgba(40, 30, 50, .2);
}

.tcd-reviewer__av img { width: 100%; height: 100%; object-fit: cover; }

.tcd-reviewer__name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: var(--tcd-text);
    text-decoration: none;
}

a.tcd-reviewer__name:hover { color: var(--tcd-orange-deep); text-decoration: underline; }

.tcd-reviewer__role {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tcd-text-faint);
}

.tcd-reviewer__bio {
    font-size: 13px;
    line-height: 1.55;
    color: var(--tcd-text-dim);
    margin: 0 0 12px;
}

/* Bios are stored as rich HTML (<p> wrapped) — flatten the inner paragraphs */
.tcd-reviewer__bio p {
    margin: 0;
}

.tcd-reviewer__date {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 12px;
    border-top: 1px solid var(--tcd-line-soft);
    font-size: 13px;
    color: #4a3f55;
}

.tcd-reviewer__date b { font-weight: 700; color: var(--tcd-text); }

.tcd-reviewer__foot {
    display: flex;
    gap: 8px;
    margin-top: 13px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--tcd-text-faint);
}

.tcd-reviewer__foot i { color: #cdd2da; margin-top: 2px; }

/* Casino review CTA — the sidebar's one loud element */
.tcd-review-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--tcd-radius);
    background: linear-gradient(140deg, var(--tcd-orange), var(--tcd-orange-deep));
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(254, 80, 1, .55);
    transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s;
}

.tcd-review-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(254, 80, 1, .65);
}

.tcd-review-cta img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    padding: 3px;
    object-fit: contain;
}

.tcd-review-cta__txt {
    flex: 1;
    min-width: 0;
}

.tcd-review-cta__txt small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 2px;
}

.tcd-review-cta__txt b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
}

.tcd-review-cta > i {
    flex-shrink: 0;
    font-size: 14px;
    opacity: .9;
}

.tcd-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--tcd-text-dim);
    text-decoration: none;
    transition: background .2s, color .2s;
}

.tcd-back:hover { background: rgba(40, 30, 50, .05); color: var(--tcd-text); }

/* --- Related changes (real listing cards, .vg-tc-section supplies card vars) --- */
.tcd-related__head {
    max-width: 1180px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.tcd-related__head h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.015em;
    color: var(--tcd-text);
    margin: 0;
}

.tcd-related__all {
    font-weight: 600;
    font-size: 14px;
    color: var(--tcd-orange-deep);
    text-decoration: none;
    white-space: nowrap;
}

.tcd-related__all:hover { text-decoration: underline; }

/* --- Record reference — the case-file identifier --- */
.tcd-ref {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tcd-text-faint);
    font-variant-numeric: tabular-nums;
}

/* --- Readable measure for long-form prose ---
   Body copy is capped at ~68 characters per line; without this the
   explanation runs the full card width on desktop and becomes hard to
   track back to the next line. */
.tcd-prose {
    font-size: 15px;
    line-height: 1.75;
    color: #4a3f55;
}

.tcd-prose > :last-child { margin-bottom: 0; }

/* ============================================================
   MOBILE — the record cards below the verdict band
   ============================================================ */

/* Scraped T&C text carries URLs, promo codes and long ids. Let them break
   rather than push their container wider than the screen. */
.tcd-diff,
.tcd-prose,
.tcd-ba__val { overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
    /* 22px of side padding on a 360px screen spent an eighth of the width on
       gutters — pull every card in line with the verdict band's 16px. */
    .tcd-card__head { padding: 16px 16px 14px; gap: 10px; }
    .tcd-card__num { width: 30px; height: 30px; font-size: 12.5px; }
    .tcd-card__title { font-size: 17px; }
    .tcd-card__body { padding: 16px; }

    .tcd-full__bar { padding: 13px 16px; gap: 10px; }
    .tcd-diff-split { padding: 4px 16px 18px; }
    .tcd-diff-scroll { padding: 14px 16px 18px; }
    .tcd-diff-pane__body { padding: 12px 14px; }

    /* Toolbar stacks: the view toggle spans the row as a 50/50 segmented
       control, the change navigation centres beneath it. */
    .tcd-diff-toolbar { padding: 12px 16px; gap: 10px; }
    .tcd-diff-views { width: 100%; }
    .tcd-diff-viewbtn { flex: 1; justify-content: center; padding: 8px 10px; }
    .tcd-diff-nav { width: 100%; justify-content: center; }

    .tcd-ev-h { font-size: 17px; }
    .tcd-side__head { padding: 12px 16px; }
    .tcd-side__body { padding: 14px 16px 16px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Visible keyboard focus on every interactive element. The page is
   dense with links (evidence captures, diff controls, related cards)
   and none of them were focus-visible before. */
.tcd a:focus-visible,
.tcd button:focus-visible,
.tcd [tabindex]:focus-visible {
    outline: 3px solid var(--tcd-orange);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Comfortable touch targets for the diff controls (44px minimum). */
.tcd-diff-nav button,
.tcd-diff-viewbtn {
    min-height: 44px;
    touch-action: manipulation;
}

.tcd-diff-nav button { min-width: 44px; }

/* Honour a reduced-motion preference: this page animates hover lifts,
   the capture overlay and the diff scroll jumps. */
@media (prefers-reduced-motion: reduce) {
    .tcd *,
    .tcd *::before,
    .tcd *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .tcd-exhibit:hover .tcd-exhibit__open i { transform: none; }
}