:root{color-scheme:light dark;--ink:#111;--dim:#666;--line:#e4e4e4;--bg:#fff;--gain:#0a7f4f;--loss:#b3261e;--fault:#8a5a00}
@media(prefers-color-scheme:dark){:root{--ink:#eee;--dim:#999;--line:#2a2a2a;--bg:#111;--gain:#4ade80;--loss:#f87171;--fault:#d9a441}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,sans-serif}
main{max-width:44rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}
h1{font-size:1.6rem;letter-spacing:-.02em;margin:0 0 .5rem}h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:2rem 0 .6rem}
code{font:.9em ui-monospace,monospace;color:var(--dim);overflow-wrap:anywhere}
.lede{color:var(--dim);margin:0 0 1.5rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:1.25rem 0}
.stat{background:var(--bg);padding:.75rem .9rem;display:flex;flex-direction:column;gap:.15rem}
.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.stat-value{font-size:1.15rem;font-variant-numeric:tabular-nums}
.stat-note{font-size:.72rem;color:var(--dim);margin-top:.2rem}
.gain{color:var(--gain)}.loss{color:var(--loss)}
.absent,.absent-note,.note,.empty,.unrated .note{color:var(--dim)}
.absent{cursor:help;border-bottom:1px dotted var(--dim)}
.absent-note,.note,.empty{font-size:.88rem;margin:.75rem 0}
.fault{color:var(--fault);border-left:2px solid var(--fault);padding-left:.8rem;margin:1rem 0}
.rules{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.5rem}
.rules li{font-size:.9rem}.rules strong{display:inline-block;min-width:9rem}
.rules span{color:var(--dim)}
button{font:inherit;padding:.55rem 1rem;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--gain);outline-offset:2px}
.action-hint,.claim-foot,.disclosure,.window-note,.resolved{font-size:.8rem;color:var(--dim)}
.disclosure{border-top:1px solid var(--line);padding-top:1rem;margin-top:2.5rem}
.component{display:flex;gap:.75rem;align-items:baseline;padding:.4rem 0;border-bottom:1px solid var(--line)}
.component--drifted .weight--current{color:var(--fault)}
.weight{font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums}
.standings{padding-left:0;list-style:none}.standings li{display:flex;gap:.75rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--line)}
.rank{font-variant-numeric:tabular-nums;color:var(--dim);min-width:1.5rem}
.holding-section{border-top:1px solid var(--line);padding-top:.5rem}
.site-foot{max-width:44rem;margin:0 auto;padding:1rem 1.25rem 3rem;font-size:.78rem;color:var(--dim)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Every state that could not be read carries the same amber, everywhere. A
   reader learns the cue once; a page that drops it here is telling them this
   particular absence is ordinary. */
.holding--unread{color:var(--fault);border-bottom:1px dotted var(--fault);cursor:help}
.holding--none{color:var(--dim)}
/* Who supplied a name, set apart from the name. At the same weight it reads as
   part of the name, and the whole point of the mark is that it is not. */
.identity{display:inline-flex;gap:.45rem;align-items:baseline;flex-wrap:wrap}
.identity-name{font-weight:600}
.identity-mark{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);border:1px solid var(--line);padding:.05rem .35rem;cursor:help}
/* A refusal replaces a control. It is the considered answer, not an error. */
.refusal{border-left:2px solid var(--line);padding-left:.8rem;color:var(--dim);margin:1.25rem 0}
.action{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin:1.25rem 0}
.market-head{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem}
.market-head h1{margin:0}
.portrait{border-radius:2px;flex:none}
.monogram{display:grid;place-items:center;background:var(--line);color:var(--dim);font-size:.9rem;flex:none}
.premium{font-size:.88rem;color:var(--dim);margin:1rem 0}
.premium--inactive{font-style:italic}
.curator,.units{color:var(--dim);font-size:.9rem;margin:0 0 1rem}
.units{font-variant-numeric:tabular-nums;color:var(--ink)}
.composition ul,.unrated ul{list-style:none;padding:0;margin:0}
.claim{border-top:1px solid var(--line);padding-top:.5rem}
.missing h1,.fault h1{font-size:1.2rem}
.holding{font-variant-numeric:tabular-nums}
/* The four ledgers, each its own box because each fails on its own. */
.holding-section--positions,.holding-section--baskets,.holding-section--scout,.holding-section--escrow{margin-top:1.5rem}
/* Sits where a total would. Set apart so it reads as a statement rather than
   as a caption on a number that is not there. */
.total-note{border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem}
/* ---- calls -------------------------------------------------------------- */
.call-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.call-card{border:1px solid var(--line);padding:1rem;display:grid;gap:.6rem}
.call-card header{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.call-card blockquote{margin:0;padding-left:.8rem;border-left:2px solid var(--line);color:var(--dim);font-size:.92rem}
.source{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.handle{font-weight:600}
.asset{font-family:ui-monospace,Menlo,monospace;font-size:1.1rem;margin:0}

/* Every verification state gets its own ink, and the weakest is the one that
   must not look like the strongest. A card carrying "source only" in the same
   colour as "trade verified" is the failure the four states exist to prevent. */
.verification{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;padding:.1rem .4rem;border:1px solid var(--line);cursor:help}
.verification--source_attached{color:var(--fault);border-color:color-mix(in srgb,var(--fault) 40%,transparent)}
.verification--author_verified{color:var(--fault);border-color:color-mix(in srgb,var(--fault) 40%,transparent)}
.verification--trade_verified{color:var(--gain);border-color:color-mix(in srgb,var(--gain) 40%,transparent)}
.verification--partner_confirmed{color:var(--gain);border-color:color-mix(in srgb,var(--gain) 30%,transparent);font-style:italic}
.verification--bonded{color:var(--gain);border-color:var(--gain)}
.verification--disputed,.verification--invalidated{color:var(--loss);border-color:color-mix(in srgb,var(--loss) 40%,transparent)}
.refused{border-top:1px solid var(--line);margin-top:2rem;padding-top:.5rem}
.refused li{margin:.4rem 0;font-size:.9rem}

/* ---- influence ---------------------------------------------------------- */
.limits{border-left:2px solid var(--fault);padding-left:.9rem}
.limits li{font-size:.92rem;margin:.35rem 0}
.evidence ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
/* The three tiers are drawn differently, per the spec's edge legend. A reader
   should not have to open a tooltip to see that a tree is all circumstantial. */
.edge{padding-left:1.6rem;position:relative;font-size:.92rem}
.edge::before{content:"";position:absolute;left:0;top:.6em;width:1.1rem;border-top:2px solid currentColor}
.edge--solid::before{border-style:solid;color:var(--gain)}
.edge--venue::before{border-style:double;border-top-width:3px;color:var(--gain)}
.edge--dotted::before{border-style:dotted;color:var(--fault)}
.tree-table table{border-collapse:collapse;width:100%;font-size:.88rem}
.tree-table th,.tree-table td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--line)}
.tree-table th{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}

