/* ==========================================================================
   css/d2/companion.css -- COMPANION (8 Oct 2026), r3 after the founder's look (8 Oct evening: no black tile, a bigger
   basket, moods that read). The basket companion (templates_v1/_companion.html) in one of three looks, picked by one
   setting (companion_look): tc--free (A: the basket alone on the page, a soft contact shadow), tc--light (B: a white
   squircle with a hairline, the basket edge to edge) or tc--cherry (C: the basket in light tones on visnja). Home is
   64 px in the site corner, 48 px as the app's top pill (tc--top). It grows into a pill with one line and one action.
   ONE shape: the pill is clipped by an inset() whose box and radius spring between home and the open pill; the
   hairline is the pill's own paint showing 1 px around ::before (the surface), clipped by the same spring. No shadow,
   no blur, no filter. Reduced motion (or tc-rm): instant shape, 150 ms crossfade of the line. Face: css/d2/mascot.css.
   ========================================================================== */
.tc{--tc-s:64px;--tc-r:20px;--tc-bg:#fff;--tc-line:#E4E1DC;--tc-fg:#16130F;--tc-act:#7A1E3A;--tc-act-fg:#fff;--tc-x:#5F584F;
  --tc-spring:linear(0,.075,.245,.45,.647,.811,.935,1.017,1.063,1.082,1.082,1.07,1.054,1.037,1.022,1.01,1.001,.996,.994,.993,.994,.997,1);
  --tc-settle:linear(0,.08,.252,.447,.626,.771,.878,.95,.994,1.018,1.027,1.028,1.024,1.019,1.014,1.009,1);
  position:fixed;z-index:60;right:12px;bottom:calc(90px + env(safe-area-inset-bottom,0px));pointer-events:none;
  font-family:inherit;-webkit-tap-highlight-color:transparent}
