/* =====================================================================
   RIBBON  --  de gedeelde vormtaal
   Geleend van Amused ("flowing ribbons", "angled ribbon aesthetic"):
   balken die taps toelopen, bijschriften als tag op de rand, en een
   gekleurd kopblok met icoon.

   Wat er niet in zit is het volvlakse kleurverloop uit het origineel.
   Grote verzadigde vlakken en gradients kosten bitrate die de gameplay
   nodig heeft. Twitch stuurt vier encodes de deur uit (1440p HEVC, 1080p,
   720p en 360p AVC); op de onderste sporten -- 3,5 Mbps en 505 kbps -- gaat
   een verloop over 2560px als eerste banden. Zie sectie 2 van de README.
   De kleur zit hier in het kopblok en het bijschrift: kleine vlakken.

   De 1px omlijning komt overal uit twee lagen clip-path over elkaar: een
   gewone border volgt een schuine clip-path niet mee.
   ===================================================================== */

:root{
  --rib-h  : 44px;   /* hoogte van de balk        */
  --rib-cut: 14px;   /* hoe ver hij taps toeloopt */
}

/* ---- ribbon --------------------------------------------------------- */
.rib{display:flex;flex-direction:column;flex:0 0 auto;min-width:0}

.rib__cap{
  align-self:flex-start;margin-left:16px;position:relative;z-index:2;
  height:20px;display:flex;align-items:center;padding:0 10px;
  background:var(--ink-900);border:1px solid var(--ink-600);border-radius:5px;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc,var(--ink-300));white-space:nowrap;
}

.rib__bar{
  height:var(--rib-h);margin-top:-7px;padding:1px;
  background:var(--ink-600);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--rib-cut)) 100%, 0 100%);
}
.rib__in{
  height:100%;display:flex;align-items:center;
  background:var(--ink-800);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--rib-cut) + 1px) 100%, 0 100%);
  padding-right:calc(var(--rib-cut) + 12px);
}
.rib__acc{
  flex:0 0 var(--rib-h);width:var(--rib-h);height:100%;
  background:var(--acc,var(--jade));color:var(--ink-900);
  clip-path:polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  display:grid;place-items:center;
}
.rib__acc svg{width:calc(var(--rib-h) * .39);height:calc(var(--rib-h) * .39);margin-right:6px}
.rib__val{
  padding-left:13px;font-size:calc(var(--rib-h) * .455);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* korte oplichting bij een wijziging: alleen het kopblok, klein vlak */
.rib.hit .rib__acc{animation:ribHit 420ms cubic-bezier(.22,.61,.36,1)}
@keyframes ribHit{0%{filter:brightness(1.9)}100%{filter:none}}

/* Nog geen waarde binnen: aanwezig maar gedempt, zodat een gevuld label
   er meteen uitspringt. */
.rib--empty .rib__acc{background:var(--ink-600);color:var(--ink-400)}
.rib--empty .rib__cap{color:var(--ink-500)}
.rib--empty .rib__val{color:var(--ink-500)}

/* getallen in mono, net als de cijfers elders; namen blijven in Outfit */
.rib--num .rib__val{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-weight:500}

/* Twee maatvarianten, elk met één aanroeper: rib--sm op de voorpagina en
   rib--lg op de panelknoppen. Verder wordt een ribbon op maat gezet door de
   ouder, met --rib-h en --rib-cut op een eigen selector -- dat gebeurt op
   twaalf plekken en is het echte idioom hier. Er stond ook een rib--xl, maar
   die had nergens een aanroeper. */
.rib--sm{--rib-h:34px;--rib-cut:11px}
.rib--lg{--rib-h:58px;--rib-cut:18px}

/* ---- kaart met schuine hoek ----------------------------------------
   Zelfde taal, maar dan als vlak: rechtsonder afgesneden.

   Het bijschrift staat bewust BUITEN het geklipte element. clip-path klipt
   ook absoluut gepositioneerde kinderen, dus een tag die op de bovenrand
   rijdt wordt anders half weggesneden. */
.rcard-wrap{position:relative;display:flex;flex-direction:column;
  min-width:0;padding-top:11px}

.rcard__cap{
  position:absolute;top:0;left:26px;z-index:3;
  height:22px;display:flex;align-items:center;padding:0 12px;
  background:var(--ink-900);border:1px solid var(--ink-600);border-radius:5px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc,var(--ink-400));white-space:nowrap;
}

/* Bronlabel op de rechterrand, tegenover het bijschrift links. Zelfde vorm,
   maar gedempt: dit is een vermelding, geen kop. Raider.IO vraagt er in hun
   Acceptable Use om ("must include a link back to raider.io"), en op een
   stream valt er niets te klikken -- dan is de naam in beeld het eerlijke
   equivalent. Op de voorpagina staat hij wel als echte link. */
.rcard__src{
  position:absolute;top:0;right:26px;z-index:3;
  height:22px;display:flex;align-items:center;padding:0 12px;
  background:var(--ink-900);border:1px solid var(--ink-750);border-radius:5px;
  font-size:10px;font-weight:600;letter-spacing:.12em;
  color:var(--ink-400);white-space:nowrap;
}

/* Wanneer die bron voor het laatst antwoordde, in datzelfde plaatje. Het is
   een mededeling over die ene kaart -- Raider.IO crawlt characters op zijn
   eigen trage ritme terwijl de raidkaart per dertig seconden loopt, dus
   "hoe vers is dit" verschilt per kaart en hoort er per kaart bij te staan.
   Een eigen pil ernaast maakte de bovenrand druk; hier hangt hij aan de
   naam waar hij bij hoort.

   Mono en tabulair, want anders schuift het label bij elke verversing een
   paar pixels op -- dat leest als beweging in een balk die verder stilstaat.
   Leeg is echt leeg: tot de eerste geslaagde poll valt er niets te melden,
   en dan hoort er ook geen scheidingspunt te staan. */
.rcard__at{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:9px;font-weight:400;letter-spacing:.04em;
  color:var(--ink-400);opacity:.8;
}
.rcard__at:empty{display:none}
.rcard__at::before{content:'\00b7';margin:0 6px;opacity:.65}

/* Loopt de bron achter, dan moet dat juist wel opvallen: goud, zoals de
   beste poging in de raidkaart. Niet rood -- er is niets stuk, Raider.IO is
   alleen nog niet bij. Dat onderscheid is het hele punt van dit stempeltje. */
.rcard__at.is-late{color:var(--gold);opacity:1}

/* Een bijschrift mag hetzelfde icoon dragen als het kopblok van een
   ribbon; dat is wat de kaarten in de onderbalk aan de balken bindt. */
.rcard__cap svg,.rib__cap svg{
  width:12px;height:12px;flex:0 0 12px;margin-right:7px;
  color:var(--acc,var(--ink-400));
}

.rcard{
  flex:1;min-height:0;padding:1px;background:var(--ink-700);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.rcard__in{
  height:100%;background:var(--ink-800);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 29px), calc(100% - 29px) 100%, 0 100%);
  display:flex;flex-direction:column;
}