/* ---- earnings ----------------------------------------------------------- */
.period{color:var(--dim);font-size:.9rem;margin:0 0 1rem}
.classification{font-family:ui-monospace,Menlo,monospace;font-size:1.3rem;letter-spacing:.04em;margin:0}
.classification--beat{color:var(--gain)}
.classification--miss{color:var(--loss)}
.classification--inline{color:var(--ink)}
/* Neither good nor bad — a statement about coverage, and coloured as one. */
.classification--verified_period,.classification--incomplete{color:var(--dim)}

.discover,.market,.basket,.portfolio,.scouts,.position,.your-units,.calls,.tree,.earnings{}


:root{
  --rr-bg:#08090A;--rr-bg-rail:#050506;--rr-panel:#101113;--rr-panel-2:#16181B;
  --rr-line:#202225;--rr-line-soft:#17191C;
  --rr-ink:#EDEFEA;--rr-ink-2:#9BA096;--rr-ink-3:#6B7066;
  --rr-acid:#C9F23C;--rr-acid-ink:#0A0C05;--rr-acid-soft:rgba(201,242,60,.12);
  --rr-up:#5DE05C;--rr-down:#FF4D4D;--rr-warn:#F5A524;
  --rr-fomo:#E93D82;--rr-tg:#39C2A6;--rr-partner:#3B9EFF;--rr-matched:#B15CFF;
  --rr-rail:132px;--rr-top:64px;
  --rr-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --rr-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------------------------------------------------------------- structure */
/* The rows are declared, and that is what makes the rail's span work.
   "grid-row:1/-1" resolves -1 against the *explicit* grid only. With no
   grid-template-rows there is no explicit row line to count back from, so the
   span silently collapsed to a single row, the 100vh rail kept row 1 a full
   viewport tall, and main was pushed a whole screen below the fold. Declaring
   the rows — header, then everything else — is what gives -1 something to mean.

   There are three rows and not two because of the preview banner. It carried a
   column and no row, so it was auto-placed: both cells of column 2 were already
   taken by explicitly-placed items, and the banner went into an implicit third
   row *underneath* main. The sentence that says every figure on the page is
   transcribed rather than measured was rendering at the very bottom of a
   4,400px page — present in the markup, and past the point anybody reads. The
   middle row is its own, and collapses to nothing on the pages that have no
   banner because an "auto" row with no items in it is zero high. */
.rr-app{min-height:100vh;background:var(--rr-bg);color:var(--rr-ink);
  font-family:var(--rr-sans);font-size:14px;line-height:1.45;
  display:grid;grid-template-columns:var(--rr-rail) minmax(0,1fr);
  grid-template-rows:var(--rr-top) auto 1fr}
.rr-app *{box-sizing:border-box}
/* A reset must not outrank the components it resets.
   The selector .rr-app a is (0,1,1) and .rr-cta is (0,1,0), so color:inherit
   beat the button's own colour: every acid button rendered as a link drew white
   text on light green. Unreadable, and it hit 41 links across the product,
   Create Wallet and Create Native Call among them. :where() contributes no
   specificity, so this is (0,0,0) and any component class wins.
   (No backticks in this comment: the stylesheet is a template literal.) */
:where(.rr-app a){color:inherit;text-decoration:none}
:where(.rr-app a:hover){text-decoration:underline}
.rr-app :focus-visible{outline:2px solid var(--rr-acid);outline-offset:2px}

/* The rail spans every row, and that is load-bearing.
   Without "grid-row:1/-1" it takes row 1 alone, and because it is 100vh tall it
   makes row 1 a full viewport high. The header shares that row and is 64px, so
   "main" lands in row 2 - one whole screen below the fold. The page looked
   completely empty until you scrolled, which is how it was reported. */
.rr-rail{background:var(--rr-bg-rail);border-right:1px solid var(--rr-line-soft);
  grid-row:1/-1;
  display:flex;flex-direction:column;gap:4px;padding:18px 10px 14px;position:sticky;top:0;height:100vh}
.rr-rail-logo{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 20px}
/* The header's mark is drawn only where the rail is not. See the phone block. */
.rr-top-brand{display:none}
.rr-rail-mark{width:44px;height:44px;display:block}
.rr-rail-word{font-size:12px;letter-spacing:.22em;color:var(--rr-acid);font-weight:600}
.rr-nav{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.rr-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--rr-ink-2);font-size:13.5px}
.rr-nav-item:hover{background:var(--rr-panel);color:var(--rr-ink);text-decoration:none}
.rr-nav-item--on{background:var(--rr-panel-2);color:var(--rr-ink);
  box-shadow:inset 2px 0 0 var(--rr-acid)}
.rr-nav-item--on .rr-nav-icon{color:var(--rr-acid)}
/* A section that exists in the design and not in the build. Dimmed and not
   clickable, so the rail stays a complete map without promising a page. */
.rr-nav-item--todo{color:var(--rr-ink-3);cursor:help}
.rr-nav-item--todo:hover{background:transparent;color:var(--rr-ink-3)}
.rr-nav-icon{width:18px;height:18px;flex:none;color:var(--rr-ink-3)}
.rr-rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.rr-rail-card{border:1px solid var(--rr-line);border-radius:10px;padding:12px;background:var(--rr-panel)}
.rr-rail-card-title{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--rr-ink-3);margin:0 0 6px}
.rr-rail-card-body{font-size:12px;color:var(--rr-ink-2);margin:0}
.rr-rail-me{display:flex;align-items:center;gap:9px;padding:4px 2px}
.rr-rail-me-name{font-size:12.5px;display:block}
.rr-rail-me-sub{font-size:11px;color:var(--rr-ink-3);display:block}

/* Explicit cell. Auto-placement had to reason about a rail spanning both rows
   and put main in a third, implicit row below the fold; naming the cells means
   there is nothing left to infer. */
.rr-top{grid-column:2;grid-row:1;position:sticky;top:0;z-index:5;height:var(--rr-top);
  display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--rr-bg);
  border-bottom:1px solid var(--rr-line-soft)}
.rr-search{flex:1;max-width:520px;display:flex;align-items:center;gap:9px;
  background:var(--rr-panel);border:1px solid var(--rr-line);border-radius:9px;padding:9px 13px;
  color:var(--rr-ink-3);font-size:13px}
