/* css/refined/companion.css -- owner R1-RF-CORE3 (REFINE-COMMON). Every rule is scoped under body.rf.
   The companion (_rf_companion.html): a small pill in the header row -- the two-dot face, the list's count and total --
   and, at a meaningful moment, one line under it with one choice and "Ne sada". Phones: centred in the header (which
   scrolls with the page there). From 720px the header is sticky, so the pill is fixed beside the brand. */

body.rf .rfc{position:absolute;z-index:calc(var(--z-header) + 1);top:10px;left:50%;transform:translateX(-50%)}
@media (min-width:720px){body.rf .rfc{position:fixed;top:12px;left:calc(max(24px,(100vw - var(--container)) / 2) + 128px);transform:none}}

body.rf .rfc__pill{display:inline-flex;align-items:center;gap:8px;height:var(--tap);padding:0 14px 0 8px;border:1px solid var(--line);
  border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);text-decoration:none;
  box-shadow:0 1px 2px rgba(32,26,28,.06),0 6px 16px -12px rgba(32,26,28,.35);transition:transform 120ms cubic-bezier(.2,.8,.2,1)}
body.rf .rfc__pill:active{transform:scale(.97)}
body.rf .rfc__pill:focus-visible,body.rf .rfc__say :focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
body.rf .rfc__n{min-width:1ch;font-size:.84rem;font-weight:var(--fw-bold);color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
body.rf .rfc__sum{padding-left:8px;border-left:1px solid var(--line);font-size:.94rem;font-weight:var(--fw-bold);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
body.rf .rfc__sum .rf-cur{font-size:.78em;margin-left:1px}
@media (max-width:359px),(min-width:720px) and (max-width:959px){body.rf .rfc__sum{display:none}}

/* The face: one drawing, five expressions; a change is a cross-fade of the eyes. */
body.rf .rfc__face{display:block;flex:0 0 auto;overflow:visible}
body.rf .rfc__skin{fill:var(--ink)}
body.rf .rfc__eyes{fill:var(--surface);opacity:0}
body.rf .rfc__line{fill:none;stroke:var(--surface);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
body.rf .rfc[data-mood="idle"] .e-idle,body.rf .rfc[data-mood="thinking"] .e-thinking,body.rf .rfc[data-mood="happy"] .e-happy,
body.rf .rfc[data-mood="concerned"] .e-concerned,body.rf .rfc[data-mood="asleep"] .e-asleep{opacity:1}

/* The line it says: under the pill, open until "Ne sada". */
body.rf .rfc__say{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(320px,calc(100vw - 32px));
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(32,26,28,.06),0 12px 26px -16px rgba(32,26,28,.3)}
body.rf .rfc__say[hidden]{display:none}
@media (min-width:720px){body.rf .rfc__say{left:0;transform:none}}
body.rf .rfc__t{margin:0;font-size:.92rem;line-height:1.45;color:var(--ink-2)}
body.rf .rfc__acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
body.rf .rfc__acts .btn{min-height:var(--tap)}

@media (prefers-reduced-motion:no-preference){
  body.rf .rfc__eyes{transition:opacity 180ms cubic-bezier(.2,.8,.2,1)}
  body.rf .rfc__say:not([hidden]){animation:rfc-in 200ms cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){body.rf .rfc__pill{transition:none}}
@keyframes rfc-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}