/* DROP analytics on top of the Astin system (astin.css) and the DROP admin shell (admin.css). */

.ad-h1 { margin: 0; font-size: var(--text-h1, 1.75rem); font-weight: 800; }
.ad-shell .main.is-wide { max-width: 1400px; }
.ad-shell .header .site-pick { width: auto; min-width: 140px; }
.page-head { margin-block-end: 0; flex-wrap: wrap; }
.page-head .back { margin-inline-start: -0.6rem; margin-block-end: var(--space-2); }
.page-head .back svg { transform: scaleX(-1); }
.icon-button.is-sm { width: var(--control-sm); height: var(--control-sm); display: inline-grid; place-items: center; border-radius: var(--r-pill); color: var(--muted); }
.icon-button.is-sm:hover { background: var(--surface-2); color: var(--fg); }
.icon-button.is-sm svg { width: var(--icon-sm); height: var(--icon-sm); }
.badge svg { width: 12px; height: 12px; }
.badge.is-bad { color: var(--danger-fg); background: var(--danger-bg); }

/* sign-in */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.login { width: min(380px, 100%); }

/* brand marks: the icon file as a mask, painted in the brand colour */
.bi { display: inline-block; width: 16px; height: 16px; flex: none; vertical-align: -3px; background: var(--c, currentColor);
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.bi.is-plain { background: none; -webkit-mask: none; mask: none; color: var(--muted); display: inline-grid; place-items: center; }
.bi.is-plain svg { width: 16px; height: 16px; }
.marks { display: inline-flex; gap: 6px; align-items: center; }
.ad-h1 .marks .bi { width: 20px; height: 20px; }

/* overview */
.ov-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1000px) { .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } .ov-stats .stat-value { font-size: 1.6rem; } }

/* breakdown lists: a bar behind each row */
.bd .card-head .ad-h2 svg { width: var(--icon-md); height: var(--icon-md); color: var(--muted); }
.bd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bd-row { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: 0 var(--space-3); border-radius: var(--r-sm); text-decoration: none; color: inherit; overflow: hidden; isolation: isolate; }
a.bd-row:hover { background: var(--surface-2); }
.bd-bar { position: absolute; inset-block: 4px; inset-inline-start: 0; background: var(--surface-3); border-radius: var(--r-xs); z-index: -1; opacity: 0.7; min-width: 2px; }
.bd-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.bd-label svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.bd-label .ltr.truncate { max-width: 100%; }
.bd-value { font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.bd-share { color: var(--subtle); font-size: var(--text-caption); min-width: 3.2em; text-align: end; }

/* line chart */
.lc-wrap { position: relative; }
.lc { width: 100%; height: 220px; display: block; overflow: visible; }
.lc-grid { stroke: var(--line); stroke-width: 1; }
.lc-axis { fill: var(--subtle); font-size: 11px; font-family: var(--font-sans); }
.lc-area { fill: color-mix(in srgb, var(--fg) 8%, transparent); }
.lc-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.lc-line.s0, .sw.s0 { stroke: var(--fg); background: var(--fg); }
.lc-line.s1, .sw.s1 { stroke: var(--accent); background: var(--accent); }
.lc-line.s1 { stroke-dasharray: 5 4; }
.lc-guide { stroke: var(--muted); stroke-width: 1; opacity: 0; vector-effect: non-scaling-stroke; }
.lc-tip { position: absolute; top: 0; width: 160px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-inv); color: var(--fg-inv); font-size: var(--text-caption); pointer-events: none; opacity: 0; transition: opacity var(--dur-fast); display: flex; flex-direction: column; gap: 2px; }
.lc-legend { display: flex; gap: var(--space-4); font-size: var(--text-caption); color: var(--muted); }
.lc-legend > span, .lc-tip div { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }

/* vertical bars (hours, weekdays, minutes) */
.vbars { display: flex; align-items: stretch; gap: 3px; }
.vbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.vbar span { width: 100%; background: var(--fg); opacity: 0.8; border-radius: 3px 3px 0 0; min-height: 2px; }
.vbar:hover span { opacity: 1; background: var(--accent); }
.vbar em { font-style: normal; font-size: 10px; color: var(--subtle); white-space: nowrap; }
.vbars:has(.vbar:nth-child(20)) .vbar:nth-child(odd) em { visibility: hidden; }

/* live */
.live-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); }
@media (max-width: 900px) { .live-top { grid-template-columns: minmax(0, 1fr); } }

