/* Insights (29.10.2026, Supporter Plus): /insights, templates/insights.html. Own file so Glass and Classic both get it. */
html[data-op-rh][data-op-rh] .wrapper .container.op-ins, .container.op-ins { max-width: 1040px; }
.op-ins { display: flex; flex-direction: column; gap: 16px; }
.op-ins-mut { color: var(--rh-mut, #9d9daa); }
.op-ins-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.op-ins-head h1 { margin: 0; font-size: 1.7rem; font-weight: 800; }
.op-ins-head p { margin: 2px 0 0; font-size: .86rem; }
.op-ins-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.op-ins-chip { padding: 5px 11px; border-radius: 10px; font-size: .8rem; font-weight: 700; color: var(--rh-mut, #9d9daa); background: var(--rh-soft, rgba(255, 255, 255, .05)); text-decoration: none; }
.op-ins-chip:hover { color: #fff; background: var(--rh-soft2, rgba(255, 255, 255, .085)); }
.op-ins-chip.on { color: #09090b; background: #f5f5f7; }
.op-ins-box { background: var(--rh-fill, #121216); box-shadow: var(--rh-edge, inset 0 0 0 1px rgba(255, 255, 255, .07)); border-radius: var(--rh-r, 22px); padding: 0 20px 18px; min-width: 0; }
.op-ins-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -20px 16px; padding: 14px 20px 12px; position: relative; }
.op-ins-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rh-line, rgba(255, 255, 255, .07)); }
.op-ins-bar h2 { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.op-ins-bar .op-ins-mut { font-size: .78rem; }
.op-ins-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.op-ins-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-ins-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-ins-tiles > div { padding: 11px 8px; border-radius: var(--rh-rs, 12px); background: var(--rh-soft, rgba(255, 255, 255, .05)); text-align: center; min-width: 0; }
.op-ins-tiles b { display: block; font-size: 1.15rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-ins-tiles small { display: block; margin-top: 2px; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rh-mut, #9d9daa); font-weight: 800; }
.op-ins-tiles .up b, .op-ins-week .up { color: #3ad678; }
.op-ins-tiles .down b, .op-ins-week .down { color: #ff7a7a; }
.op-ins-days, .op-ins-hours { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.op-ins-days > span, .op-ins-hours > span { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; border-radius: 4px; background: rgba(255, 255, 255, .025); }
.op-ins-days i, .op-ins-hours i { display: block; width: 100%; border-radius: 4px; background: rgba(245, 245, 247, .55); }
.op-ins-days > span:hover i, .op-ins-hours > span:hover i { background: #f5f5f7; }
.op-ins-hours > span.best i { background: #3ad678; }
.op-ins-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: .72rem; color: var(--rh-mut, #9d9daa); }
.op-ins-rank { display: block; width: 100%; height: 150px; }
.op-ins-rank polyline { stroke: #f5f5f7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.op-ins-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.op-ins-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 7px 0; font-size: .88rem; }
.op-ins-row + .op-ins-row { box-shadow: inset 0 1px 0 var(--rh-line, rgba(255, 255, 255, .07)); }
.op-ins-row.op-ins-mod { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.op-ins-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; overflow-wrap: anywhere; }
.op-ins-row .op-ins-mut { font-size: .8rem; }
.op-ins-meter { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.op-ins-meter > i { display: block; height: 100%; background: rgba(245, 245, 247, .55); }
.op-ins-week-h, .op-ins-week-r { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 8px 0; align-items: center; }
.op-ins-week-h { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rh-mut, #9d9daa); font-weight: 800; }
.op-ins-week-r { box-shadow: inset 0 1px 0 var(--rh-line, rgba(255, 255, 255, .07)); font-size: .9rem; }
.op-ins-week-r b { font-weight: 800; }
.op-ins-lock { text-align: center; padding: 34px 24px; max-width: 620px; margin: 0 auto; width: 100%; }
.op-ins-lock h1 { font-size: 1.6rem; font-weight: 800; margin: 10px 0 8px; }
.op-ins-lock-ico { width: 52px; height: 52px; margin: 0 auto; border-radius: 14px; display: grid; place-items: center; background: var(--rh-soft2, rgba(255, 255, 255, .085)); font-size: 1.3rem; }
@media (max-width: 760px) {
  .op-ins-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-ins-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-ins-two { grid-template-columns: minmax(0, 1fr); }
  .op-ins-days, .op-ins-hours { gap: 2px; }
  .op-ins-box { padding: 0 14px 14px; }
  .op-ins-bar { margin: 0 -14px 14px; padding: 12px 14px 10px; }
}