/* ============================================================================
   CL REFINE — the craft layer (2026-09-22)

   The direction is the category standard executed at full craft; the bar is
   Linear, Vercel and Raycast. The information design was confirmed good and is
   untouched: every column, control, tab and value stays exactly where it was.
   This file only removes noise and imposes one system on the things that had
   none.

   It loads LAST, after every page stylesheet, and every rule here is answering
   a measurement taken off the rendered page rather than a hunch:

     six control heights in one header strip  -> two
     twelve border radii on one screen        -> four
     a 0.28-alpha blue hairline, 201 times    -> one neutral hairline
     text at 8.32px, 800 weight               -> a 10px floor, weight capped
     ten venue brand colours as filled chips  -> one chip, colour as a key
     a filled side chip beside a coloured sum -> the word, once, uncoloured
     gold marking "active" against an orange accent -> one accent, one meaning
     browser defaults for selection, caret, scrollbar, focus

   Anything that is genuinely information keeps its colour: direction on a
   number, the venue key, the wallet hue, coverage warnings.
   ========================================================================== */

/* ── 1. One border, one shadow ──────────────────────────────────────────── */

:root {
    --clr-hair: rgba(244, 241, 236, 0.09);
    --clr-hair-strong: rgba(244, 241, 236, 0.16);
    --clr-hover: rgba(244, 241, 236, 0.045);
    --clr-sunk: rgba(0, 0, 0, 0.25);
}

/* ── 2. Browser surfaces. The parts nobody draws still carry the design. ── */