.rr-search-icon{width:16px;height:16px;flex:none}
/* The input carries no border or background of its own: the form is the field,
   and a second box inside the first is what a bare input renders as. */
.rr-search-input{flex:1;min-width:0;background:none;border:0;padding:0;color:var(--rr-ink);
  font:inherit;font-size:13px}
.rr-search-input::placeholder{color:var(--rr-ink-3)}
.rr-search-input:focus{outline:none}
/* The ring goes on the form so it frames the whole field rather than a
   borderless input floating inside it. */
.rr-search:focus-within{border-color:var(--rr-acid)}
/* Safari draws its own clear button and a rounded inset. Both fight the field
   this sits inside. */
.rr-search-input::-webkit-search-decoration,
.rr-search-input::-webkit-search-cancel-button{-webkit-appearance:none}
.rr-mono-link{font-family:var(--rr-mono);color:var(--rr-acid)}
.rr-top-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.rr-top-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.rr-top-link{display:flex;align-items:center;gap:7px;color:var(--rr-ink-2);font-size:13px}
.rr-top-link--todo{color:var(--rr-ink-3);cursor:help}
.rr-badge{background:var(--rr-acid);color:var(--rr-acid-ink);border-radius:999px;
  font-size:10px;font-weight:700;min-width:16px;height:16px;display:inline-grid;place-items:center;padding:0 4px}
.rr-chain{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--rr-ink-2);
  border:1px solid var(--rr-line);border-radius:999px;padding:6px 12px}
.rr-dot{width:7px;height:7px;border-radius:50%;background:var(--rr-up);flex:none}
.rr-cta{background:var(--rr-acid);color:var(--rr-acid-ink);font-weight:600;font-size:13px;
  border:1px solid var(--rr-acid);border-radius:8px;padding:8px 15px;cursor:pointer;font-family:inherit}
.rr-cta--ghost{background:transparent;color:var(--rr-ink);border-color:var(--rr-line)}
.rr-wallet{display:flex;align-items:center;gap:9px;border:1px solid var(--rr-acid);
  border-radius:999px;padding:5px 13px 5px 5px}
.rr-wallet-sum{font-size:13px;display:block}
.rr-wallet-addr{font-size:11px;color:var(--rr-ink-3);font-family:var(--rr-mono);display:block}

/* max-width and margin are reset here, not merely left unset.
   The comment at the top of this file says the namespacing exists so that a
   bare "main{max-width:44rem}" from the document sheet cannot squeeze the
   application into a column. Namespacing does not do that: "main" is an element
   selector and it matches this element too, so the 44rem and the "margin:0
   auto" applied and the whole app rendered 704px wide, centred in a 2428px
   column with empty space either side.
   A class beats an element on specificity, so the override only ever had to be
   written down - it never was, because nothing here set these two at all. */
.rr-main{grid-column:2;grid-row:3;padding:22px 20px 40px;display:flex;flex-direction:column;gap:18px;
  max-width:none;margin:0;width:auto}

/* ------------------------------------------------------------------- panels */
.rr-panel{background:var(--rr-panel);border:1px solid var(--rr-line);border-radius:12px;padding:16px}
.rr-panel-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.rr-panel-title{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--rr-ink);margin:0;font-weight:600}
.rr-panel-more{margin-left:auto;font-size:12px;color:var(--rr-acid)}
.rr-grid{display:grid;gap:14px}
.rr-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rr-grid--hero{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,.95fr)}
@media(max-width:1180px){.rr-grid--3,.rr-grid--hero{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------------------- hero */
.rr-hero-title{font-size:30px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;
  font-weight:800;margin:0 0 14px;text-wrap:balance}
.rr-hero-title em{font-style:normal;color:var(--rr-acid)}
.rr-hero-body{color:var(--rr-ink-2);margin:0 0 18px;max-width:34ch}
.rr-hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.rr-hero-live{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--rr-ink-2)}

/* --------------------------------------------------------------------- bits */
.rr-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--rr-line);border-radius:5px;padding:3px 7px;color:var(--rr-ink-2);
  display:inline-block;white-space:nowrap}
.rr-tag--fomo{color:var(--rr-fomo);border-color:color-mix(in srgb,var(--rr-fomo) 45%,transparent)}
.rr-tag--tg{color:var(--rr-tg);border-color:color-mix(in srgb,var(--rr-tg) 45%,transparent)}
.rr-tag--native{color:var(--rr-acid);border-color:color-mix(in srgb,var(--rr-acid) 45%,transparent)}
.rr-up{color:var(--rr-up)}
.rr-down{color:var(--rr-down)}
.rr-flat{color:var(--rr-ink-2)}
.rr-muted{color:var(--rr-ink-3)}
.rr-num{font-variant-numeric:tabular-nums}

.rr-avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--rr-panel-2);border:1px solid var(--rr-line);color:var(--rr-ink-3);
  font-size:12px;font-weight:600}
.rr-avatar--gen{border-style:dashed}
.rr-avatar--lg{width:56px;height:56px;font-size:17px}

.rr-stats{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rr-line);margin-top:14px;padding-top:12px}
.rr-stat{flex:1 1 90px;padding:0 12px;border-left:1px solid var(--rr-line)}
.rr-stat:first-child{border-left:0;padding-left:0}
.rr-stat-v{font-size:16px;font-variant-numeric:tabular-nums;display:block}
.rr-stat-k{font-size:10.5px;color:var(--rr-ink-3);display:block;margin-top:2px}

/* --------------------------------------------------------------------- tape */
.rr-tape{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:0;margin:0;list-style:none}
.rr-tape-lead{display:flex;align-items:center;gap:8px;padding:12px 16px 12px 0;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rr-ink-2);flex:none}
.rr-tape-item{padding:12px 18px;border-left:1px solid var(--rr-line);flex:none;min-width:0}
.rr-tape-kind{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;display:block}
.rr-tape-body{font-size:12.5px;color:var(--rr-ink-2);display:block;margin-top:3px}
.rr-tape-time{font-size:11px;color:var(--rr-ink-3);display:block;margin-top:2px}

/* -------------------------------------------------------------------- lists */
.rr-tabs{display:flex;gap:6px;margin:0 0 12px;padding:0;list-style:none;flex-wrap:wrap}
.rr-tab{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid transparent;color:var(--rr-ink-2)}
.rr-tab--on{background:var(--rr-acid);color:var(--rr-acid-ink);font-weight:600}
.rr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rr-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--rr-line-soft)}
.rr-row:first-child{border-top:0}
.rr-row-main{min-width:0;flex:1}
.rr-row-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rr-row-sub{font-size:11.5px;color:var(--rr-ink-3);margin-top:2px}
.rr-row-side{text-align:right;flex:none;font-variant-numeric:tabular-nums}
.rr-ticker{font-weight:600}
.rr-handle{color:var(--rr-ink-2);font-size:12.5px}

