/* The sample Read Ribbon window on the home page. Colours from tokens.css (the app's Night scheme). */
.rr .win{background:var(--tk-pane);border:1px solid var(--tk-line);border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.4),0 28px 64px -18px rgba(0,0,0,.7);overflow:hidden}
.rr .win-bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 14px;border-bottom:1px solid var(--tk-line-soft);background:var(--tk-raised)}
.rr .win-sym{font:500 14px/1 var(--ui)}
.rr .win-tf{font:400 12px/1 var(--mono);color:var(--tk-ink3)}
.rr .win-body{display:flex}
.rr .rail{display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-right:1px solid var(--tk-line-soft);background:var(--tk-raised);color:var(--tk-ink3)}
.rr .rail span{display:grid;place-items:center;width:34px;height:34px;border-radius:4px}
.rr .rail .on{background:var(--tk-fill-2);color:var(--tk-ink1)}
.rr .plot{flex:1;min-width:0;height:min(52vw,440px);min-height:300px;background:var(--tk-pane)}
.rr .plot svg{display:block}
.rr .plot text{font:400 11px/1 var(--mono);fill:var(--tk-ink3)}
.rr .plot .ax.c{text-anchor:middle}
.rr .plot .grid{stroke:var(--tk-line-soft);stroke-width:1}
.rr .plot .grid.v{stroke-dasharray:2 4}
.rr .plot .last{stroke:var(--tk-ink3);stroke-width:1;stroke-dasharray:3 3}
.rr .plot .now{stroke:var(--tk-ink1);stroke-opacity:.55;stroke-width:1}
.rr .plot .rb-track{fill:var(--tk-ink1);fill-opacity:.07}
.rr .plot .rb-hold{fill:var(--tk-ink1);fill-opacity:.12}
.rr .plot .rb-t{font:500 11px/1 var(--mono);fill:var(--tk-ink1)}
.rr .plot .rb-flag{font:500 11px/1 var(--ui);fill:var(--tk-ink1)}
.rr .plot .rb-halo{fill:var(--tk-pane)}
.rr .plot .rb-staff,.rr .plot .rb-pen{fill:var(--tk-signal)}
.rr .plot .tag-up{fill:var(--tk-up)}
.rr .plot .tag-dn{fill:var(--tk-down)}
.rr .plot .tag-t{fill:var(--tk-on-color);font-weight:500}
.rr .rt{display:inline-flex;align-items:baseline;gap:4px;padding:2px 7px;border-radius:4px;background:var(--tk-fill);color:var(--tk-ink2);font:500 12px/16px var(--mono)}
.rr .rt i{font-style:normal;font-size:.8em}
.rr .rt small{font:400 11px/16px var(--mono);color:var(--tk-ink3)}
.rr .rt[data-lean=Bullish]{background:var(--tk-bull-tint);color:var(--tk-bull)}
.rr .legend{display:grid;gap:26px}
.rr .legend dt{display:flex;align-items:center;gap:10px;font:500 16px/1.3 var(--ui);margin-bottom:6px}
.rr .legend dd{color:var(--tk-ink2)}
.rr .sw{display:inline-block;width:20px;height:12px;border-radius:1px}
.rr .sw-bull{background:var(--rb-bull-lo)}
.rr .sw-bull+.sw-bear{background:var(--rb-bear-hi);margin-left:-6px}
.rr .sw-flag{width:3px;height:16px;background:var(--tk-signal)}
.rr .sw-hold{background:var(--tk-fill-2)}
.rr .grow{flex:1}
.rr .ic{flex:none}
.rr-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.rr-fig{margin:0}
.rr-fig .cap{margin-top:14px}
@media (max-width:900px){.rr-head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.rr .win{border-radius:0;border-inline:0;margin-inline:calc(var(--pad) * -1)}.rr .win-bar{gap:10px;padding:0 12px}.rr .win-bar .tag{font-size:10px}.rr .rail{display:none}.rr .plot{height:320px;min-height:0}}
.rr dd{margin:0}
.rr .rr-head h2{font-size:clamp(32px,4vw,56px)}