/* Open Rate Index (/rates). Tokens from site.css; dark-first, tabular figures. docs/RATES.md */
.ri-head .cluster { margin-top: var(--s6); }
.ri-demo { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border: 1px dashed var(--warn); border-radius: var(--r-sm); color: var(--warn); background: rgb(255 200 87 / .08); font-size: var(--fs-small); }
.ri-demo b { letter-spacing: .06em; }
.ri-hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }

/* filters */
.ri-filters { display: grid; gap: var(--s3); margin: 0 0 var(--s6); padding: var(--s4); border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); box-shadow: var(--hi); }
.ri-filter { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; }
.ri-filter__k { margin: .45em 0 0; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); }
.ri-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ri-chip { --c: var(--pro); display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3em .85em; border-radius: 99px; border: 1px solid rgb(166 180 203 / .3); font-size: var(--fs-small); color: var(--fg-muted); text-decoration: none; white-space: nowrap; transition: color 160ms, border-color 160ms, background-color 160ms, box-shadow 160ms; }
.ri-chip:hover { color: var(--fg); border-color: var(--c); }
.ri-chip.is-on { color: var(--ink); background: var(--c); border-color: transparent; font-weight: 600; box-shadow: 0 0 22px -4px var(--c); }
.ri-filter--seniority .ri-chip { --c: var(--client); }
.ri-filter--setting .ri-chip { --c: var(--blue); }
.ri-filter--region .ri-chip { --c: var(--k-oilgas); }

/* legend + axis */
.ri-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1.2em; margin: var(--s2) 0 var(--s5); }
.ri-key { display: inline-block; width: 1.6em; height: .7em; margin-right: .5em; border-radius: 99px; vertical-align: middle; }
.ri-key--band { background: var(--g-pro); }
.ri-key--median { width: 3px; height: 1.1em; background: var(--foam); border-radius: 2px; margin-left: 1.2em; }
.ri-key--empty { border: 1px dashed var(--edge); margin-left: 1.2em; }
.ri-list__scope { margin: 0 0 var(--s4); }
.ri-axis { position: relative; height: 1.4rem; margin: 0 1.25rem; font-size: var(--fs-micro); color: var(--fg-dim); }
.ri-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ri-axis span:first-child { transform: none; }
.ri-axis span:last-child { transform: translateX(-100%); }

/* rows */
.ri-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ri-row { padding: var(--s4) 1.25rem var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); box-shadow: var(--hi); animation: ri-in 520ms var(--ease-out, ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); transition: border-color 200ms, box-shadow 300ms; }
.ri-row:hover { border-color: rgb(56 225 214 / .45); box-shadow: var(--hi), 0 0 40px -14px rgb(56 225 214 / .4); }
.ri-row.is-current { border-color: rgb(157 140 255 / .7); }
.ri-row--empty { background: transparent; box-shadow: none; }
.ri-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: var(--s3); }
.ri-row__name { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.ri-row__name a { color: var(--fg); text-decoration: none; }
.ri-row__name a:hover { color: var(--pro-hi); }
.ri-row__fig { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; }
.ri-row__fig b, .ri-cell__fig b { color: var(--pro-hi); font-weight: 700; text-shadow: 0 0 18px rgb(56 225 214 / .45); }
.ri-dash { color: var(--fg-dim); margin: 0 .2em; }
.ri-row__med { margin-left: .9em; font-size: var(--fs-small); color: var(--fg-muted); letter-spacing: 0; }
.ri-row__note { margin: var(--s2) 0 0; min-height: 1.2em; }
.ri-row__share { color: var(--fg-muted); }
.ri-row--empty .ri-row__name a { color: var(--fg-muted); }

.ri-bar { position: relative; height: 1.5rem; border-radius: 99px; background: linear-gradient(90deg, rgb(255 255 255 / .04), rgb(255 255 255 / .07)); }
.ri-bar__band { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--g-pro); box-shadow: var(--glow-pro); transform-origin: left center; animation: ri-grow 700ms var(--ease-out, ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.ri-bar__median { position: absolute; top: -.3rem; bottom: -.3rem; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--foam); box-shadow: 0 0 10px rgb(238 243 250 / .7); }
.ri-bar--empty { background: none; border: 1px dashed var(--edge); display: grid; place-content: center; }
.ri-bar__empty { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); }
.ri-bar__mine { position: absolute; top: -.55rem; bottom: -.55rem; width: 0; border-left: 2px solid var(--flare); z-index: 2; }
.ri-bar__mine::before { content: ""; position: absolute; left: -6px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--flare); box-shadow: var(--glow-fee); }
.ri-bar__mine span { position: absolute; top: calc(100% + .1rem); left: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--flare-hi); white-space: nowrap; }
.ri-row.has-mine { padding-bottom: var(--s5); }