/* ------------------------------------------------------------------ absence */
/* An empty panel is a sentence, not a blank. It says whose gap it is, because
   "no calls yet" and "we are not connected to the source" are opposite facts
   and only one of them is about the market. */
.rr-empty{border:1px dashed var(--rr-line);border-radius:10px;padding:16px;background:transparent}
.rr-empty-title{font-size:13px;color:var(--rr-ink);margin:0 0 5px;font-weight:600}
.rr-empty-body{font-size:12.5px;color:var(--rr-ink-2);margin:0}
/* An absence caused by us is drawn as a fault, exactly as everywhere else on
   the site, so a reader who has learned the amber once keeps getting it. */
.rr-empty--ours{border-color:color-mix(in srgb,var(--rr-warn) 45%,transparent)}
.rr-empty--ours .rr-empty-title{color:var(--rr-warn)}

/* The design preview says so on every page it renders. A screen full of
   invented figures that does not announce itself is indistinguishable from a
   product claiming them. */
.rr-preview-note{grid-column:2;grid-row:2;display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb,var(--rr-warn) 12%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--rr-warn) 40%,transparent);
  color:var(--rr-warn);font-size:12.5px;padding:9px 20px}
.rr-preview-note strong{font-weight:600}

/* -------------------------------------------------------------- home panels */
.rr-hero{padding:6px 4px}
/* The head is a portrait, a title block and a price pair on one row, and until
   these three lines it could not survive the row being narrow.
   The price pair declared no basis, so it went onto the line at its full
   content width — about 340px of "called at / now / change" — while the title
   block, which has flex:1 and therefore a basis of zero, was left whatever was
   over. In the hero's middle column that was about fifty pixels: "Called by
   @mintcondition on Fomo" set one word per line, and "$GLOOP IS SPREADING"
   could not break at all, so it ran out of its box and printed on top of the
   prices. Two figures overlapping is worse than either being absent, because
   what the reader gets is a third number that is neither.
   A real basis on the title block is what makes the price pair yield first: it
   keeps its place beside the title on a wide row and wraps under it on a narrow
   one, instead of taking the room and leaving none. */
.rr-feature-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.rr-feature-head>.rr-row-main{flex:1 1 220px}
.rr-feature-head>.rr-price-pair{flex:0 1 auto;min-width:0}
.rr-feature-title{font-size:19px;margin:0;text-transform:uppercase;letter-spacing:-.01em;font-weight:700}
.rr-feature-by{font-size:12.5px;color:var(--rr-ink-2);margin:3px 0 8px}
.rr-price-pair{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  border:1px solid var(--rr-line);border-radius:8px;padding:8px 11px;margin-top:10px}
.rr-price-k{font-size:10.5px;color:var(--rr-ink-3);text-transform:uppercase;letter-spacing:.06em}
.rr-price-v{font-size:14px}
.rr-earn-line{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:12px 0 0;
  border:1px solid var(--rr-line);border-radius:8px;padding:9px 11px}
.rr-cta--block{display:block;text-align:center;margin-top:10px;text-decoration:none}
.rr-cta--block:hover{text-decoration:none}

.rr-tape-kind--call{color:var(--rr-fomo)}
.rr-tape-kind--share{color:var(--rr-acid)}
.rr-tape-kind--branch{color:var(--rr-up)}
.rr-tape-kind--rerated{color:var(--rr-acid)}
.rr-tape-kind--reward{color:var(--rr-acid)}

/* --------------------------------------------------------------- confidence */
/* A level, not a percentage. Three inks because there are three tiers of
   evidence, and the weakest must not carry the ink of the strongest. */
.rr-conf{font-size:11px;font-weight:600;letter-spacing:.04em;cursor:help}
.rr-conf--high{color:var(--rr-up)}
.rr-conf--medium{color:var(--rr-partner)}
.rr-conf--low{color:var(--rr-warn)}

/* --------------------------------------------------------------------- tree */
.rr-tree{margin:0}
.rr-tree-svg{width:100%;height:auto;display:block;overflow:visible}
.rr-tree-gens{display:flex;gap:0;list-style:none;margin:12px 0 0;padding:0}
.rr-tree-gen{flex:1;padding:0 10px;border-left:1px solid var(--rr-line);min-width:0}
.rr-tree-gen:first-child{border-left:0;padding-left:0}
.rr-tree-gen-n{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.rr-tree-gen-k{display:block;font-size:10px;color:var(--rr-ink-3);margin-top:2px}
.rr-tree-legend{display:flex;gap:16px;list-style:none;margin:10px 0 0;padding:0;flex-wrap:wrap}
.rr-tree-legend-item{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--rr-ink-2)}
.rr-tree-key{width:20px;height:0;border-top-width:2px;display:inline-block;flex:none}
.rr-tree-key--direct{border-top-style:solid;border-top-color:var(--rr-acid)}
.rr-tree-key--partner{border-top-style:dashed;border-top-color:var(--rr-partner)}
.rr-tree-key--matched{border-top-style:dotted;border-top-color:var(--rr-matched)}

.rr-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--rr-line);
  padding-top:14px;margin-top:4px;color:var(--rr-ink-2);font-size:12.5px}
.rr-foot-note{margin-left:auto;color:var(--rr-ink-3)}

