/* v22.3: the session pill (frosted glass, the site's pills); above the tab bar on phones, low and centered on laptops */
.etc-sess{position:fixed;left:50%;translate:-50% 0;bottom:calc(20px + env(safe-area-inset-bottom));z-index:45;width:max-content;max-width:calc(100vw - 24px);
  padding:8px 8px 8px 16px;border-radius:22px;background:var(--g,rgba(24,28,34,.78));border:1px solid var(--g-line,rgba(255,255,255,.14));box-shadow:var(--g-shadow,0 10px 30px rgba(0,0,0,.35));
  -webkit-backdrop-filter:var(--g-blur,blur(18px));backdrop-filter:var(--g-blur,blur(18px));color:var(--ink);font:500 13px var(--disp,system-ui);animation:es-in .35s cubic-bezier(.22,.8,.25,1)}
.etc-sess[hidden]{display:none}
@keyframes es-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.es-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px}
.es-k{font:700 10px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#2E5E46)}
.es-n{font-weight:700}.es-t{font-variant-numeric:tabular-nums;color:var(--muted);min-width:40px}
.es-nx{color:var(--muted)}.es-nx b{color:var(--ink);font-weight:600}
.es-b{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--g-line,rgba(255,255,255,.2));background:transparent;color:var(--ink);font:600 13px var(--disp);cursor:pointer}
.es-b.p{background:var(--accent,#5b86b5);border-color:transparent;color:var(--on-accent,#fff)}
.es-x{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.es-rule{margin:4px 2px 0;font-size:11.5px;color:var(--muted)}.es-rule b{font:700 9.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#2E5E46);margin-right:6px}
@media (max-width:899px) and (min-height:501px){
  .etc-sess{bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100vw - 24px);padding:8px 8px 8px 14px;border-radius:18px}
  .es-row{gap:8px;flex-wrap:nowrap}.es-k,.es-rule,.es-nx .now{display:none}.es-nx{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.25}
  .es-b,.es-x{min-height:40px}.es-x{width:40px;height:40px}.es-row .es-b.p{margin-left:auto}
}
@media (orientation:landscape) and (max-height:500px){.etc-sess{bottom:10px;padding:5px 6px 5px 12px}.es-rule{display:none}}
[data-k="session"].is-done{filter:saturate(.6)}
/* v22.4: light mode gets its own glass: near-white, dark ink, a real edge, so the pill reads over a white panel or a bright scene */
:root:not([data-mode="dark"]) .etc-sess{background:rgba(255,255,255,.94);border-color:rgba(21,25,27,.14);box-shadow:0 10px 28px rgba(21,25,27,.18);color:#15191b}
:root:not([data-mode="dark"]) .es-t,:root:not([data-mode="dark"]) .es-nx,:root:not([data-mode="dark"]) .es-rule,:root:not([data-mode="dark"]) .es-x{color:#4a5560}
:root:not([data-mode="dark"]) .es-nx b,:root:not([data-mode="dark"]) .es-n{color:#15191b}
:root:not([data-mode="dark"]) .es-k,:root:not([data-mode="dark"]) .es-rule b{color:#9a6a12}
:root:not([data-mode="dark"]) .es-b{color:#15191b;border-color:rgba(21,25,27,.2)}
:root:not([data-mode="dark"]) .es-b.p{background:#3f6f9f;color:#fff;border-color:transparent}
/* the toast (tilt rule, "Next: …") rises above the pill while a session runs */
body.has-sess .toast{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 76px)}
@media (max-width:899px) and (min-height:501px){body.has-sess .toast{bottom:calc(84px + env(safe-area-inset-bottom) + 70px)}}