/* result panel */
.ri-result { margin: 0 0 var(--s6); padding: var(--s5); border-radius: var(--r); border: 1px solid rgb(255 125 82 / .5); background: linear-gradient(135deg, rgb(255 90 42 / .12), transparent 55%), var(--sea-2); box-shadow: var(--hi), 0 0 50px -20px rgb(255 90 42 / .5); scroll-margin-top: 6rem; }
.ri-result h2 { margin: 0 0 var(--s2); }
.ri-result__cell { margin: 0 0 var(--s4); }
.ri-result__line { font-size: 1.125rem; }
.ri-result .ri-bar { margin: var(--s5) 0 var(--s7); }

/* one cell */
.ri-cell__fig { margin: var(--s5) 0 0; font-size: var(--fs-fig); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.ri-cell__unit { font-size: var(--fs-lead); font-weight: 400; color: var(--fg-muted); letter-spacing: 0; }
.ri-list--single { margin: 0 0 var(--s6); }
.ri-list--single .ri-axis { margin: 0 0 var(--s2); }

/* form */
.ri-form { margin-top: var(--s6); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--hi), var(--lift); }
.ri-form__grid { display: grid; gap: var(--s5); align-items: start; }
.ri-radios { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ri-radio { position: relative; cursor: pointer; }
.ri-radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; cursor: pointer; }
.ri-radio span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4em 1.1em; border: 1px solid var(--edge); border-radius: 99px; font-size: var(--fs-small); }
.ri-radio input:checked + span { background: var(--pro); border-color: transparent; color: var(--ink); font-weight: 600; box-shadow: var(--glow-pro); }
.ri-radio input:focus-visible + span { outline: 2px solid var(--pro); outline-offset: 3px; }
.ri-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s6); }
.ri-form__foot p { margin: 0; }

/* explainer */
.ri-how__grid { display: grid; gap: var(--s4); margin: var(--s6) 0; }
.ri-how__card { padding: var(--s5); border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--surface); box-shadow: var(--hi); border-top: 3px solid var(--pro); }
.ri-how__card:nth-child(2) { border-top-color: var(--blue); }
.ri-how__card:nth-child(3) { border-top-color: var(--client); }
.ri-how__card:nth-child(4) { border-top-color: var(--flare); }
.ri-how__card h3 { margin: 0 0 var(--s3); font-size: 1.125rem; }
.ri-how__card p { color: var(--fg-muted); font-size: var(--fs-small); }
.ri-how__card p:last-child { margin-bottom: 0; }
.ri-how__links { gap: var(--s3) var(--s6); }

@media (min-width: 48em) {
  .ri-form__grid { grid-template-columns: 1fr 1fr; }
  .ri-form__kind { grid-column: 1 / -1; }
  .ri-how__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 72em) { .ri-how__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 40em) {
  .ri-filter { grid-template-columns: 1fr; gap: var(--s1); }
  .ri-filter__k { margin: 0; }
  .ri-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--s4) * -1); padding: 2px var(--s4) .4rem; scrollbar-width: none; }
  .ri-chips::-webkit-scrollbar { display: none; }
  .ri-row { padding-inline: var(--s4); }
  .ri-axis { margin-inline: var(--s4); }
  .ri-row__fig { font-size: 1.125rem; }
  .ri-row__med { display: block; margin: .15em 0 0; }
}
@keyframes ri-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes ri-grow { from { transform: scaleX(0); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .ri-row, .ri-bar__band { animation: none; } .ri-chip { transition: none; } }