/* visit rows */
.sess { min-height: 64px; }
.sess .avatar.is-known { background: var(--accent-bg); color: var(--accent-fg); font-weight: 800; }
.sess-main { display: flex; flex-direction: column; gap: 3px; }
.sess-line { flex-wrap: wrap; row-gap: 2px; }
.sess-side { text-align: end; flex: none; display: flex; flex-direction: column; gap: 2px; }
.sess > svg:last-child { width: 16px; height: 16px; color: var(--subtle); transform: scaleX(-1); flex: none; }
.path-chain { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
.path-chain .sep { color: var(--subtle); }
@media (max-width: 760px) { .sess-side .meta { display: none; } .sess .ltr.mono { display: none; } }

/* one visit */
.sess-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .sess-grid { grid-template-columns: minmax(0, 1fr); } }
.kv-grid { display: flex; flex-direction: column; gap: 0; }
.kv { display: flex; justify-content: space-between; gap: var(--space-3); padding: 9px 0; font-size: var(--text-sm); border-block-end: 1px solid var(--line); }
.kv > span:first-child { color: var(--muted); flex: none; }
.kv > span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: end; }
.kv-ua { padding-top: 10px; font-size: var(--text-caption); color: var(--muted); }
.kv-ua code { display: block; margin-top: 6px; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 11px; }
.replay .player { display: flex; justify-content: center; }
.replay .rr-player { box-shadow: none !important; background: var(--surface-2) !important; border-radius: var(--r-sm); overflow: hidden; }
.replay .rr-controller { background: var(--surface-2) !important; }
.replay .rr-timeline__time, .replay .rr-controller__btns button { color: var(--fg) !important; }
.replay .rr-controller__btns button svg { fill: var(--fg) !important; }
.replay .rr-controller__btns button.active { background: var(--fg) !important; color: var(--bg) !important; }

.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 3.4em 28px minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: 7px var(--space-2); border-radius: var(--r-sm); cursor: pointer; font-size: var(--text-sm); }
.tl-item:hover { background: var(--surface-2); }
.tl-time { color: var(--subtle); font-family: var(--font-mono); font-size: var(--text-caption); padding-top: 4px; direction: ltr; text-align: end; }
.tl-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.tl-icon svg { width: 14px; height: 14px; }
.tl-item.is-pv { margin-top: var(--space-2); }
.tl-item.is-pv .tl-icon { background: var(--surface-inv); color: var(--fg-inv); }
.tl-item.is-rage .tl-icon, .tl-item.is-error .tl-icon { background: var(--danger-bg); color: var(--danger-fg); }
.tl-item.is-dead .tl-icon { background: var(--accent-bg); color: var(--accent-fg); }
.tl-item.is-event .tl-icon, .tl-item.is-identify .tl-icon { background: var(--signal-bg); color: var(--signal-fg); }
.tl-body { min-width: 0; padding-top: 4px; overflow-wrap: anywhere; }
.tl-kind { color: var(--muted); font-weight: 600; }
.tl-props { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }

/* click map */
.heat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .heat-grid { grid-template-columns: minmax(0, 1fr); } }
.heat-stage { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); max-height: none; }
.heat-back, .heat-canvas { position: absolute; inset: 0; }
.heat-back { overflow: hidden; pointer-events: none; }
.heat-back .rr-player { position: absolute !important; top: 0; left: 0; }
.heat-back .rr-player__frame { overflow: hidden; }
.heat-back .replayer-mouse, .heat-back .replayer-mouse-tail { display: none !important; }
.heat-canvas { width: 100%; height: 100%; pointer-events: none; mix-blend-mode: normal; }
.heat-noback { position: absolute; inset-inline: 0; top: var(--space-4); text-align: center; color: var(--subtle); font-size: var(--text-sm); padding: 0 var(--space-4);
  background-image: linear-gradient(var(--line) 1px, transparent 1px); }

/* settings */
.code { position: relative; background: var(--surface-2); border-radius: var(--r-sm); }
.code pre { margin: 0; padding: var(--space-4); padding-inline-end: 96px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre; text-align: left; }
.code .btn { position: absolute; top: 8px; left: 8px; }
.tl-body .ltr { text-align: right; }
.tl-body .meta { color: var(--subtle); font-size: var(--text-caption); }
.replay .rr-controller__btns .switch label { font-size: 0 !important; }
.segmented button { display: inline-flex; align-items: center; gap: 6px; }
.segmented button svg { width: 16px; height: 16px; }
.table-toolbar > .select { width: auto; min-width: 220px; max-width: 100%; flex: 0 1 360px; }
.code { direction: ltr; }
@media (max-width: 760px) {
  .ad-shell .header .ad-user { display: none; }
  .ad-shell .header .site-pick { min-width: 0; max-width: 136px; }
  .ad-shell .header .brand .t-muted { display: none; }
  .page-head .segmented { max-width: 100%; overflow-x: auto; }
  .ov-stats { gap: var(--space-2); }
  .ov-stats .stat { padding: var(--space-4); }
}

