/* Activity tab on Eagle Tracker streams (app/js/eagle_activity.js), from Eagle
   Tracker's per-stream page. Data marks use a deeper orange than the brand's
   in light mode (#D9650F, 3.6:1 on white). Visit states: orange = watchable,
   green + stripes = eagle there now (stripes keep it distinct from the red
   "now" line for red-green colour-blind viewers), yellow = video coming,
   grey = no footage. */
.eagle-activity, .ea-visit, .ea-tip, .ea-tagmenu, .ea-toast, .ea-nowbar, .ea-tour {
  --ea-brand: #F47B20; --ea-brand-ink: #1a1a1a;
  --ea-panel: #ffffff; --ea-ink: #1f1f1f; --ea-muted: #6b6b6b; --ea-line: #e5e6e6; --ea-track: #f2f2f2;
  --ea-visit: #D9650F; --ea-visit-hover: #b85309; --ea-current: #16a34a; --ea-pending: #E5A800;
  --ea-failed: #808285; --ea-sel: #1f1f1f; --ea-now: #dc2626; --ea-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
html.dark .eagle-activity, html.dark .ea-visit, html.dark .ea-tip, html.dark .ea-tagmenu, html.dark .ea-toast, html.dark .ea-nowbar,
html.dark .ea-tour {
  --ea-panel: #212121; --ea-ink: #ffffff; --ea-muted: #a3a3a3; --ea-line: #333333; --ea-track: #2c2c2c;
  --ea-visit: #F47B20; --ea-visit-hover: #ff9446; --ea-current: #22c55e; --ea-pending: #FACC15;
  --ea-sel: #ffffff; --ea-now: #ef4444; --ea-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.eagle-activity { color: var(--ea-ink); font-size: 14px; line-height: 1.45; }
.eagle-activity [hidden], .ea-tip[hidden] { display: none !important; }
.eagle-activity button { font: inherit; color: inherit; }
.ea-loading { color: var(--ea-muted); padding: 12px 0; }
.ea-card { background: var(--ea-panel); border: 1px solid var(--ea-line); border-radius: 10px; }

.ea-status { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; font-size: 15px; }
.ea-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ea-failed); flex: none; }
.ea-dot.on { background: var(--ea-current); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ea-current) 25%, transparent); }
.ea-howto { margin-left: auto; flex: none; font-size: 13px; color: var(--ea-muted); background: none; border: 0;
            padding: 2px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ea-howto:hover { color: var(--ea-ink); }
.ea-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ea-tile { padding: 12px 14px; }
.ea-label { color: var(--ea-muted); font-size: 12px; }
.ea-value { font-size: 26px; font-weight: 600; margin-top: 2px; }
.ea-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ea-range { display: flex; gap: 6px; }
.ea-filters button { background: var(--ea-panel); border: 1px solid var(--ea-line); border-radius: 6px;
                     padding: 5px 12px; cursor: pointer; }
.ea-filters button.on { border-color: var(--ea-ink); font-weight: 600; }
.ea-filters .ea-filter-btn { margin-left: auto; }
@media (max-width: 480px) { .ea-filters, .ea-range { gap: 4px; } .ea-filters button { padding: 5px 9px; } }
.ea-filter-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
                        border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ea-filternote { color: var(--ea-ink); font-size: 12px; font-weight: 600; margin-top: 4px; }
.ea-filternote[hidden] { display: none; }
.ea-empty { color: var(--ea-muted); padding: 8px 4px; }
.ea-chart { padding: 14px 16px 16px; margin-bottom: 16px; }
.ea-chart h3 { font-size: 14px; font-weight: 600; margin: 0; }
.ea-sub { color: var(--ea-muted); font-size: 12px; margin: 2px 0 12px; }
.ea-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

/* day-by-day rows */
.ea-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; padding: 3px 0; }
.ea-day { color: var(--ea-muted); font-size: 12px; white-space: nowrap; }
.ea-day.today { color: var(--ea-ink); font-weight: 600; }
.ea-track { position: relative; height: 20px; background: var(--ea-track); border-radius: 5px; }
.ea-axis .ea-track { background: none; height: 18px; }
.ea-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--ea-muted); white-space: nowrap; }
.ea-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ea-line); }
.ea-bar { position: absolute; top: 3px; bottom: 3px; min-width: 4px; border-radius: 3px;
          background: var(--ea-visit); cursor: pointer; border: 0; padding: 0; }
