/* Reviews slide-over. Tarang: paper, hairlines, mono straps, no cards, no pills.
   Drawn from the right on a desktop and as a near-full sheet on a phone, which
   is the shape a thumb expects. Tokens only, so dark mode comes free. */

.rv-scrim{
  position:fixed; inset:0; z-index:998;
  background:rgba(11,16,19,.42); backdrop-filter:blur(2px);
  animation:rvFade .22s var(--ease, ease) both;
}
@keyframes rvFade{ from{ opacity:0 } to{ opacity:1 } }

.rv-panel{
  position:fixed; z-index:999; top:0; right:0; bottom:0;
  width:min(560px, 100vw);
  display:flex; flex-direction:column;
  background:var(--paper); color:var(--tx);
  border-left:2px solid var(--rule);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  overscroll-behavior:contain;
}
.rv-panel.is-on{ transform:translateX(0); }

.rv-panel__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 20px 14px; border-bottom:3px solid var(--ink); flex:0 0 auto;
}
.rv-panel__k{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-4); margin:0 0 6px;
}
.rv-panel__t{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.25; }
/* A real 44px target. A 12px label with padding is not one, and this is the only
   way out of a modal on a phone. */
.rv-panel__x{
  flex:0 0 auto; min-height:44px; padding:0 16px;
  background:transparent; border:1.5px solid var(--bd); border-radius:8px;
  font-size:13px; font-weight:600; color:var(--tx-2); cursor:pointer;
}
.rv-panel__x:hover{ background:var(--paper-2); }

.rv-panel__lead{
  margin:0; padding:14px 20px 0; flex:0 0 auto;
  font-size:13px; line-height:1.6; color:var(--tx-3);
}
.rv-panel__body{ flex:1 1 auto; overflow-y:auto; padding:4px 20px 40px; -webkit-overflow-scrolling:touch; }

.rv-c{ padding:22px 0; border-bottom:1px solid var(--hair); }
.rv-c:last-child{ border-bottom:0; }
.rv-c__h{ margin-bottom:12px; }
.rv-c__who{ margin:0; font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--tx); }
.rv-c__biz{ font-weight:500; color:var(--tx-3); }
.rv-c__meta{ margin:7px 0 0; display:flex; flex-wrap:wrap; gap:6px 10px; }
.rv-c__m{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx-4);
}
.rv-c__m--on{ color:var(--teal); }

.rv-q{ margin-top:14px; }
.rv-q__l{
  margin:0 0 4px; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tx-4);
}
.rv-q__a{ margin:0; font-size:14.5px; line-height:1.66; color:var(--tx-2); }

.rv-c__orig{
  margin:14px 0 0; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tx-4);
}

/* "Written in Thai" is worth saying to someone reading the English translation.
   Saying "written in English" to an English reader is noise, so each note hides
   itself when the reader's language IS the language it was written in. */
body[data-lang="en"] .rv-orig--en,
body[data-lang="th"] .rv-orig--th{ display:none; }

/* Thai and Chinese need more leading than Latin at this size. */
body[data-lang="th"] .rv-q__a,
body[data-lang="zh"] .rv-q__a{ line-height:1.8; }

@media (max-width: 640px){
  .rv-panel{ width:100vw; border-left:0; }
  .rv-panel__t{ font-size:20px; }
  .rv-panel__body{ padding:4px 16px 40px; }
  .rv-panel__top,.rv-panel__lead{ padding-left:16px; padding-right:16px; }
}
@media (prefers-reduced-motion: reduce){
  .rv-panel{ transition:none; }
  .rv-scrim{ animation:none; }
}