/* --------------------------------------------------------------- page heads */
.rr-head{display:flex;flex-direction:column;gap:4px}
.rr-head-title{font-size:30px;text-transform:uppercase;font-weight:800;letter-spacing:-.01em;margin:0}
.rr-head-lede{color:var(--rr-ink-2);margin:0 0 6px}
.rr-utabs{display:flex;gap:22px;border-bottom:1px solid var(--rr-line);margin-top:6px;flex-wrap:wrap}
.rr-utab{padding:9px 0;font-size:13.5px;color:var(--rr-ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.rr-utab:hover{color:var(--rr-ink);text-decoration:none}
.rr-utab--on{color:var(--rr-ink);border-bottom-color:var(--rr-acid)}
.rr-utab--todo,.rr-tab--todo{color:var(--rr-ink-3);cursor:help}
.rr-flexrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rr-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rr-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rr-grid--main{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.rr-grid--wide{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
@media(max-width:1180px){.rr-grid--2,.rr-grid--4,.rr-grid--main,.rr-grid--wide{grid-template-columns:minmax(0,1fr)}}

/* -------------------------------------------------------------------- table */
/* Wide tables scroll inside their own box. A page body that scrolls sideways
   hides the right-hand columns, which in these tables are the figures. */
.rr-tablewrap{overflow-x:auto}
.rr-table{width:100%;border-collapse:collapse;font-size:13px}
.rr-th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--rr-ink-3);
  font-weight:500;padding:0 10px 8px;white-space:nowrap}
.rr-th--num{text-align:right}
.rr-tr{border-top:1px solid var(--rr-line-soft)}
.rr-td{padding:10px;vertical-align:middle}
.rr-td--num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* --------------------------------------------------------------------- bars */
.rr-bar{display:flex;align-items:center;gap:10px;padding:5px 0}
.rr-bar-label{font-size:12.5px;color:var(--rr-ink-2);flex:1;min-width:0}
.rr-bar-track{width:120px;height:5px;border-radius:3px;background:var(--rr-line);flex:none;overflow:hidden}
.rr-bar-fill{display:block;height:100%;border-radius:3px}
.rr-bar-fill--acid{background:var(--rr-acid)}
.rr-bar-fill--up{background:var(--rr-up)}
.rr-bar-fill--down{background:var(--rr-down)}
.rr-bar-fill--warn{background:var(--rr-warn)}
.rr-bar-val{font-size:12.5px;width:42px;text-align:right;flex:none}

/* -------------------------------------------------------------------- donut */
.rr-donut{margin:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rr-donut-svg{width:104px;height:104px;flex:none}
.rr-donut-mid{fill:var(--rr-ink);font-size:22px;font-weight:700}
.rr-donut-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.rr-donut-key-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--rr-ink-2)}
.rr-donut-swatch{width:9px;height:9px;border-radius:2px;flex:none}
.rr-donut-pct{margin-left:auto;color:var(--rr-ink);font-variant-numeric:tabular-nums}
.rr-donut-cap{font-size:11.5px;color:var(--rr-ink-3);width:100%}
.rr-note{font-size:11.5px;color:var(--rr-ink-3);margin:6px 0 0;width:100%}

/* ------------------------------------------------------------------- charts */
.rr-spark{width:96px;height:26px;flex:none}
.rr-chart{margin:0}
.rr-chart-svg{width:100%;height:auto;display:block}
.rr-axis{fill:var(--rr-ink-3);font-size:9px}
.rr-chart-key{display:flex;gap:16px;list-style:none;margin:8px 0 0;padding:0;flex-wrap:wrap}
.rr-chart-key-item{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--rr-ink-2)}
.rr-chart-swatch{width:12px;height:3px;border-radius:2px;flex:none}
.rr-chart-swatch--band{background:var(--rr-down);opacity:.45;height:9px}

/* ----------------------------------------------------------------- controls */
/* Shown as stored, and not operable. A switch that flips and saves nothing is
   worse than one that says it does not, so these carry the reason. */
.rr-toggle{width:34px;height:19px;border-radius:999px;background:var(--rr-line);display:inline-block;
  position:relative;flex:none;cursor:help}
.rr-toggle--on{background:var(--rr-acid)}
.rr-toggle-knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--rr-ink)}
.rr-toggle--on .rr-toggle-knob{left:auto;right:2px;background:var(--rr-acid-ink)}
.rr-select{border:1px solid var(--rr-line);border-radius:7px;padding:5px 11px;font-size:12.5px;
  color:var(--rr-ink-2);display:inline-block;cursor:help}
.rr-field{display:flex;flex-direction:column;gap:2px;padding:9px 0}
.rr-field-label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--rr-ink-3)}
.rr-field-value{font-size:14px}
.rr-field-hint{font-size:11.5px;color:var(--rr-ink-3)}
.rr-kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0;font-size:12.5px}
.rr-kv-k{color:var(--rr-ink-3)}
.rr-kv-v{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.rr-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rr-check-item{display:flex;gap:9px;font-size:12.5px;color:var(--rr-ink-2);align-items:flex-start}
.rr-check-mark{flex:none;font-weight:700}
.rr-check-item--ok .rr-check-mark{color:var(--rr-up)}
/* Not a dim tick. The two lists in these mockups mean opposite things, and a
   ✗ that is only a paler ✓ is read as a weaker yes. */
.rr-check-item--no .rr-check-mark{color:var(--rr-down)}

.rr-steps{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.rr-step{display:flex;align-items:center;gap:8px;padding:0 18px 0 0;position:relative;font-size:12.5px}
.rr-step::after{content:"";flex:1;min-width:26px;border-top:1px dashed var(--rr-line);margin-left:8px}
.rr-step:last-child::after{display:none}
.rr-step-n{width:22px;height:22px;border-radius:50%;border:1px solid var(--rr-line);display:grid;
  place-items:center;font-size:11px;flex:none;color:var(--rr-ink-3)}
.rr-step-label{color:var(--rr-ink-2)}
.rr-step-note{font-size:10.5px;color:var(--rr-ink-3)}
.rr-step--done .rr-step-n{border-color:var(--rr-acid);color:var(--rr-acid)}
.rr-step--now .rr-step-n{background:var(--rr-acid);border-color:var(--rr-acid);color:var(--rr-acid-ink);font-weight:700}
.rr-step--now .rr-step-label{color:var(--rr-acid)}
.rr-step--next .rr-step-label{color:var(--rr-ink-3)}

/* ----------------------------------------------------------------- overlays */
/* Rendered inline rather than floating: this build serves static HTML, so a
   modal that cannot be dismissed would trap the page. It reads as the panel it
   is, in the place the flow reaches it. */
.rr-modalwrap{display:flex;justify-content:center;padding:6px 0}
.rr-modal{background:var(--rr-panel);border:1px solid var(--rr-line);border-radius:14px;padding:22px;
  width:100%;max-width:620px}
.rr-modal--wide{max-width:100%}
.rr-modal-head{text-align:center;margin-bottom:16px}
.rr-modal-title{font-size:20px;margin:0;font-weight:700}
.rr-modal-sub{font-size:12.5px;color:var(--rr-ink-2);margin:5px 0 0}
.rr-drawer{background:var(--rr-panel);border:1px solid var(--rr-line);border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:12px}
.rr-drawer-title{font-size:15px;margin:0;font-weight:700}
.rr-rule{font-size:12px;color:var(--rr-ink-2);border-top:1px solid var(--rr-line);padding-top:12px;margin:4px 0 0}

/* ------------------------------------------------------------------- forms */
/* The first controls in this product that do anything. Everything above this
   line renders a measurement; these accept one. */
.rr-form{display:flex;flex-direction:column;gap:12px;margin:0}
.rr-form--inline{flex-direction:row;align-items:center;gap:8px}
.rr-field__label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--rr-ink-3)}
.rr-field__input{background:var(--rr-bg-2);border:1px solid var(--rr-line);border-radius:6px;
  color:var(--rr-ink-1);font:inherit;font-size:13.5px;padding:9px 11px;width:100%;
  /* A 256-bit hex signature is the longest thing anybody pastes here. */
  font-variant-numeric:tabular-nums}