.ea-bar:hover { background: var(--ea-visit-hover); }
.ea-bar.open { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .35) 0 3px, transparent 3px 6px), var(--ea-current); }
.ea-bar.pending { background: var(--ea-pending); }
.ea-bar.failed { background: var(--ea-failed); }
.ea-bar.sel { outline: 2px solid var(--ea-sel); outline-offset: 1px; }
.ea-bar.dim { opacity: .22; }
.ea-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px;
             border-top: 1px solid var(--ea-line); color: var(--ea-muted); font-size: 12px; }
.ea-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ea-sw.done { background: var(--ea-visit); }
.ea-sw.open { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .35) 0 3px, transparent 3px 6px), var(--ea-current); }
.ea-sw.pending { background: var(--ea-pending); }
.ea-sw.failed { background: var(--ea-failed); }
.ea-sw.now { width: 2px; background: var(--ea-now); }
.ea-now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ea-now); pointer-events: none; }

/* columns: <=24px wide, 4px rounded data-end, square at the baseline */
.ea-cols { position: relative; height: 160px; margin-left: 58px; }
.ea-yt { position: absolute; left: -58px; width: 52px; white-space: nowrap; text-align: right; font-size: 11px;
         color: var(--ea-muted); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.ea-gl { position: absolute; left: 0; right: 0; height: 1px; background: var(--ea-line); }
.ea-slots { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.ea-slot { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.ea-slot:hover .ea-c, .ea-slot:focus-visible .ea-c { background: var(--ea-visit-hover); }
.ea-slot:focus-visible { outline: 2px solid var(--ea-sel); outline-offset: -2px; border-radius: 4px; }
.ea-c { width: min(24px, 70%); background: var(--ea-visit); border-radius: 4px 4px 0 0; min-height: 0; }
.ea-peak { position: absolute; font-size: 11px; color: var(--ea-ink); transform: translate(-50%, -4px);
           white-space: nowrap; pointer-events: none; }
.ea-xl { display: flex; margin-left: 58px; margin-top: 6px; }
.ea-xl span { flex: 1; text-align: center; font-size: 11px; color: var(--ea-muted); white-space: nowrap; overflow: visible; }

.ea-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--ea-panel); color: var(--ea-ink);
          border: 1px solid var(--ea-line); border-radius: 6px; padding: 6px 9px; box-shadow: var(--ea-shadow);
          font-size: 12px; max-width: 260px; }
.ea-tip strong { display: block; font-size: 13px; }
.ea-tip span { color: var(--ea-muted); }

/* every visit */
.ea-list { padding: 8px; margin-bottom: 16px; }
.ea-list h3 { font-size: 14px; font-weight: 600; margin: 6px 8px 8px; }
.ea-item { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; width: 100%;
           padding: 6px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; }
.ea-item:hover { background: var(--ea-track); }
.ea-item.sel { background: var(--ea-track); box-shadow: inset 3px 0 0 var(--ea-sel); }
.ea-item img, .ea-item .ea-ph { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px;
                                background: var(--ea-track); display: block; }
.ea-item small { color: var(--ea-muted); display: block; }
.ea-more { background: none; border: 1px solid var(--ea-line); border-radius: 6px; padding: 5px 12px; margin: 8px; cursor: pointer; }

/* a visit in the main player; its caption and the label prompt in the bar under the title */
.ea-visit { background: var(--ea-panel); color: var(--ea-ink); }
.ea-nowbar { background: var(--ea-panel); color: var(--ea-ink); border: 1px solid var(--ea-line); border-radius: 10px;
          margin: 4px 4px 8px; overflow: hidden; }
.ea-nowbar[hidden], .ea-caption[hidden] { display: none; }
.ea-caption:not([hidden]) + .ea-prompt { border-top: 1px solid var(--ea-line); }
/* "●LIVE" in the live stream's indicator's place and type (video.js's .vjs-live-display),
   with a grey dot: not live, click to go live (as YouTube shows it when behind live) */
.video-js .ea-vjs-live { width: auto; padding: 0 11px 0 0; cursor: pointer; font-size: 14px; font-weight: 400; }
.video-js .ea-vjs-live-label i { color: #9ca3af; font-style: italic; font-size: 15px; margin-right: 6px; }
/* the stream's logo, sized as on the live stream: these rules come with the live player
   (includes/player.html), which is gone while a visit plays */
.ea-visit .video-js .vjs-overlay.hdontap-responsive-overlay { width: 100%; max-width: 100%; }
.ea-visit .video-js .vjs-overlay.hdontap-responsive-overlay.vjs-overlay-top-left,
.ea-visit .video-js .vjs-overlay.hdontap-responsive-overlay.vjs-overlay-bottom-left { text-align: left; }
.ea-visit .video-js .vjs-overlay.hdontap-responsive-overlay.vjs-overlay-top-right,
.ea-visit .video-js .vjs-overlay.hdontap-responsive-overlay.vjs-overlay-bottom-right { text-align: right; }
.ea-visit .video-js { width: 100%; }
.ea-noclip { aspect-ratio: 16 / 9; background: #000; color: #ccc; display: grid; place-items: center;
             text-align: center; padding: 16px; }
.ea-caption { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 12px; font-size: 14px; }
.ea-caption b { font-weight: 600; }
.ea-caption > span { color: var(--ea-muted); }
.ea-modes { display: inline-flex; border: 1px solid var(--ea-line); border-radius: 6px; overflow: hidden; }
.ea-modes button { font: inherit; font-size: 13px; color: inherit; background: var(--ea-panel); border: 0;
                   padding: 3px 10px; cursor: pointer; }
.ea-modes button + button { border-left: 1px solid var(--ea-line); }
.ea-modes button.on { background: var(--ea-brand); color: var(--ea-brand-ink); font-weight: 600; }
.ea-soon { color: var(--ea-muted); font-size: 13px; }
.ea-back { margin-left: auto; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #fff;
           background: var(--ea-now); border: 0; border-radius: 6px; padding: 4px 12px; }
.ea-back:hover { filter: brightness(1.1); }

/* activity tags */
.ea-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ea-chip { font: inherit; font-size: 12px; line-height: 1.4; padding: 1px 8px; border-radius: 999px; border: 0;
           background: color-mix(in srgb, var(--ea-visit) 18%, var(--ea-panel)); color: var(--ea-ink); }
.ea-chip.pending { background: none; outline: 1px dashed var(--ea-muted); color: var(--ea-muted); }
button.ea-chip { cursor: pointer; }
button.ea-chip:hover { background: color-mix(in srgb, var(--ea-visit) 32%, var(--ea-panel)); }
/* the viewer's own label: its chip, and a × to delete it */
.ea-chippair { display: inline-flex; align-items: center; gap: 1px; }
.ea-chipx { font: inherit; font-size: 13px; line-height: 1; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
            background: none; color: var(--ea-muted); cursor: pointer; }
.ea-chipx:hover, .ea-chipx:focus-visible { background: color-mix(in srgb, var(--ea-now) 18%, var(--ea-panel)); color: var(--ea-now); }
.ea-tagrow { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ea-taglabel { color: var(--ea-muted); font-size: 12px; }
.ea-mark { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 2px;
           background: #FACC15; pointer-events: none; z-index: 2; }
.ea-mark.pending { background: rgba(250, 204, 21, .5); }
/* the label prompt under the player: the question, and a button for the list of activities */
.ea-prompt { display: flex; align-items: center; gap: 6px 10px; padding: 6px 12px; font-size: 13px; color: var(--ea-ink);
             background: var(--ea-panel); }
.ea-prompt[hidden] { display: none; }
.ea-prompt-q { font-weight: 600; min-width: 0; }
/* plain, not orange: orange here means the mode playing (Timelapse / Normal speed) */
.ea-choose { flex: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ea-ink);
             background: var(--ea-panel); border: 1px solid var(--ea-muted); border-radius: 6px; padding: 3px 10px; }
.ea-choose::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
                    border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ea-choose:hover, .ea-choose[aria-expanded="true"] { background: var(--ea-track); }
.ea-prompt-x { flex: none; margin-left: auto; font: inherit; font-size: 18px; line-height: 1; color: var(--ea-muted);
               background: none; border: 0; padding: 2px 6px; cursor: pointer; border-radius: 4px; }
.ea-prompt-x:hover { color: var(--ea-ink); background: var(--ea-track); }
.ea-tagmenu { position: fixed; z-index: 80; min-width: 220px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto;
              background: var(--ea-panel); color: var(--ea-ink); border: 1px solid var(--ea-line); border-radius: 8px;
              box-shadow: 0 8px 30px rgba(0, 0, 0, .25); padding: 6px; font-size: 14px; }
.ea-tagmenu p { margin: 4px 8px 6px; color: var(--ea-muted); font-size: 13px; }
.ea-tagmenu p.ea-tagnote { margin: 8px 8px 2px; font-size: 12px; max-width: 220px; }
.ea-tagmenu button, .ea-tagmenu .ea-login { display: block; width: 100%; text-align: left; font: inherit; color: inherit;
              background: none; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; text-decoration: none; }
.ea-tagmenu button:hover, .ea-tagmenu button:focus-visible, .ea-tagmenu .ea-login:hover { background: var(--ea-track); outline: none; }
.ea-tagmenu .ea-login { color: var(--ea-brand); font-weight: 600; }
/* the activity filter's dropdown (a .ea-tagmenu) */
.ea-filtermenu .ea-check { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.ea-filtermenu .ea-check:hover { background: var(--ea-track); }
.ea-filtermenu .ea-check input { width: 16px; height: 16px; accent-color: var(--ea-visit); margin: 0; }
.ea-filtermenu .ea-check span { flex: 1; }
.ea-filtermenu .ea-check small { color: var(--ea-muted); font-size: 12px; }
.ea-filtermenu .ea-check.none span { color: var(--ea-muted); }
.ea-filtermenu button.ea-clear { margin-top: 4px; border-top: 1px solid var(--ea-line); border-radius: 0 0 6px 6px;
                                 color: var(--ea-brand); font-weight: 600; }
.ea-filtermenu button.ea-clear:disabled { color: var(--ea-muted); font-weight: 400; cursor: default; background: none; }
.ea-toast { position: fixed; z-index: 81; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px));
            max-width: calc(100vw - 32px); background: var(--ea-ink); color: var(--ea-panel); padding: 10px 14px; border-radius: 8px;
            box-shadow: var(--ea-shadow); font-size: 14px; }
.ea-toast[hidden] { display: none; }
.ea-toast a, .ea-toast button { color: var(--ea-brand); font-weight: 600; }
.ea-toast button { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* the tour: the hole's shadow dims the page around the part shown; the blocks take
   clicks outside it (and the hole too, unless the step lets the viewer try it). The
   card is daisyUI's, like the Share Rewards callout (input.css .share-callout). */
.ea-tour { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.ea-tour-block { position: fixed; pointer-events: auto; }
.ea-tour-hole { position: fixed; pointer-events: auto; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .62);
                outline: 2px solid hsl(var(--in)); transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease; }
html.dark .ea-tour-hole { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .78); }
.ea-tour-hole.live { pointer-events: none; }
.ea-tour-card { position: fixed; pointer-events: auto; width: min(380px, calc(100vw - 16px)); line-height: 1.45;
                animation: callout-fade-in 400ms ease-out; transition: top .35s ease, left .35s ease; }
.ea-tour-card .card-body { padding: 1.25rem; gap: 0; }
.ea-tour-card .card-title { font-size: 1.125rem; margin: 10px 0 .5rem; }
.ea-tour-card .card-actions { margin-top: 1rem; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ea-tour-left, .ea-tour-right { display: flex; gap: .25rem; align-items: center; }
.ea-tour-right { margin-left: auto; }
.ea-tour-card .card-actions .btn { white-space: nowrap; }
.ea-tour-card .card-actions .btn[hidden] { display: none; }
/* the arrow to the part, like the callout's to the share button */
.ea-tour-arrow { position: absolute; width: 0; height: 0; margin-left: -12px;
                 border-left: 12px solid transparent; border-right: 12px solid transparent; }
.ea-tour-arrow[hidden] { display: none; }
.ea-tour-arrow.up { bottom: 100%; border-bottom: 12px solid hsl(var(--in)); }
.ea-tour-arrow.down { top: 100%; border-top: 12px solid hsl(var(--in)); }
/* a ring on each control the step's text names */
.ea-tour-ring { position: fixed; pointer-events: none; border-radius: 8px; box-shadow: 0 0 0 3px hsl(var(--in));
                animation: ea-tour-ring 1.6s ease-out infinite; }
.ea-tour-ring[hidden] { display: none; }
@keyframes ea-tour-ring {
  from { box-shadow: 0 0 0 3px hsl(var(--in)), 0 0 0 3px hsl(var(--in) / .7); }
  to { box-shadow: 0 0 0 3px hsl(var(--in)), 0 0 0 14px hsl(var(--in) / 0); }
}
.ea-tour-dots { display: flex; gap: 5px; }
.ea-tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .4); transition: width .2s; }
.ea-tour-dots i.on { width: 18px; background: #fff; }
/* a shorter, wider card: on a short screen (a phone in landscape: docked at the bottom), and
   for a step whose parts don't leave room for the full card (scrollToStep) */
.ea-tour-card.compact { width: min(560px, calc(100vw - 16px)); line-height: 1.35; }
.ea-tour-card.compact .card-body { padding: .75rem 1rem; }
.ea-tour-card.compact .card-title { font-size: 1rem; margin: 6px 0 .25rem; }
.ea-tour-card.compact p { font-size: 14px; }
.ea-tour-card.compact .card-actions { margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) { .ea-tour-hole, .ea-tour-card, .ea-tour-dots i, .ea-tour-ring { transition: none; animation: none; } }

@media (max-width: 760px) {
  .ea-two { grid-template-columns: minmax(0, 1fr); }
  .ea-row { grid-template-columns: 74px minmax(0, 1fr); }
  .ea-tick.minor { display: none; }
  .ea-value { font-size: 22px; }
}