@import url("../inner.css");
/* Public record page */
.rec { display: grid; gap: 20px; transition: opacity var(--dur-2) var(--ease); }
.rec[aria-busy="true"] { opacity: .55; }
.rec-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rec-kpi { padding: 24px clamp(18px, 2vw, 28px); border-left: 1px solid var(--line); min-width: 0; }
.rec-kpi:first-child { border-left: 0; }
.rec-kpi .stat__value { font-size: var(--fs-stat-sm); white-space: nowrap; }
.rec-chart__big { margin-top: 10px; font: 600 var(--fs-stat)/1 var(--font-display); }
.rec-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; font-size: var(--fs-xs); color: var(--stone); }
.rec-legend li { display: inline-flex; align-items: center; gap: 3px; }
.lg { display: inline-block; width: 16px; height: 2px; margin-right: 6px; background: var(--gold-2); border-radius: 2px; }
.lg--jade, .lg--garnet { width: 5px; height: 11px; margin-right: 0; background: var(--jade); }
.lg--garnet { margin-right: 6px; background: var(--garnet); }
.rec-chart__area { min-height: 282px; }
.rec-chart__bars { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rec-breaks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rec-break { margin-top: 20px; }
.rec-break .hbars { gap: 18px; }
.rec-break .stars .icon { width: 12px; height: 12px; color: var(--gold-2); }
.rec-break .stars .icon.is-off { color: rgba(255,255,255,.14); }
.rec-note { font-size: var(--fs-xs); color: var(--text-3); }
.rec-list__filter { margin-bottom: 8px; }
.strats__rank { width: 44px; font: 600 1.25rem/1 var(--font-display); color: var(--gold-2); }
.strats__name b { display: block; font-weight: 500; }
.strats__name small, .strats__scope { font-size: var(--fs-xs); color: var(--text-3); }
.strats__name small { display: block; margin-top: 3px; }
.strats__scope { white-space: nowrap; }
.strats__scope .icon { display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--gold-4); }
.rec-formula { margin-top: 48px; }
.rec-formula__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; margin-top: 22px; }
.rec-formula__grid div { padding-top: 16px; border-top: 1px solid var(--line-gold); }
.rec-formula__grid dt { font-weight: 600; font-size: var(--fs-sm); color: var(--gold-1); }
.rec-formula__grid dd { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.75; color: var(--stone); }
@media (max-width: 1199px) { .rec-breaks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1023px) {
  .rec-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rec-kpi:nth-child(4) { border-left: 0; }
  .rec-kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
  .rec-formula__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .rec-kpis { grid-template-columns: 1fr 1fr; }
  .rec-kpi { padding: 18px 16px; }
  .rec-kpi:nth-child(odd) { border-left: 0; }
  .rec-kpi:nth-child(4) { border-left: 1px solid var(--line); }
  .rec-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rec-kpi:last-child { grid-column: 1 / -1; }
  .rec-breaks, .rec-formula__grid { grid-template-columns: minmax(0, 1fr); }
  .rec-chart__area { min-height: 222px; }
  .strats tr { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "rank name roi" "rank scope units" "rank stats stats"; }
  .strats .strats__rank { grid-area: rank; }
  .strats .strats__name { grid-area: name; }
  .strats .strats__scope { grid-area: scope; white-space: normal; }
  .strats .strats__roi { grid-area: roi; }
  .strats .strats__u { grid-area: units; }
  .strats .strats__n, .strats .strats__hit { display: none; }
}