::selection { background: rgba(238, 90, 44, 0.28); color: #F4F1EC; }

:root { scrollbar-color: rgba(244, 241, 236, 0.18) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(244, 241, 236, 0.16);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(244, 241, 236, 0.28); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

input, textarea, select { caret-color: var(--tt-accent, #EE5A2C); }

/* One focus ring for the whole site. Two-tone so it reads on any surface. */
:focus-visible {
    outline: 2px solid var(--tt-accent, #EE5A2C);
    outline-offset: 2px;
    border-radius: 4px;
}
/* The mouse should not get the ring; the keyboard always should. */
:focus:not(:focus-visible) { outline: none; }

/* Figures that sit in a column line up as a column. */
.cw-row-usd, .cw-row-price, .cw-row-time, .cw-th.is-num,
.cwfb-seg-num, .cw-strip-v, .cw-strip-mult, .cw-strip-of, .cw-strip-hit {
    font-variant-numeric: tabular-nums;
}

/* ── 3. One accent, one meaning ─────────────────────────────────────────── */
/* Gold was doing the job of "active" and "sorted" and "notable" at once, on a
   page whose accent is orange. Two accents means no accent. Gold keeps only
   the jobs where it encodes a real quantity (sweep pips, size marks). */

.cw-tab.is-on {
    color: var(--tt-text, #F4F1EC);
    background: var(--tt-raised, #1A1818);
    box-shadow: inset 0 -2px 0 0 var(--tt-accent, #EE5A2C);
}
.cw-th.is-sort[aria-sort="descending"],
.cw-th.is-sort[aria-sort="ascending"] { color: var(--tt-accent-text, #FF8A5C); }
a.cw-row-coin:hover { color: var(--tt-accent-text, #FF8A5C); }

/* ── 4. The venue key ───────────────────────────────────────────────────── */
/* Ten saturated brand colours filling ten chips per screen was the single
   loudest thing on the page. The venue keeps its colour, as a 5px key beside a
   neutral chip, so the column still reads at a glance without shouting. */

.cw-row-venue {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(244, 241, 236, 0.055);
    color: var(--tt-text-muted, #A8A29B);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 2px 7px 2px 6px;
    border-radius: 4px;
}
.cw-row-venue::before {
    content: "";
    width: 5px; height: 5px; flex: none;
    border-radius: 50%;
    background: var(--v, currentColor);
}

/* ── 5. Say it once ─────────────────────────────────────────────────────── */
/* The amount is already coloured by direction and the type dot already carries
   the market. A filled green block next to a green number is the same fact
   three times. The word stays; the block goes. */

.cw-row-side {
    background: none;
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 0.92;
}
.cw-row-side.is-buy { color: var(--tt-up, #37D98A); }
.cw-row-side.is-sell { color: var(--tt-down, #FA5772); }

/* WHERE the trade happened is already a named chip in its own column, so the
   left edge repeating it in colour is a third statement of the same fact. It
   stays as a quiet 2px key rather than a 3px stripe down the feed. */
.cw-row::before { width: 2px; opacity: 0.55; }

/* ── 6. One hairline ────────────────────────────────────────────────────── */

.cw-row { border-bottom-color: var(--clr-hair); }
.cw-row:hover { background: var(--clr-hover); }
.cw-thead { border-bottom-color: var(--clr-hair-strong); }

/* ── 7. Type: a floor and a scale ───────────────────────────────────────── */
/* Measured on the rendered feed: text at 8.32px and 8.96px, and weight 800 at
   9.6px, which prints as a smudge rather than as emphasis. Nothing on this
   page goes below 10px, and small text gets its emphasis from colour and
   letter-spacing instead of from weight it cannot carry. */

.cw-row-time { font-size: 10.5px; letter-spacing: 0.01em; }
.cw-row-venue, .cw-row-fills, .cw-sweep-n { font-size: 10.5px; }
.cw-thead, .cw-th { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; }
.cw-row-side { font-size: 10px; }
.cw-type { font-size: 11px; }
.cw-row-coin { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.cw-row-usd { font-weight: 500; }

/* ── 8. One control height, so a row of controls is a row ───────────────── */
/* Measured: 44 / 36 / 32 / 31 / 27 / 26px among the header's own controls. */

.cwfb-chip, .cwfb-coin, .cwfb-add-input, .cwfb-segbtn, .cwfb-select,
.cwfb-quick-btn, .cwfb-type, .cwfb-sound, .cwfb-clear {
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
}
.cwfb-seg { height: 32px; box-sizing: border-box; }
/* Two controls in the same strip were measured at 44px against their
   neighbours' 32px, which is what made the strip read as a staircase. */
#cw-alerts-toggle, #cw-window-chip { height: 32px; min-height: 32px; box-sizing: border-box; }

/* Nothing on the page is set below 10px. Measured at 8.32px before this: a
   badge at that size is a smudge, not a label. */
.pro-tag, .cw-win-note, .cw-strip-win, .cw-row-prem, .cw-tier-chip,
.nl-cta__free, .clc-lvpill, #notif-count {
    font-size: 10px;
    letter-spacing: 0.05em;
}
/* These four are declared with a parent in the selector, so they need the same
   specificity here or the floor silently loses. */
.cw-window-chip .cw-win-note { font-size: 10px; }
.cw-row-usd .cw-row-prem { font-size: 10px; letter-spacing: 0.04em; font-weight: 700; }
.nl-cta .nl-cta__free, .nl-cta__free { font-size: 10px; }
#cl-notif #notif-count, #notif-count { font-size: 10px; }
.cwfb-chip, .cwfb-coin, .cwfb-type { border-radius: 999px; }
.cwfb-add-input, .cwfb-select, .cwfb-seg { border-radius: 6px; }

/* ── 9. Panels: fewer edges ─────────────────────────────────────────────── */
/* A bordered card inside a bordered card inside a bordered page is three
   statements of one boundary. The outer panel keeps its edge; the strips
   inside it are separated by space and one hairline instead. */

.cw-strip {
    border: 0;
    border-top: 1px solid var(--clr-hair);
    border-radius: 0;
    background: none;
}

/* ── 10. Docks: nothing permanently parked over the data ────────────────── */
/* Measured: #cl-dock-launch sat at 1080,880 (344x54) directly over the live
   feed. Both docks now share one lane at the bottom of the viewport and the
   feed reserves that lane, so neither ever covers a row. */

/* The ask launcher is 54px tall and sits 16px off the bottom edge, so the feed
   reserves 78px. #cw-trades-body is its own scroller (whale-pages.css caps it
   at 78vh), which is why padding on the panel wrapper did nothing: the rows
   scroll INSIDE it, under the dock. The padding goes on the scroller, so every
   row can be brought clear of the launcher. */
/* The lane itself is reserved by lib/dock-avoid.js, which measures the real
   widget rather than guessing at it, and now puts the reservation on the
   element marked [data-dock-floor] (the feed scroller) instead of on the panel
   around it. A second reservation here stacked with that one into 160px of
   void under the table, so only the scroll padding stays. */
body { --cl-dock-lane: 78px; }
#cw-trades-body { scroll-padding-bottom: var(--cl-dock-lane); }

#cl-dock-launch, #cl-checklist {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
    body { --cl-dock-lane: 64px; }
}

/* ── 11. Motion ─────────────────────────────────────────────────────────── */
/* One authored moment: a new trade arrives. Everything else is a state change
   at 120ms, which is below the threshold where a live feed starts to feel
   laggy. No entrance animation anywhere, so the page is complete at rest. */

.cw-row { transition: background 120ms var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1)); }
.cwfb-chip, .cwfb-coin, .cw-tab {
    transition: background 120ms var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1)),
                color 120ms var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1)),
                box-shadow 120ms var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1));
}

@media (prefers-reduced-motion: reduce) {
    .cw-row, .cwfb-chip, .cwfb-coin, .cw-tab { transition: none; }
}

/* ── 12. State is neutral; the key keeps the colour ─────────────────────── */
/* The four market-type filters each took their own hue for the whole chip
   when active, so a row of four active filters was four outlined colours.
   The dot inside already IS the key, and it is the same dot that marks the
   rows, so the chip only has to say "on". */

.cwfb-type.is-on {
    color: var(--tt-text, #F4F1EC);
    border-color: rgba(244, 241, 236, 0.22);
    background: rgba(244, 241, 236, 0.07);
}
.cwfb-type.is-on .cwfb-dot { opacity: 1; box-shadow: none; }

/* The history control was outlined in gold beside a PRO tag that is now the
   accent, which made one control carry two tier colours. */
.cw-history-chip {
    border-color: rgba(244, 241, 236, 0.14);
    background: rgba(244, 241, 236, 0.05);
}
.cw-history-chip:hover {
    border-color: rgba(244, 241, 236, 0.24);
    background: rgba(244, 241, 236, 0.09);
}
.cw-history-chip i { color: var(--tt-text-muted, #A8A29B); }

/* ── 13. Mobile: the terminal gets its viewport back ────────────────────── */
/* Measured at 390x844: the ask launcher and the journey launcher together
   occluded the bottom ~90px and the live table rendered about 1.5 readable
   rows, on the surface the whole product is named after. Below 768px the ask
   control collapses to its own 44px affordance (the funnel keeps its entry
   point, it just stops being a 344px bar over the data), and the journey
   launcher stands down wherever the feed is the scroll container. */

/* The ask launcher's own collapsed state lives in ai-dock.css, with the rest
   of the dock, because test/ai-dock-wiring.test.js requires every class the
   dock partial writes to have a rule in the dock's own stylesheet. What stays
   here is the page-side half: the lane the feed reserves, and standing the
   journey launcher down where the feed owns the scroll. */
@media (max-width: 767px) {
    body:has(#cw-trades-body) #cl-checklist { display: none !important; }
    /* The collapsed pill is 46px tall and sits 12px off the bottom, so the
       feed reserves 70px: at the end of the scroll the last row clears it
       rather than handing the reader a timestamp and a ticker with a button
       on top of them. Mid-scroll a row still passes under it, which is what a
       floating control does. */
    body:has(#cw-trades-body) { --cl-dock-lane: 70px; }
}


/* ============================================================================
   14. TYPE SCALE AND RHYTHM
   ============================================================================
   Added after the owner compared the result to the reference and said it still
   was not polished. They were right, and the measurements say why.

   Censused across twelve pages BEFORE this block:
     the most common heading on the site was H4 at 12px weight 700, in the BODY
     face, leading 1.1. Seven different H2 sizes were in use (10, 10.88, 13.76,
     15.2, 16.8, 17.6, 57.6). Every H1 was weight 800, from 16px to 62.4px.
     Prose ran at 13.44px.
   The reference, measured the same way:
     display 48px at weight 500, leading 1.0; section heads 36px/40px at 500;
     body 16px/24px; and a scale that actually steps, 72/50/48/40/36/32/24/18/
     16/14.

   So the gap was never colour. Everything here was small, tight and heavy, and
   heavy-at-small is the exact texture that reads as unconsidered. Three moves:
   weight comes DOWN as size goes UP, real headings get real size, and prose
   gets the leading it needs to be read rather than scanned.

   WHY EVERY SELECTOR BELOW STARTS WITH `body`:
   most pages here carry their own <style> block, and it lands after this
   file's <link>. On an equal-specificity tie the later rule wins, so the first
   version of this block was silently beaten on six of the ten pages measured
   (.gh-card h2, .doc-q, .cl-footer-col h4, .wt-section h2 among them) and the
   census showed almost nothing had changed. The `body` prefix costs one
   element of specificity and makes the layer actually apply. It also beats the
   vendor theme in app.min.css, which sets a blanket `h1..h6 { font-weight:700 }`.

   The live table is deliberately excluded. A feed row is a data grid and 13px
   is correct there; the density is the product. This is for everything a
   person reads rather than scans.
   ========================================================================= */

:root {
    --clr-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    /* Weight is the whole trick: 800 on a 48px line is a shout, 600 is a
       voice. Bricolage is a variable face (200-800), so 600 is a real
       instance rather than a synthesised one. */
    --clr-w-display: 600;
    --clr-w-heading: 600;
}

/* ── Page titles ──────────────────────────────────────────────────────── */

body .doc-hero__h1, body .ph-title, body .lwp-h1, body .ai-h2,
body .cl-slim__title, body .wt-hero h1, body .gh-head h1,
body .un-wrap h1, body .mo-wrap h1, body .pt-page h1, body .sg-wrap h1 {
    font-family: var(--clr-display);
    font-weight: var(--clr-w-display);
    letter-spacing: -0.028em;
    line-height: 1.04;
    text-wrap: balance;
}
/* The four that were already large only needed the weight and the leading. */
body .doc-hero__h1, body .ph-title, body .lwp-h1, body .ai-h2 {
    font-size: clamp(36px, 4.2vw, 56px);
}
/* These were page titles at section size, 23 to 32px, which is why the pages
   they head read as panels rather than as pages. */
body .cl-slim__title, body .wt-hero h1, body .gh-head h1,
body .un-wrap h1, body .pt-page h1, body .sg-wrap h1 {
    font-size: clamp(30px, 3.4vw, 42px);
}

/* ── Section headings ─────────────────────────────────────────────────── */

body .wt-section h2, body .gh-card h2, body .pt-method h2, body .cl-faq h2,
body .ai-h3, body .asec h2:not([class]), body .asec-title {
    font-family: var(--clr-display);
    font-weight: var(--clr-w-heading);
    letter-spacing: -0.018em;
    line-height: 1.22;
}
body .wt-section h2, body .pt-method h2, body .cl-faq h2 { font-size: 24px; }
body .gh-card h2, body .ai-h3 { font-size: 19px; }
body .asec-title { font-size: 17px; text-transform: none; letter-spacing: -0.012em; }

/* ── Labels are labels, not shrunken headings ─────────────────────────── */
/* These carry 10 to 13.76px at weight 700 and read as headings that failed to
   grow. Set as small caps they read as deliberate, which is what they are. */

/* .asec-title is NOT in this list. It was, for one build, and that was wrong:
   it is the account page's SECTION heading, and shrinking it to a 11px label
   left that page with nothing between a 28px title and 11px caps. The others
   really are micro-labels (they were already 10 to 10.88px). */
/* The footer column heads left this list on 2026-09-23: they are set in
   footer.ejs as quiet sentence-case heads, apple.com style. */
body .sg-section-label, body .sf-title, body .mt-cap-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--tt-text-muted, #A8A29B);
}

/* ── Prose ────────────────────────────────────────────────────────────── */
/* 13.44px at 1.5 was the dominant reading size. Sentences want 15px at 1.6 and
   a measure that stops around 72 characters. Scoped to the content wrappers by
   name, so no data cell inherits it. */

body .wt-wrap p, body .gh-wrap p, body .un-wrap p, body .pt-page p,
body .aiwrap p, body .mo-wrap p, body .sg-wrap p, body .doc-hero p,
body .cl-faq p, body .lwp-sub, body .ai-sub,
body .wt-hero .wt-sub, body .gh-head p {
    font-size: 15px;
    line-height: 1.62;
    color: var(--tt-text-muted, #A8A29B);
}
body .wt-wrap p, body .gh-wrap p, body .un-wrap p, body .pt-page p,
body .aiwrap p, body .doc-hero p, body .wt-hero .wt-sub {
    max-width: 72ch;
}

/* ── Rhythm: more space above a heading than below it ─────────────────── */

body .wt-section + .wt-section, body .asec + .asec { margin-top: 52px; }
body .wt-section h2, body .pt-method h2, body .cl-faq h2 { margin: 0 0 18px; }
body .doc-hero__h1, body .ph-title, body .lwp-h1, body .ai-h2,
body .cl-slim__title, body .wt-hero h1, body .gh-head h1,
body .un-wrap h1, body .pt-page h1 { margin-bottom: 14px; }

/* ── Panels: a radius that matches the scale ──────────────────────────── */
/* 4px and 6px on a panel that holds a 42px headline is a mismatch you feel
   before you can name it. Controls stay at 6, panels go to 14, pills stay
   pills. The reference's panel radii are 24 and 32; 14 is the step that suits
   a terminal without pretending to be a marketing page. */

body .gh-card, body .doc-tool, body .doc-q, body .sit-card,
body .wt-chartbox, body .cap, body .grid-panel, body .trading-panel,
body .cl-faq, body .pt-method, body .asec, body .wt-panel {
    border-radius: 14px;
}

/* ============================================================================
   15. DE-BOXING
   ============================================================================
   Border, fill, radius and shadow each say "separate object". Spent on every
   block at once they say nothing, and the page reads as a pile of containers
   rather than as a page. These are the repeated offenders, measured across the
   coin, guide and account pages.
   ========================================================================= */

/* ── The stat row ─────────────────────────────────────────────────────── */
/* Five identical bordered cards in a row, each holding one number, was the
   page's structure. The numbers were 14.4px at weight 800 and the labels were
   8px, so the row shouted and said nothing. It is one strip now, divided by
   the house hairline, exactly like the terminal's own summary strip: the
   numbers carry real size and the labels read as labels. */

body .whale-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 22px;
    border-top: 1px solid var(--clr-hair);
    border-bottom: 1px solid var(--clr-hair);
}
body .whale-stat-card {
    background: none;
    border: 0;
    border-right: 1px solid var(--clr-hair);
    border-radius: 0;
    padding: 16px 20px;
    text-align: left;
    flex: 1 1 140px;
    min-width: 140px;
}
body .whale-stat-card:last-child { border-right: 0; }
body .whale-stat-value {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    display: block;
}
body .whale-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tt-text-dim-text, #8A847C);
    margin-top: 6px;
}

/* ── Coloured panel containers ────────────────────────────────────────── */
/* The record card was a green-bordered, green-tinted box. Green means "up" on
   every other surface here, and a container is not a direction. The colour
   goes back to the dots and the eyebrow, where it is data. */

body .fc-card {
    border: 1px solid var(--clr-hair);
    background: rgba(244, 241, 236, 0.022);
}

/* ── Stragglers the page stylesheets set more specifically ───────────── */

body .wt-wrap h2, body .wt-wrap > h2 {
    font-family: var(--clr-display);
    font-size: 24px;
    font-weight: var(--clr-w-heading);
    letter-spacing: -0.018em;
    line-height: 1.22;
}

/* The chart head is a micro-label that happens to be marked up as an h2. The
   section-heading rule above caught it and set it to 24px, which is a heading
   sitting on top of a chart it is only naming. It goes back to being a label. */
body .wt-charthead h2 {
    font-family: var(--tt-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    color: var(--tt-text-dim-text, #8A847C);
}

/* ============================================================================
   16. ONE BOUNDARY PER OBJECT
   ============================================================================
   Measured against the four sites the owner named, on the same probe:

     site            display        prose        elements with a border
     dimension.dev   72px w500      16px/1.50    22 / 1138   =  1.9%
     apple.com       56px w600      12px/1.33    10 /  892   =  1.1%
     cursor.com      72px w400      16px/1.50    96 / 1936   =  5.0%
     framer.com      54px w500      13px/1.60    20 / 2800   =  0.7%

     coinlobster     42px w600      15px/1.62    12% to 34%

   They disagree about radius and about palette. They agree on two things, and
   both are absolute: display type is weight 400-600 with leading near 1.0, and
   almost nothing carries an outline. CoinLobster was running three to seventeen
   times their border density, and that, not colour, is what "not as polished"
   was pointing at.

   The rule this block applies, which is what those four are all doing:

     an object gets a FILL or an OUTLINE, never both;
     an outline with nothing behind it becomes a fill;
     a single-side hairline is a RULE, not a box, and stays;
     a table cell keeps its bottom hairline and loses the other three.

   Everything below was picked from the measured offender list, not guessed.
   ========================================================================= */

:root {
    --clr-surface-1: rgba(244, 241, 236, 0.035);   /* chips, tags, controls */
    --clr-surface-2: rgba(244, 241, 236, 0.055);   /* cards, panels */
    --clr-surface-3: rgba(244, 241, 236, 0.075);   /* hover */
}

/* ── Chips and tags: the fill is the object ───────────────────────────── */

body .doc-chip, body .doc-tool__name, body .about-chip, body .exchange-tag,
body .mo-wlead-chip, body .acct-rail-tag, body .cw-history-chip {
    border: 0;
    background: var(--clr-surface-1);
}
body .doc-chip:hover, body .about-chip:hover, body .mo-wlead-chip:hover,
body .cw-history-chip:hover {
    background: var(--clr-surface-3);
}

/* ── Cards and panels ─────────────────────────────────────────────────── */

body .doc-q, body .doc-tool, body .gh-card, body .cl-faq-item,
body .aiprice__c, body .cap, body .notif-select,
body .account-btn:not(.account-btn-primary):not(.account-btn-success):not(.account-btn-danger),
body .ai-btn:not(.ai-btn--primary) {
    border: 0;
    background: var(--clr-surface-2);
}
body .gh-card:hover, body .doc-q:hover, body .doc-tool:hover,
body .account-btn:not(.account-btn-primary):not(.account-btn-success):not(.account-btn-danger):hover,
body .ai-btn:not(.ai-btn--primary):hover {
    background: var(--clr-surface-3);
}
/* The plan cards are the page's subject, so they keep a real surface rather
   than a tint, and the featured one keeps its accent edge because that edge is
   information (it says which plan is being recommended). */
body .aiprice__c { background: #161514; }
body .aiprice__c.is-featured, body .aiprice__c--featured {
    border: 1px solid rgba(238, 90, 44, 0.42);
}

/* ── Accent-tinted controls keep the tint, lose the outline ──────────── */

body .sg-arm, body .ptt-follow, body .pt-trade {
    border: 0;
    background: rgba(238, 90, 44, 0.13);
}
body .pt-trade { background: rgba(216, 163, 58, 0.13); }

/* ── Table cells: a bottom hairline is a row rule, the rest is a box ─── */

body .ptt-rank, body .ptt-name-cell, body .ptt-pnlcell, body .ptt-up,
body .ptt-dim, body .ptt-holding, body .ptt-actions {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--clr-hair);
    border-radius: 0;
}

/* ── The vendor theme's own primary ──────────────────────────────────── */
/* app.min.css ships an indigo #727CF5 as --ct-primary and --ct-link-color,
   which is a third accent nobody chose, on a site whose accent is the orange. */

:root {
    --ct-primary: #EE5A2C;
    --ct-link-color: #FF8A5C;
    --ct-link-hover-color: #F58150;
    --ct-indigo: #EE5A2C;
}

/* ── Two display headings the page stylesheets out-specified ─────────── */
/* lw-pages.css scopes its rule as body[data-world="light"] .lwp-h1, which is
   one attribute more specific than this layer was, so the pricing hero stayed
   at weight 800. The account page titles itself with an h4. */

body[data-world] .lwp-h1 {
    font-family: var(--clr-display);
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: var(--clr-w-display);
    letter-spacing: -0.028em;
    line-height: 1.04;
}
body .whale-header h4 {
    font-family: var(--clr-display);
    font-size: clamp(28px, 2.6vw, 34px);
    font-weight: var(--clr-w-display);
    letter-spacing: -0.024em;
    line-height: 1.1;
}

/* ============================================================================
   17. THE FEED ROW JOINS THE CARD LANGUAGE
   ============================================================================
   The owner has been pointing at /crypto-whales all along, which is where the
   WHALES nav item goes. Two rounds of row work landed on /whale-trades, the
   coin index, which is a different page. This is the one they meant.

   It was the ruled row: transparent, one hairline, a coloured 2px source stripe
   down the left of every row. Beside /proven-traders, whose .pt-move is a
   filled plane with a radius and air around it, it read heavier and busier.
   Same language now: same fill, radius, gap, padding and hover, so the two
   tables in this product stop disagreeing about what a row is.

   The source stripe goes. It was a third statement of the venue, which is
   already a named chip with its own colour key in the WHERE column.
   ========================================================================= */

body .cw-feed, body #cw-trades-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 2px;
    padding-right: 2px;
}
body .cw-row {
    background: var(--tt-panel-solid, #121111);
    border: 1px solid rgba(244, 241, 236, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
}
body .cw-row:hover {
    background: #161514;
    border-color: rgba(244, 241, 236, 0.2);
}
/* The venue is already a named chip with a colour key in its own column. */
body .cw-row::before { display: none; }

/* The header is not a card: it is the column names, so it keeps its rule and
   sits above the stack rather than floating in it. */
body .cw-thead {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--clr-hair);
    border-radius: 0;
    /* 15px, not 14: the rows carry a 1px border inside the same 14px padding,
       so a 14px header sits 3px left of the column it names. Measured. */
    padding-left: 17px;
    padding-right: 17px;
    margin-bottom: 4px;
}

/* ============================================================================
   18. ONE CONTROL REGION, THEN THE ROWS
   ============================================================================
   Measured on /crypto-whales: NINE bordered elements stacked in the 350px
   above the first data row, including .cwfb-facets, a bordered block inside
   the bordered .cwfb. Three of them were full four-sided boxes: the filter bar,
   the tab deck, and the wrapper around the feed. A fourth object, .cw-feed,
   laid a dark tint behind rows that are now cards in their own right, so the
   rows sat in a box, inside a box, on the page.

   The references put one control surface above the content and then let the
   content be the content. So: .cwfb, .cwfb-facets, .cw-strip and .cw-tabs are
   one panel now, divided by hairlines and closed by the tab deck, and the rows
   float on the page ground below it. Three boxes become one.
   ========================================================================= */

/* The tab deck closes the control region instead of being its own box. */
body .cw-tabs {
    border-top: 1px solid var(--clr-hair);
    border-right: 1px solid var(--tt-border, rgba(244, 241, 236, 0.1));
    border-bottom: 1px solid var(--tt-border, rgba(244, 241, 236, 0.1));
    border-left: 1px solid var(--tt-border, rgba(244, 241, 236, 0.1));
    border-radius: 0 0 14px 14px;
}

/* The rows are the objects. They do not also need a container drawn round them
   and a tint laid under them. */
body .cw-feedwrap {
    border: 0;
    border-radius: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
}
body .cw-feed { background: none; }

/* The column names keep their rule. The two teaching notes under them are
   notes, not table sections, so they lose theirs and take the space instead. */
body .cw-legend, body .cw-marks {
    border: 0;
    padding-top: 6px;
    padding-bottom: 2px;
}
body .cw-marks { padding-bottom: 8px; }

/* The tab deck's own gradient and drop shadow made it read as a separate
   object even once its corners joined the region above. Inside one panel it
   needs neither: the hairline above it is the division. */
body .cw-tabs {
    background: none;
    box-shadow: none;
}
/* An id selector in the page's own <style> beats a class one here, so the tint
   behind the rows needs the id to be cleared. */
body #cw-trades-body { background: none; }