/* rk-rollboard.css — Split/Roll board (1-line hard clipping)
   Namespaced to .rkroll to avoid collisions.
*/
.rkroll{
  --rkroll-bg: #f6f6f2;           /* off-white */
  --rkroll-text: #0b0f14;         /* near black */
  --rkroll-muted: #7c8896;        /* counter grey */
  --rkroll-tick: rgba(0,0,0,.10); /* vertical ticks */
  --rkroll-border: rgba(0,0,0,.10);
  --rkroll-shadow: rgba(0,0,0,.18);

  --rkroll-radius: 18px;
  --rkroll-line-h: 52px;
  --rkroll-font-size: 22px;
  --rkroll-font-weight: 800;

  --rkroll-slide-ms: 260ms;
  --rkroll-ease: cubic-bezier(.22,.8,.2,1);
}

.rkroll *{ box-sizing: border-box; }

.rkrollBoard{
  position: relative;
  width: 100%;
  border-radius: var(--rkroll-radius);
  background: var(--rkroll-bg);
  border: 1px solid var(--rkroll-border);
  overflow: hidden;
  box-shadow:
    0 10px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -10px 24px rgba(0,0,0,.05);
}

/* soft top/bottom shading */
.rkrollBoard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--rkroll-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(0deg, rgba(0,0,0,.07) 0%, rgba(0,0,0,0) 46%);
}

/* subtle vertical ticks */
.rkrollBoard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--rkroll-radius);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 14px,
      var(--rkroll-tick) 14px,
      var(--rkroll-tick) 16px,
      transparent 16px,
      transparent 28px
    );
  opacity: .55;
  mix-blend-mode: multiply;
}

.rkrollViewport{
  position: relative;
  height: var(--rkroll-line-h);
  overflow: hidden; /* HARD CLIPPING */
  display: flex;
  align-items: center;
  justify-content: center; /* center text */
  padding: 0 70px 0 22px;  /* keep room for counter on right */
}

.rkrollStrip{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
  transform: translateY(0px);
}

.rkrollLine{
  height: var(--rkroll-line-h);
  display: flex;
  align-items: center;
  justify-content: center; /* center line text */
  color: var(--rkroll-text);
  font-size: var(--rkroll-font-size);
  font-weight: var(--rkroll-font-weight);
  letter-spacing: -0.2px;
  line-height: var(--rkroll-line-h); /* prevents overlap */
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* counter: NN/NN in grey tones */
.rkrollCounter{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 14px;
  color: var(--rkroll-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.rkrollCounter .rkrollSlash{ opacity: .6; }
.rkrollCounter .rkrollNum{ opacity: .95; }

/* status lamp (optional) */
.rkrollLamp{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.rkrollDot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a9b6e;
  box-shadow: 0 0 0 3px rgba(26,155,110,.18);
}

.rkrollA11yLinks{
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Dark variant (color inversion)
   Apply by adding class: rkroll rkroll--dark
*/
.rkroll.rkroll--dark{
  --rkroll-bg: #0b0f14;
  --rkroll-text: #f6f6f2;
  --rkroll-muted: rgba(255,255,255,.60);
  --rkroll-tick: rgba(255,255,255,.12);
  --rkroll-border: rgba(255,255,255,.14);
  --rkroll-shadow: rgba(0,0,0,.35);
}
.rkroll.rkroll--dark .rkrollBoard{
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 24px rgba(0,0,0,.22);
}
.rkroll.rkroll--dark .rkrollBoard::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
}