/* The "i" button and its popover (info.js). Same file on the website, the customer app and HQ (static/info.css, hq/info.css are byte-identical copies):
   it reads each surface's own paper / ink / lime tokens and falls back to the Classic ones, so it looks at home in all three. */
.info-dot{--i-ink:var(--ink,#17191b);--i-bg:var(--win,var(--window,#f8f7f2));
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:20px;height:20px;min-width:20px;margin:0 0 0 4px;padding:0;
  border:1.5px solid var(--i-ink);border-radius:50%;background:var(--i-bg);color:var(--i-ink);cursor:pointer;vertical-align:middle;
  font:italic 700 12px/1 var(--display,var(--title,Georgia,"Times New Roman",serif));text-transform:none;letter-spacing:0;box-shadow:1px 1px 0 var(--hair,rgba(23,25,27,.14))}
.info-dot::after{content:"";position:absolute;inset:-12px}   /* the target a thumb needs (44px) around a 20px circle */
.info-dot:hover,.info-dot[aria-expanded="true"]{background:var(--lime,#b6d82f);color:var(--lime-ink,#1a2200)}
.info-dot:focus-visible{outline:2px solid var(--i-ink);outline-offset:2px}
.info-dot span{pointer-events:none}

.info-layer{position:fixed;inset:0;z-index:100000;pointer-events:none}
.info-layer[hidden]{display:none}
.info-layer *{box-sizing:border-box}
.info-backdrop{display:none}
.info-pop{--i-ink:var(--ink,#17191b);--i-bg:var(--win,var(--window,#f8f7f2));--i-muted:var(--muted,#5f645e);
  pointer-events:auto;position:fixed;max-width:calc(100vw - 24px);max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain;padding:14px 16px 14px;
  background:var(--i-bg);color:var(--i-ink);border:1px solid var(--i-ink);border-radius:10px;box-shadow:3px 3px 0 var(--hair,rgba(23,25,27,.14)),0 14px 30px -12px rgba(0,0,0,.4);
  font:15px/1.4 var(--body,var(--font,system-ui,sans-serif));text-align:left}
.info-pop:focus{outline:none}
.info-title{margin:0 28px 6px 0;font:700 17px/1.2 var(--display,var(--title,Georgia,serif));letter-spacing:-.01em}
.info-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;font:400 22px/1 system-ui,sans-serif;cursor:pointer;padding:0}
.info-x:hover{background:var(--lime,#b6d82f);color:var(--lime-ink,#1a2200);border-color:var(--i-ink)}
.info-x:focus-visible,.info-pop a:focus-visible{outline:2px solid var(--i-ink);outline-offset:2px}
.info-dl{margin:0}
.info-dl dt{margin:8px 0 1px;font:600 11px/1.2 var(--mono,ui-monospace,monospace);text-transform:uppercase;letter-spacing:.08em;color:var(--i-muted)}
.info-dl dd{margin:0}
.info-cost{margin:10px 0 0;padding:6px 8px;border-left:3px solid var(--lime,#b6d82f);background:var(--win-2,var(--chrome,rgba(23,25,27,.05)));font:13.5px/1.35 var(--mono,ui-monospace,monospace)}
.info-more{margin:10px 0 0}
.info-more a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .info-pop{opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
  .info-pop.is-in{opacity:1;transform:none}
  .is-sheet .info-pop{transform:translateY(24px)}
  .is-sheet .info-pop.is-in{transform:none}
}
/* a phone: a bottom sheet over a dimmed page */
@media (max-width:640px){
  .info-layer.is-sheet{pointer-events:auto}
  .is-sheet .info-backdrop{display:block;position:absolute;inset:0;background:rgba(10,12,11,.38)}
  .is-sheet .info-pop{left:0!important;right:0;top:auto!important;bottom:0;width:auto!important;max-width:none;max-height:80vh;border-width:1px 0 0;border-radius:14px 14px 0 0;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px -10px rgba(0,0,0,.45);font-size:16px}
  .is-sheet .info-pop::before{content:"";display:block;width:40px;height:4px;margin:-8px auto 10px;border-radius:2px;background:var(--hair,rgba(23,25,27,.25))}
  .is-sheet .info-x{width:44px;height:44px;top:8px;right:8px}
}
@media (forced-colors:active){.info-dot,.info-pop{border-color:CanvasText}}