/* sources */
.table tr.is-link { cursor: pointer; }
.share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.share span { height: 6px; border-radius: 3px; background: var(--fg); min-width: 2px; }
.share em { font-style: normal; font-size: var(--text-caption); color: var(--muted); }
.tabs .tab { text-decoration: none; white-space: nowrap; }
.utm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 760px) { .utm-grid { grid-template-columns: minmax(0, 1fr); } }
.chip.is-btn { padding-inline: 0.8rem; cursor: pointer; border: 0; font: inherit; font-size: var(--text-sm); }
.chip.is-btn:hover { background: var(--surface-2); }
.code pre:only-child, .code pre { white-space: pre-wrap; word-break: break-all; }
.table-toolbar > .select.input-sm { flex: 0 1 300px; }

/* stats */
.stat-value.is-sm { font-size: 1.4rem; }

/* funnels */
.funnel-mini { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; }
.funnel-mini:hover { background: var(--surface-2); }
.fm-bars { display: flex; gap: 6px; align-items: stretch; height: 90px; }
.fm-step { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.fm-step span { background: var(--fg); border-radius: 4px 4px 0 0; opacity: .85; }
.fm-step em { font-style: normal; font-size: 11px; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel, .funnel-edit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.funnel-edit { gap: var(--space-2); }
.fe-step { display: flex; align-items: flex-start; gap: var(--space-2); }
.fe-n { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-inv); color: var(--fg-inv); display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; margin-top: 4px; }
.fn-step { display: flex; flex-direction: column; gap: 6px; }
.fn-head { display: flex; align-items: center; gap: var(--space-2); }
.fn-head .fe-n { margin-top: 0; }
.fn-bar { height: 28px; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; }
.fn-bar span { display: block; height: 100%; background: var(--fg); border-radius: var(--r-sm); }
.fn-meta { font-size: var(--text-caption); color: var(--muted); }
.fn-drop { border-inline-start: 2px dashed var(--danger); padding-inline-start: var(--space-3); color: var(--danger-fg); }
.fn-drop > .btn { color: var(--danger-fg); }
.fn-who .list { margin-top: var(--space-2); }
.modal .field + .field { margin-top: 0; }
.table td svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.table td .row { flex-wrap: nowrap; white-space: nowrap; }
.list-item > svg:last-child { width: 16px; height: 16px; color: var(--subtle); transform: scaleX(-1); flex: none; }
.list-item .value { flex: none; }
.card-head .ad-h2 { white-space: nowrap; }

/* live, like Google Analytics' realtime */
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--signal-bg); color: var(--signal-fg); font-weight: 700; font-size: var(--text-sm); }
.rt-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: end; }
.rt-num { font-size: 4rem; font-weight: 800; line-height: 1; margin: 8px 0; font-variant-numeric: tabular-nums; }
.rt-bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 120px; align-items: end; position: relative; padding-bottom: 20px; }
.rt-bar { height: 100%; display: flex; align-items: flex-end; }
.rt-bar span { width: 100%; background: var(--signal); border-radius: 3px 3px 0 0; min-height: 2px; transition: height var(--dur-slow); }
.rt-bar:last-of-type span { background: var(--fg); }
.rt-axis { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--subtle); }
.rt-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-4); align-items: start; }
.rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rt-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .rt-head { grid-template-columns: minmax(0, 1fr); } .rt-grid { grid-template-columns: minmax(0, 1fr); } }
.flag { font-size: 16px; line-height: 1; }
.rt-feed { max-height: 760px; overflow: auto; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; padding: 8px 4px; border-block-end: 1px solid var(--line); font-size: var(--text-sm); }
.feed-item.is-new { animation: feed-in 1.6s ease-out; }
@keyframes feed-in { from { background: var(--signal-bg); } to { background: transparent; } }
.feed-body { text-decoration: none; color: inherit; min-width: 0; overflow-wrap: anywhere; }
.feed-body .meta { display: flex; gap: 6px; align-items: center; color: var(--subtle); font-size: var(--text-caption); margin-top: 2px; }
.feed-time { color: var(--subtle); font-size: var(--text-caption); white-space: nowrap; }

/* a person's phone and DROP space */
.disk { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-3); margin: var(--space-3) 0; }
.disk span { height: 100%; min-width: 0; }
.kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.kind-row { display: flex; align-items: center; gap: var(--space-2); padding: 5px 0; }
.kind-row.is-sub { padding-inline-start: 18px; color: var(--muted); font-size: var(--text-caption); }
.sw-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cmp-lines { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 4px; font-size: 1.05rem; font-weight: 600; }
.cmp-totals { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.cmp-totals > div { display: flex; flex-direction: column; gap: 2px; }
.cmp-totals strong { font-size: 1.3rem; }