.rr-field__input:focus-visible{outline:2px solid var(--rr-acid);outline-offset:1px;border-color:transparent}
.rr-field__hint{font-size:11.5px;color:var(--rr-ink-3);line-height:1.45}
.rr-field__input--area{min-height:76px;resize:vertical;line-height:1.55;font-family:inherit}
.rr-fieldrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.rr-choice{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rr-choice__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.rr-choice__opt{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'radio title' 'radio note';
  gap:2px 10px;align-items:start;border:1px solid var(--rr-line);border-radius:8px;padding:11px 13px;cursor:pointer}
.rr-choice__opt:hover{border-color:var(--rr-acid)}
.rr-choice__opt input{grid-area:radio;accent-color:var(--rr-acid);margin-top:2px}
.rr-choice__opt:has(input:checked){border-color:var(--rr-acid);background:var(--rr-acid-soft)}
.rr-choice__opt input:focus-visible{outline:2px solid var(--rr-acid);outline-offset:2px}
.rr-choice__title{grid-area:title;font-size:13px}
.rr-choice__note{grid-area:note;font-size:11.5px;color:var(--rr-ink-3);line-height:1.4}
.rr-newcall{display:flex;flex-direction:column;gap:14px}
.rr-newcall .rr-form{gap:14px}
.rr-btn{font:inherit;font-size:13px;font-weight:500;border-radius:6px;padding:9px 15px;
  border:1px solid transparent;cursor:pointer;align-self:flex-start}
.rr-btn--primary{background:var(--rr-acid);color:#0b0d0c}
.rr-btn--quiet{background:transparent;color:var(--rr-ink-2);border-color:var(--rr-line)}
.rr-btn:focus-visible{outline:2px solid var(--rr-acid);outline-offset:2px}
/* The message to sign. Wraps rather than scrolling: somebody has to select all
   of it, and a horizontally-scrolling box is where they miss the last line. */
.rr-pre{background:var(--rr-bg-2);border:1px solid var(--rr-line);border-radius:6px;
  padding:12px;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-all;
  color:var(--rr-ink-2);margin:0 0 12px;overflow-x:auto}

/* -------------------------------------------------------------------- calls */
.rr-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.rr-actions{margin:2px 0 4px}
.rr-sub{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--rr-ink-3);margin:14px 0 8px;font-weight:500}
.rr-body{font-size:13px;color:var(--rr-ink-2);margin:0 0 10px}
.rr-bullets{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:5px}
.rr-bullet{font-size:12.5px;color:var(--rr-ink-2);padding-left:14px;position:relative}
.rr-bullet::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--rr-acid)}
.rr-crumb{font-size:12px;color:var(--rr-ink-3);margin:0}
.rr-cellstack{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.rr-code{font-family:var(--rr-mono);font-size:11.5px;color:var(--rr-ink-2)}
.rr-cta--sm{padding:5px 11px;font-size:12px}
.rr-draftline{display:flex;align-items:center;gap:9px;font-size:12.5px;margin-top:10px}
.rr-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rr-legend-item{display:flex;flex-direction:column;gap:3px;font-size:11.5px}

/* The four verification tiers. Every one has its own ink, and the two that
   sound alike — author verified ("they said it was them") and trade verified
   ("the chain shows the trade") — are the pair that must not match, because a
   reader who conflates them has been misled by the interface rather than by
   the data. */
.rr-verify{display:inline-flex;gap:5px;flex-wrap:wrap}
.rr-vtag{font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--rr-line);border-radius:5px;padding:2px 6px;white-space:nowrap;cursor:help}
.rr-vtag--source_attached{color:var(--rr-warn);border-color:color-mix(in srgb,var(--rr-warn) 45%,transparent)}
.rr-vtag--author_verified{color:var(--rr-partner);border-color:color-mix(in srgb,var(--rr-partner) 45%,transparent)}
.rr-vtag--trade_verified{color:var(--rr-up);border-color:color-mix(in srgb,var(--rr-up) 45%,transparent)}
.rr-vtag--bonded{color:var(--rr-acid);border-color:var(--rr-acid)}
.rr-vtag--direct{color:var(--rr-acid);border-color:color-mix(in srgb,var(--rr-acid) 45%,transparent)}
.rr-vtag--partner{color:var(--rr-partner);border-color:color-mix(in srgb,var(--rr-partner) 45%,transparent)}
.rr-vtag--matched{color:var(--rr-matched);border-color:color-mix(in srgb,var(--rr-matched) 45%,transparent)}

.rr-status{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.rr-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.rr-status--active{color:var(--rr-up)}
.rr-status--settled{color:var(--rr-ink-2)}
.rr-status--awaitingsettlement{color:var(--rr-warn)}
.rr-status--justanchored{color:var(--rr-partner)}

/* Traders by return band. Every band keeps its label even at zero width, so a
   call where everybody lost cannot render as a shorter, gentler bar. */
.rr-bands{margin:0 0 6px}
.rr-bands-bar{display:flex;height:12px;border-radius:4px;overflow:hidden;background:var(--rr-line)}
.rr-band{display:block;height:100%}
.rr-band--bad{background:var(--rr-down)}
.rr-band--poor{background:var(--rr-warn)}
.rr-band--flat{background:var(--rr-ink-3)}
.rr-band--good{background:color-mix(in srgb,var(--rr-up) 70%,black)}
.rr-band--great{background:var(--rr-up)}
.rr-bands-key{display:flex;list-style:none;margin:7px 0 0;padding:0;gap:0}
.rr-bands-key-item{flex:1;display:flex;flex-direction:column;gap:1px;font-size:10.5px;text-align:center}

/* ----------------------------------------------------------------- timeline */
.rr-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rr-tl-item{display:flex;gap:12px;align-items:baseline;padding:8px 0 8px 16px;position:relative;font-size:12.5px}
.rr-tl-item::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;
  background:var(--rr-panel);border:2px solid var(--rr-ink-3)}
.rr-tl-item::after{content:"";position:absolute;left:3px;top:21px;bottom:-8px;width:2px;background:var(--rr-line)}
.rr-tl-item:last-child::after{display:none}
.rr-tl-time{color:var(--rr-ink-3);flex:none;width:52px}
.rr-tl-what{color:var(--rr-ink-2)}
.rr-tl-item--source::before{border-color:var(--rr-fomo)}
.rr-tl-item--anchor::before{border-color:var(--rr-acid)}
.rr-tl-item--trade::before{border-color:var(--rr-partner)}
.rr-tl-item--traders::before{border-color:var(--rr-matched)}
/* A correction is drawn as an event, not as a warning banner: it happened, it
   is dated, and the history before it still stands. */
