/* the Jar's canvas and its hover card, shared by the terminal (/app) and the home page's live preview.
   Plain colours (no page tokens), because the jar is always dark resin, on the honey page too. */
.jar-cv { position: absolute; inset: 0; display: block; touch-action: pan-y; }
.jar-tip { position: absolute; z-index: 4; width: 250px; padding: 12px 14px; border-radius: 12px; background: rgba(30, 25, 20, .96); color: #F4EAD8; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 244, 223, .14); pointer-events: none; backdrop-filter: blur(4px); font-family: var(--text); }
.jar-tip b { display: block; font: 700 14.5px/1.2 var(--mono); color: #FFF4DF; }
.jar-tip > span { display: block; font-size: 12px; color: rgba(244, 234, 216, .4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-row { display: flex; gap: 12px; margin-top: 9px; }
.jt-row em { font: 600 12px/1 var(--mono); font-style: normal; color: #F4EAD8; }
.jt-life { margin-top: 9px; font: 700 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.jt-life.grad { color: #FFCD5A; } .jt-life.rising { color: #F39A22; } .jt-life.fresh { color: rgba(244, 234, 216, .6); } .jt-life.fossil { color: rgba(244, 234, 216, .45); }
.jt-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.jt-flags .flag { height: 22px; font-size: 11.5px; }
.jar-tip .flag.risk { background: rgba(229, 72, 77, .15); color: #FF8A8D; }
.jar-tip .flag.warn { background: rgba(243, 154, 34, .15); color: #F7B456; }
.jar-tip .flag.ok { background: rgba(34, 160, 107, .16); color: #5FD3A0; }
.jar-tip .flag.info { background: rgba(255, 244, 223, .07); color: rgba(244, 234, 216, .78); }
.jar-tip small { display: block; margin-top: 9px; font-size: 11px; color: rgba(244, 234, 216, .4); }