@media (min-width:1024px){.tc{right:24px;bottom:24px}}
@media (prefers-color-scheme:dark){.tc:not(:where([data-theme="light"] *)){--tc-bg:#1F1318;--tc-line:rgba(255,255,255,.12);--tc-fg:#F7EFF2;--tc-act:#B8325F;--tc-x:#C9BDC2}}
:where([data-theme="dark"]) .tc{--tc-bg:#1F1318;--tc-line:rgba(255,255,255,.12);--tc-fg:#F7EFF2;--tc-act:#B8325F;--tc-x:#C9BDC2}
.tc.tc--cherry{--tc-bg:#7A1E3A;--tc-line:#7A1E3A;--tc-fg:#fff;--tc-act:#fff;--tc-act-fg:#7A1E3A;--tc-x:#F6E7EC}
:where([data-theme="dark"]) .tc.tc--cherry{--tc-bg:#8E2346;--tc-line:#8E2346}
@media (prefers-color-scheme:dark){.tc.tc--cherry:not(:where([data-theme="light"] *)){--tc-bg:#8E2346;--tc-line:#8E2346}}
.tc--cherry .tc-face .tm{--m-rim:#F49BB6;--m-rim-hi:#F8B9CC;--m-hem:#F49BB6;--m-handle:#F6E7EC}
.tc--top{--tc-s:48px;--tc-r:15px;right:auto;bottom:auto;left:50%;top:calc(6px + env(safe-area-inset-top,0px));transform:translateX(-50%)}

/* ---- the one shape: the pill's clip springs from home to the open pill; its paint is two layers under the content,
   the hairline (::before) and the surface 1 px inside it (::after). The free basket has no home paint: its layers
   spring out of the basket's centre ---- */
.tc-pill{position:relative;isolation:isolate;pointer-events:auto;display:flex;align-items:center;gap:10px;box-sizing:border-box;
  height:var(--tc-s);max-width:calc(100vw - 24px);padding:0 0 0 22px;color:var(--tc-fg);
  clip-path:inset(0 0 0 calc(100% - var(--tc-s)) round var(--tc-r));transition:clip-path .62s var(--tc-spring)}
.tc-pill::before,.tc-pill::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tc-line);transition:clip-path .62s var(--tc-spring)}
.tc-pill::after{background:var(--tc-bg);clip-path:inset(1px 1px 1px calc(100% - var(--tc-s) + 1px) round calc(var(--tc-r) - 1px))}
.tc--top .tc-pill{padding:0 18px 0 0;clip-path:inset(0 calc(50% - var(--tc-s) / 2) round var(--tc-r))}
.tc--top .tc-pill::after{clip-path:inset(1px calc(50% - var(--tc-s) / 2 + 1px) round calc(var(--tc-r) - 1px))}
.tc--free .tc-pill::before,.tc--free .tc-pill::after{clip-path:inset(50% calc(var(--tc-s) / 2) 50% calc(100% - var(--tc-s) / 2) round 0)}
.tc--top.tc--free .tc-pill::before,.tc--top.tc--free .tc-pill::after{clip-path:inset(50% 50% round 0)}
.tc.is-open .tc-pill,.tc.is-open .tc-pill::before{clip-path:inset(0 round calc(var(--tc-s) / 2))}
.tc.is-open .tc-pill::after{clip-path:inset(1px round calc(var(--tc-s) / 2 - 1px))}
.tc:not(.is-open) .tc-pill,.tc:not(.is-open) .tc-pill::before,.tc:not(.is-open) .tc-pill::after{transition-duration:.5s;transition-timing-function:var(--tc-settle)}

/* ---- the face: the basket at home size (site 64, app 48); its home never moves (corner); on top it rides from the
   centre to the pill's start. In the open pill the tile looks shrink it a touch so it clears the round end ---- */
.tc-face{flex:none;display:grid;place-items:center;width:var(--tc-s);height:var(--tc-s);margin:0;padding:0;border:0;
  border-radius:var(--tc-r);background:none;cursor:pointer;transition:transform .62s var(--tc-spring)}
.tc-face .tm{width:var(--tc-s);height:var(--tc-s);transition:transform .62s var(--tc-spring)}
.tc--light .tc-face .tm,.tc--cherry .tc-face .tm{transform:scale(.94)}
.tc.is-open .tc-face .tm{transform:scale(.86)}
.tc--free .tc-face .tm .tm-shadow.tm-sm{display:inline}
.tc-face:focus-visible{outline:3px solid #7A1E3A;outline-offset:-3px}
:where([data-theme="dark"]) .tc-face:focus-visible{outline-color:#FF8FAB}
.tc--top .tc-face{order:-1}
.tc--top:not(.is-open) .tc-face{transform:translateX(calc(var(--tc-w,64px) / 2 - var(--tc-s) / 2))}
.tc.tc-still .tc-face{transition:none}

/* ---- the line and its one action ---- */
.tc-msg{display:flex;align-items:center;gap:10px;min-width:0;opacity:0;visibility:hidden;transform:translateX(12px);
  transition:opacity .14s linear,transform .5s var(--tc-spring),visibility 0s .14s}
.tc--top .tc-msg{transform:translateX(-12px)}
.tc.is-open .tc-msg{opacity:1;visibility:visible;transform:none;transition:opacity .2s linear .1s,transform .55s var(--tc-spring) .04s,visibility 0s}
.tc-line{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9375rem;line-height:1.25;font-weight:650;letter-spacing:-.01em}
.tc-line b{font-weight:800;font-variant-numeric:tabular-nums}
.tc-act{position:relative;flex:none;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;
  background:var(--tc-act);color:var(--tc-act-fg);font-size:.84375rem;font-weight:800;text-decoration:none;white-space:nowrap}
.tc-act::after{content:"";position:absolute;inset:-4px -3px}
.tc-act[hidden]{display:none}
.tc--top .tc-act{height:34px;padding:0 14px}
.tc-act:active{transform:scale(.96)}
.tc-act:focus-visible,.tc-x:focus-visible{outline:3px solid #FF8FAB;outline-offset:2px}
.tc-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0 -8px 0 -10px;padding:0;border:0;background:none;color:var(--tc-x);cursor:pointer}
.tc-x path{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round}
.tc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- the number rolls once (odometer): digit columns, aria-hidden; the value is read from tc-sr ---- */
.tc-roll{display:inline-flex;vertical-align:bottom}
.tc-col{display:inline-block;height:1.25em;overflow:hidden}
.tc-col>span{display:block;transition:transform 1.1s var(--tc-settle)}
.tc-col i{display:block;height:1.25em;font-style:normal;text-align:center}
.tc-roll .tc-eur{font-size:.6em;align-self:flex-end;margin-left:.15em;line-height:2}

/* ---- reduced motion: instant states, the line crossfades in 150 ms, the number lands without rolling ---- */
@media (prefers-reduced-motion:reduce){.tc *{transition:opacity .15s linear!important;animation:none!important}}
.tc.tc-rm *{transition:opacity .15s linear!important;animation:none!important}

/* ---- phones: a section header's link stays out of the corner's column (64 px face + 12 px offset + 12 px) ---- */
:root{--tc-col:calc(64px + 12px + 12px)}
@media (max-width:480px){body:has(.tc) .d2-sec__h:has(> :is(a,button)){flex-wrap:wrap;padding-right:var(--tc-col)}}