.rr-tl-item--integrity::before{border-color:var(--rr-down)}
.rr-tl-item--integrity .rr-tl-what{color:var(--rr-down)}
.rr-tl-item--update::before{border-color:var(--rr-up)}
.rr-timeline--full .rr-tl-item{padding:12px 0 12px 16px;font-size:13.5px}

/* ------------------------------------------------------ traders & influence */
.rr-sharechip{display:flex;align-items:center;gap:10px;border:1px solid var(--rr-line);
  border-radius:10px;padding:10px 13px;flex-wrap:wrap}
.rr-bignum{font-size:30px;font-weight:700;margin:6px 0}
.rr-bigoutcome{font-size:26px}
.rr-warn-text{color:var(--rr-warn)}

/* -------------------------------------------------------------------- settings */
.rr-setting{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--rr-line-soft)}
.rr-setting:first-child{border-top:0}
.rr-setting--inline{border-top:0;padding:0 16px 0 0}
.rr-setting-label{flex:1;min-width:0;font-size:13px;display:flex;flex-direction:column;gap:2px}
.rr-setting-why{font-size:11px;color:var(--rr-ink-3)}
.rr-locked{font-size:11.5px;color:var(--rr-ink-3);border:1px solid var(--rr-line);border-radius:6px;padding:3px 9px}

/* A seeded account's marker. Deliberately not the acid: acid is the brand
   colour and reads as emphasis, and this is a warning about provenance. The
   same amber the design uses for "not connected yet", because it is the same
   kind of statement — something on this page is not what it appears to be. */
.rr-tag--seeded{background:transparent;border:1px dashed var(--rr-warn);color:var(--rr-warn)}
.rr-seeded-note{border:1px dashed var(--rr-warn);border-radius:10px;padding:12px 14px;
  color:var(--rr-warn);font-size:12.5px;line-height:1.5;margin:0 0 14px}

/* ---------------------------------------------------------------------- signup */
/* A field that is drawn and not wired. It has no input element on purpose: a
   box that accepts a credential and drops it is worse than a box that says it
   is not ready, and it teaches people to type secrets into anything shaped
   like a product. */
.rr-deadfield{display:flex;flex-direction:column;gap:4px;margin:12px 0}
.rr-deadfield-label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--rr-ink-3)}
.rr-deadfield-box{border:1px dashed var(--rr-line);border-radius:8px;padding:11px 13px;color:var(--rr-ink-3);font-size:13px}
.rr-deadfield-note{font-size:11px;color:var(--rr-warn)}
.rr-choices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rr-choice{border:1px solid var(--rr-line);border-radius:11px}
.rr-choice--on{border-color:var(--rr-acid)}
.rr-choice-link{display:flex;flex-direction:column;gap:4px;padding:15px 17px}
.rr-choice-link:hover{text-decoration:none}
.rr-choice-title{font-size:15px;font-weight:600}
.rr-choice--on .rr-choice-title{color:var(--rr-acid)}
.rr-choice-body{font-size:12.5px;color:var(--rr-ink-2)}

/* ------------------------------------------------------------------ narrow */
/* The frame giving way, in the order it can afford to.
 *
 * There was one breakpoint on this sheet and it reflowed the panel grids only.
 * The frame itself never moved, so a phone was served the desktop chrome
 * unchanged: a 132px rail beside a 390px viewport, which is 34% of the screen
 * spent on navigation and leaves main 258px — 218px once its own padding is
 * taken — and a header that cannot wrap, whose contents measured 734px wide and
 * dragged the whole page into a sideways scroll with the wallet, the chain and
 * half the figures off the right edge. Measured in headless Chrome at 390, 768
 * and 1440; the numbers above are what it read before these blocks existed.
 *
 * The panel-grid breakpoint stays at 1180px where it was, because it is about
 * how many columns of content fit and that is a different question from where
 * the furniture goes. */

/* Tablet, and the narrow end of a laptop. Nothing changes shape here — the rail
   and the search field just stop holding room that the content needs more than
   they do. The rail is still a rail because at these widths main is still wider
   than a comfortable measure without it. */
@media(max-width:1040px){
  :root{--rr-rail:112px}
  .rr-rail{padding:16px 8px 12px}
  .rr-nav-item{font-size:12.5px;padding:10px 9px;gap:8px}
  .rr-search{max-width:320px}
  .rr-top{gap:10px;padding:0 14px}
  .rr-top-actions{gap:12px}
  .rr-preview-note{padding:9px 14px}
  .rr-main{padding:18px 14px 32px}
}

/* Below this a sidebar is the wrong shape for the screen, so it stops being
   one. The rail leaves the grid — fixed, not a fourth row — and the grid
   collapses to the single column underneath it.
   Fixed rather than scrolling with the page because on a phone this bar is the
   only route to the other five sections — the header gives up its stickiness
   further down this block. A nav that scrolls away is not navigation.
   The explicit cells have to be re-pointed at column 1: the header, the banner
   and main all name column 2, and in a one-column grid naming column 2 does not
   fall back to the column that exists, it *creates* an implicit second one and
   puts them in it, leaving the page a blank left-hand strip. */
