/* The look of a review card's labels (review-labels.js builds the markup). Loaded by the game page and the Compare page;
   the Atlas does not load it and keeps its own (site-look.css), so nothing here reaches a delivered Atlas (TASK-204).
   Card shell .rl-card: a header band for the card's own theme, the review in white, a footer band for the other themes.
   .rl-compact is a most-helpful card: the same labels, a size down. */
.rl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the card ---- */
.rl-card{--ctl:32px;background:#fff;border-radius:8px;border-left:4px solid var(--c);box-shadow:0 2px 10px rgba(21,22,26,.08);overflow:hidden;text-align:left}
.rl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;background:color-mix(in srgb,var(--c) 11%,#fff);border-bottom:1px solid color-mix(in srgb,var(--c) 22%,#fff)}
.rl-head p{margin:0;flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rl-head-l{font:600 13px/1.2 var(--sans);color:var(--ink-soft)}
.rl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 18px 0;margin:0 0 12px}
.rl-meta>*{margin:0;align-self:center}
.rl-card .review-text{padding:0 18px}
.rl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 18px 14px;margin-top:6px}
.rl-card .rl-foot .review-toggle{margin:4px 0 0}

/* ---- the thumb: a badge, never a pill ---- */
.rl-verdict{display:inline-flex;align-items:center;gap:12px;flex:none;height:40px;padding:0 16px 0 0;border-radius:6px;overflow:hidden;background:var(--v);color:#fff;font:700 16px/1 var(--sans);white-space:nowrap}
.rl-verdict.is-up{--v:#1f6aa6;--vd:#164f7e}
.rl-verdict.is-down{--v:#a34c25;--vd:#7e3517}
.rl-verdict-ic{display:grid;place-items:center;width:40px;height:40px;background:var(--vd)}
.rl-verdict-ic svg{width:20px;height:20px;fill:currentColor}
.rl-verdict.is-down svg{transform:rotate(180deg)}
.rl-verdict.is-icon{padding:0}

/* ---- facts: one neutral pill each; the language is the one with a colour of its own ---- */
.rl-fact,.rl-lang{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;border:1px solid var(--rule);border-radius:999px;font:500 13px/1.2 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.rl-fact{background:var(--paper-2);color:var(--ink-soft)}
.rl-lang{background:#eef3fb;border-color:#cfdcf1;color:#2c4a7c}
.rl-fact svg,.rl-lang svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rl-fact.fact-votes{border-color:rgba(212,160,18,.5);background:rgba(212,160,18,.16);color:#5c430a;font-weight:600}
.rl-fact.fact-votes b{font-size:14px;font-weight:750}

/* ---- a theme: a round tag in its group's colour (the theme rows on the game page use the same) ---- */
.rl-tag,.gp-grp{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:2px 10px;border-radius:999px;border:1px solid}
.rl-tag::before,.gp-grp::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.rl-tag.grp-praise,.gp-grp.grp-praise{background:#e7f0fa;border-color:#bcd5ee;color:#174f7e}
.rl-tag.grp-complaint,.gp-grp.grp-complaint{background:#f8ebe5;border-color:#e6c4b4;color:#7e3517}
.rl-tag.grp-context,.rl-tag.grp-meta,.rl-tag.grp-suggestion,.gp-grp.grp-context,.gp-grp.grp-meta,.gp-grp.grp-suggestion{background:#eef0f3;border-color:#d0d5dd;color:#3e4755}
.rl-head .rl-tag,.rl-also .rl-tag{background:#fff}

/* ---- the other themes, in the card's footer band ---- */
.rl-also{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0;padding:10px 18px;background:#f5f1e6;border-top:1px solid var(--rule)}
.rl-also-l{display:inline-flex;align-items:center;gap:6px;font:600 13px/1.2 var(--sans);color:var(--ink-soft)}
.rl-also-l svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- the reader's controls: one height ---- */
.rl-close{display:inline-flex;align-items:center;gap:6px;height:var(--ctl,32px);padding:0 14px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:600 13px var(--sans);cursor:pointer}
.rl-close:hover{background:var(--ink);color:#fff}
.rl-foot .review-toggle,.rl-compact .review-toggle{min-height:var(--ctl,32px);height:var(--ctl,32px);font-size:14px}
.rl-foot .review-source{font:600 14px var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(212,160,18,.9);text-decoration-thickness:1.5px;text-underline-offset:5px}
.rl-foot .review-source:hover{text-decoration-thickness:2.5px}
/* Review ‹ 1 2 3 ›: one tray as tall as the thumb, the arrows quiet, the numbers read, the current one lit */
.rl-steps{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 8px 0 14px;border:1px solid var(--rule);border-radius:8px;background:#f1ede2}
.rl-steps-l{display:inline-flex;align-items:center;gap:7px;margin-right:8px;font:700 14px/1 var(--sans);color:var(--ink)}
.rl-steps-l svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rl-step,.rl-arr{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.rl-step{border:1.5px solid var(--ink);font:700 14px/1 var(--sans);font-variant-numeric:tabular-nums}
.rl-step.on{background:var(--ink);color:#fff;cursor:default}
.rl-arr{border:1px solid var(--rule)}
.rl-arr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rl-arr:disabled{opacity:.35;cursor:default}
.rl-step:hover:not(.on),.rl-arr:hover:not(:disabled){background:var(--paper-2)}
.rl-step:focus-visible,.rl-arr:focus-visible,.rl-close:focus-visible{outline:2px solid var(--blue,#5486e0);outline-offset:2px}

/* ---- the round button on a row that opens reviews: the ink the page's other controls use, filled so it is seen ---- */
.rl-see{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border:1.5px solid var(--ink,#15161a);border-radius:50%;background:var(--ink,#15161a);color:#fff;transition:background .15s,color .15s,box-shadow .15s}
.rl-see svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}

/* ---- a most-helpful card: the same labels, a size down ---- */
.rl-compact .rl-verdict{height:32px;gap:9px;padding-right:13px;font-size:14px}
.rl-compact .rl-verdict-ic{width:32px;height:32px}
.rl-compact .rl-verdict-ic svg{width:17px;height:17px}
.rl-compact .rl-verdict.is-icon{padding:0}
.rl-compact .rl-fact{height:24px;font-size:12.5px}
.rl-compact .rl-foot{padding:0;margin-top:5px;flex-wrap:wrap;row-gap:6px}
.rl-compact .rl-foot .review-toggle{margin:4px 0 0;white-space:nowrap}
.rl-compact .review-source{font-size:13px}

/* ---- narrow: the changer drops under the facts, from the left */
@media(max-width:900px){.rl-steps{margin-left:0}}
@media(max-width:700px){
  .rl-head{padding:10px 14px;row-gap:8px}
  .rl-meta{padding:14px 14px 0}
  .rl-card .review-text{padding:0 14px}
  .rl-foot{padding:0 14px 14px;flex-wrap:wrap;row-gap:4px}
  .rl-also{padding:10px 14px}
  .rl-also-l{flex-basis:100%}
}