/* Research: the live figure in the "Signals in flight" card (research.js), the paper in focus in the list,
   and on phones a small moving picture in every row. Loaded after style.css; only research rules here. */

/* without JS the card keeps its original DME plot; with JS the live figure replaces it */
.fly.rf-on .fly-still{display:none}
.rf[hidden]{display:none}

.rf{margin:2px 0 16px}
.rf-meta{min-height:76px}
.rf-head{display:flex;align-items:center;gap:10px;font:600 11px var(--f-sans);font-stretch:85%;letter-spacing:.12em;color:var(--muted)}
.rf-n{font-variant-numeric:tabular-nums;color:var(--dim)}
.rf-y{color:var(--amber);font-variant-numeric:tabular-nums}
.rf-head .topic{padding:2px 6px}
.rf-title{margin:7px 0 10px;font:500 15.5px/1.38 var(--f-sans);color:var(--ink);letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.rf-stage{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0 8px}
.rf-cv{display:block;width:100%;aspect-ratio:600/270;height:auto}
.rf-cap{margin:10px 0 0;min-height:calc(13px * 1.55 * 3);font-size:13px;line-height:1.55;color:var(--muted);text-wrap:pretty}
html:lang(th) .rf-cap{font-size:13.5px}

/* one tick per paper; the active one fills while the card waits to move on */
.rf-ticks{display:flex;gap:6px;margin-top:8px}
.rf-tick{flex:1;min-width:0;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.rf-tick i{position:relative;display:block;width:100%;height:2px;background:var(--line2);border-radius:2px;overflow:hidden;transition:background .3s}
.rf-tick i::after{content:"";position:absolute;inset:0;background:var(--amber);transform-origin:left;transform:scaleX(0)}
.rf-tick[aria-pressed="true"] i{background:rgba(233,180,106,.35)}
.rf-tick[aria-pressed="true"] i::after{transform:scaleX(var(--p,0))}
.rf-tick:hover i{background:var(--ink2)}
.rf-tick:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:3px}

/* the paper in focus (desktop): an amber rule at its left, its year in amber, the others a step quieter */
.rf-th{display:none}
@media (min-width:901px){
  .rf-live .pub{position:relative;transition:opacity .4s}
  .rf-live .pub::before{content:"";position:absolute;left:-16px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--amber);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .rf-live .pub.is-on::before{transform:scaleY(1)}
  .rf-live .pub .pub-y,.rf-live .pub .pub-b b,.rf-live .pub .topic{transition:color .4s,border-color .4s}
  .rf-live .pub.is-on .pub-y{color:var(--amber)}
  .rf-live .pub.is-on .topic{border-color:rgba(233,180,106,.55);color:var(--ink2)}
  .rf-live .pub:not(.is-on) .pub-b b{color:var(--ink2)}
}

/* phones and tablets: each row carries its own moving picture under the title */
@media (max-width:900px){
  .rf-live .pub .rf-th{display:block;grid-column:2;width:100%;max-width:440px;aspect-ratio:600/260;height:auto;margin-top:8px;
    border-radius:8px;background:#080807;border:1px solid var(--line)}
  .rf-live .pub.is-on .rf-th{border-color:rgba(233,180,106,.4)}
  .rf-cap{min-height:calc(13px * 1.55 * 4)} /* room for the longest caption, so the list below never jumps */
}