@media(max-width:860px){
  /* The header row becomes "auto" as well, and that is not cosmetic. A row
     pinned to 64px does not grow when the header wraps: the second and third
     lines of it overflow the row and paint straight over the preview banner
     underneath, which is the one sentence on the page saying the figures are
     transcribed rather than measured. */
  .rr-app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
  .rr-top,.rr-preview-note,.rr-main{grid-column:1}

  .rr-rail{position:fixed;inset:auto 0 0 0;z-index:30;width:auto;height:auto;
    flex-direction:row;gap:0;padding:0 2px;
    border-right:0;border-top:1px solid var(--rr-line);
    /* The home indicator on a notched phone owns the bottom strip of the
       screen. Without the inset the labels sit underneath it and the last row
       of the bar cannot be tapped. */
    padding-bottom:env(safe-area-inset-bottom)}

  /* The wordmark and the profile chip are dropped rather than squeezed. Neither
     is a destination the bar loses: the wordmark links home and the chip links
     to the portfolio, and Home and Portfolio are two of the six tabs. */
  .rr-rail-logo{display:none}
  /* ...and the header picks it up, because otherwise the mark is nowhere on a
     phone at all. It sits on the actions row rather than taking one of its
     own: the search field below already costs a row, and a third row of header
     on a 640px-tall screen is most of what is above the fold. */
  .rr-top-brand{display:flex;align-items:center;gap:8px;flex:0 0 auto;text-decoration:none}
  .rr-top-mark{width:26px;height:26px;display:block;flex:0 0 auto}
  .rr-top-word{font-size:12px;letter-spacing:.18em;color:var(--rr-acid);font-weight:600;
    white-space:nowrap}
  .rr-rail-foot>:not(.rr-nav-item){display:none}
  .rr-nav{flex-direction:row;flex:5 1 0;min-width:0}
  .rr-nav>li{flex:1 1 0;min-width:0;display:flex}
  .rr-rail-foot{flex-direction:row;flex:1 1 0;min-width:0;gap:0;margin-top:0}
  .rr-nav-item{flex:1;flex-direction:column;justify-content:center;text-align:center;
    gap:4px;padding:8px 2px;font-size:9.5px;border-radius:0;min-width:0;overflow:hidden}
  /* The marker moves to the edge the bar is attached by. An inset line down the
     left of a horizontal tab reads as a divider between tabs, not as a state. */
  .rr-nav-item--on{background:transparent;box-shadow:inset 0 2px 0 var(--rr-acid)}

  /* Main clears the bar it now shares the viewport with. Without the padding
     the last panel of every page finishes underneath it, and on the pages that
     end in a table the row nobody can see is the most recent one. */
  .rr-main{padding:16px 14px calc(78px + env(safe-area-inset-bottom));gap:14px}

  /* The header stops being sticky and is allowed to wrap, and those are one
     decision rather than two. Everything in it is a destination or a fact —
     watchlist, notifications, the chain, the wallet — and none of them is worth
     the two or three rows of a phone screen that pinning them would cost. The
     tab bar is what stays; this scrolls away like the page it belongs to.
     Wrapping is also what makes the sideways scroll impossible rather than
     merely unlikely: a row that can break cannot be forced wider than its
     container by a long balance or a second call-to-action. */
  .rr-top{position:static;height:auto;min-height:var(--rr-top);flex-wrap:wrap;
    padding:9px 14px;gap:8px 10px}
  /* A zero basis, not "auto", and that is what keeps the actions beside the
     search icon rather than under it. A wrapping flex container breaks lines
     against each item's basis before it flexes anything, and on "auto" the
     basis is the whole unbroken run of chips - far wider than the phone - so
     the actions took a line of their own and left the icon sitting alone on
     one. At zero they join the icon's line and wrap inside themselves instead,
     which is a row shorter. */
  .rr-top-actions{margin-left:0;flex:1 1 0;min-width:0;flex-wrap:wrap;gap:8px 12px;
    justify-content:flex-end}
  /* The buttons keep their text on one line and take a row of their own when
     the row runs out. A button whose label wraps to two lines is the shape the
     nested-class bug produced, and it reads as broken even when it fits. */
  .rr-top-cta{flex:0 0 auto;gap:8px}
  .rr-top-cta .rr-cta{white-space:nowrap}

  /* The search field collapses to its icon. It costs nothing that works today:
     there is no input behind it, it is a drawn field the assets show and this
     build has never wired. Zeroing the font is what hides the placeholder — the
     icon keeps its size because that is set in pixels, not in ems. */
  /* The field takes a row of its own rather than collapsing to its icon.
     Collapsing was right when it was a drawing that did nothing; now that it
     works, a 40px box nobody can type into is worse than a row of header. */
  .rr-search{flex:1 1 100%;order:-1;max-width:none;width:auto;font-size:13px}

  /* 30px of uppercase 800 across 340px is four or five characters a line. The
     hero was also set in the middle column of a three-column grid that has been
     one column since 1180px, so it has been reading as a stack of fragments at
     every width below that. */
  .rr-hero-title,.rr-head-title{font-size:24px}
  .rr-feature-title{font-size:17px}
  .rr-bignum{font-size:26px}
  .rr-bigoutcome{font-size:22px}
  .rr-donut-mid{font-size:19px}
  .rr-modal{padding:18px 16px}
  .rr-panel{padding:14px}

  /* The head's price pair takes the whole of its own row here rather than
     merely wrapping onto one, so the two rows read as a stack instead of as a
     ragged line and a half. */
  .rr-feature-head>.rr-price-pair{flex:1 0 100%}
}

/* Phone. The panels are now about 330px across inside their padding, and the
   things that break here are the ones that were laid out against a fixed pixel
   width rather than a share of the row. */
@media(max-width:560px){
  .rr-top{padding:9px 12px}
  /* At this width the wordmark, the two header links, the chain pill and a
     button no longer share a row. The mark is the half that survives: it is
     what somebody recognises, and it still links home. */
  .rr-top-word{display:none}
  .rr-preview-note{padding:9px 12px}
  .rr-main{padding:14px 12px calc(78px + env(safe-area-inset-bottom))}
  .rr-hero-title,.rr-head-title{font-size:21px}
  /* Measured in characters, which stopped being the narrower of the two. */
  .rr-hero-body{max-width:none}
  .rr-nav-item{font-size:9px;gap:3px}
  /* A 120px track and a 42px value leave the label about one word wide, and the
     label is the only part of the row that says what is being measured. */
  .rr-bar-track{width:64px}
  .rr-bar-val{width:38px}
  /* The key goes under the ring rather than beside it. 104px of ring plus the
     gap leaves it roughly eight characters, and every line in it is a name and
     a percentage. */
  .rr-donut-key{flex:1 1 100%}
  /* Five return bands across this width is sixty pixels a band and the labels
     are words. Their own scroller, because the alternative is dropping a band,
     and a band that is not drawn is a group of traders that did not exist. */
  .rr-bands-key{overflow-x:auto}
  .rr-bands-key-item{flex:1 0 62px}
  /* Same rule as the bands: a generation that will not fit wraps rather than
     being crushed into an unreadable column. */
  .rr-tree-gens{flex-wrap:wrap;gap:10px 0}
  .rr-tree-gen{flex:1 0 45%}
  /* A 45% basis puts exactly two on a row, so every odd generation starts one.
     The rule it overrides only clears the divider from the first, which on a
     wrapped row draws a rule down the left edge of the panel. */
  .rr-tree-gen:nth-child(odd){border-left:0;padding-left:0}
  /* The value column was 1fr against an auto key, so a long key could take the
     whole row and push the figure out of the panel. */
  .rr-kv{grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
  .rr-kv-v{overflow-wrap:anywhere}
}

@media(prefers-reduced-motion:reduce){.rr-app *{animation:none!important;transition:none!important}}