/*
 * Sukud design system - charts
 * Line, column, ranked bars, donut and gauge. Shapes animate in once and
 * every column has a hover / focus tooltip.
 */

.sk-chart { --h: 220px; display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; }
.sk-chart__body { position: relative; padding-left: 34px; }
.sk-chart__plot { position: relative; height: var(--h); }
.sk-chart__grid { position: absolute; inset: 0; pointer-events: none; }
.sk-chart__tick { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--sk-border-subtle); }
.sk-chart__tick:last-child { border-top-style: solid; border-color: var(--sk-border); }
.sk-chart__tick b { position: absolute; right: calc(100% + 8px); top: 0; transform: translateY(-50%); font-size: var(--sk-text-2xs); font-weight: var(--sk-weight-medium); color: var(--sk-fg-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Line */
.sk-chart__line { fill: none; stroke: var(--t-solid); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sk-chart__area { fill: rgb(var(--t-rgb) / 0.12); stroke: none; }
.sk-chart--line g:first-child .sk-chart__area { fill: rgb(var(--t-rgb) / 0.14); }
.sk-chart--line g + g .sk-chart__area { fill: rgb(var(--t-rgb) / 0.06); }
.sk-chart__svg { animation: sk-chart-draw 1.1s var(--sk-ease-glide) both; }
@keyframes sk-chart-draw { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -2% -10% 0); } }
.sk-chart__end { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--t-solid); box-shadow: 0 0 0 3px var(--sk-surface); pointer-events: none; animation: sk-pop var(--sk-dur-slow) var(--sk-ease-spring) 1s both; }
.sk-chart__end::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: rgb(var(--t-rgb) / 0.3); animation: sk-pulse-ring 2.4s var(--sk-ease-out) 1.2s infinite; }

.sk-chart__cols { position: absolute; inset: 0; }
.sk-chart__col { --g: 50%; position: absolute; top: 0; bottom: 0; outline: none; cursor: crosshair; }
.sk-chart__col.is-first { --g: 0%; }
.sk-chart__col.is-last { --g: 100%; }
.sk-chart__guide { position: absolute; top: 0; bottom: 0; left: var(--g); width: 1px; margin-left: -0.5px; background: var(--sk-border-strong); opacity: 0; transition: opacity var(--sk-dur-fast); }
.sk-chart__dot { position: absolute; left: var(--g); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--sk-surface); box-shadow: inset 0 0 0 2.5px var(--t-solid); opacity: 0; transform: scale(0.4); transition: opacity var(--sk-dur-fast), transform var(--sk-dur-base) var(--sk-ease-spring); }
.sk-chart__col:hover .sk-chart__guide, .sk-chart__col:focus-visible .sk-chart__guide { opacity: 1; }
.sk-chart__col:hover .sk-chart__dot, .sk-chart__col:focus-visible .sk-chart__dot { opacity: 1; transform: scale(1); }

.sk-chart__tip {
  position: absolute; top: 0; left: 50%; z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--sk-border);
  border-radius: 12px;
  background: var(--sk-surface-raised);
  color: var(--sk-fg);
  box-shadow: var(--sk-shadow-lg);
  font-size: var(--sk-text-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 4px)) scale(0.96);
  transform-origin: bottom center;
  transition: opacity var(--sk-dur-fast), transform var(--sk-dur-base) var(--sk-ease-spring);
}
.sk-chart__tip > b { font-weight: var(--sk-weight-bold); }
.sk-chart__tip > span { display: flex; align-items: center; gap: 6px; color: var(--sk-fg-muted); }
.sk-chart__tip > span > i { width: 8px; height: 8px; border-radius: 50%; background: var(--t-solid); flex-shrink: 0; }
.sk-chart__tip em { margin-inline-start: auto; padding-left: 10px; font-style: normal; font-weight: var(--sk-weight-bold); color: var(--sk-fg); font-variant-numeric: tabular-nums; }
.sk-chart__tip small { color: var(--sk-fg-subtle); }
/* A tip opens away from the nearer edge, so it never pokes out of the
 * chart (or the page), shown or not. */
.sk-chart__col.is-start .sk-chart__tip, .sk-bars__col.is-start .sk-chart__tip { left: 0; transform: translate(-8px, calc(-100% - 4px)) scale(0.96); transform-origin: bottom left; }
.sk-chart__col.is-end .sk-chart__tip, .sk-bars__col.is-end .sk-chart__tip { left: auto; right: 0; transform: translate(8px, calc(-100% - 4px)) scale(0.96); transform-origin: bottom right; }
.sk-chart__col:hover .sk-chart__tip, .sk-chart__col:focus-visible .sk-chart__tip { opacity: 1; transform: translate(-50%, calc(-100% - 4px)) scale(1); }
.sk-chart__col.is-start:hover .sk-chart__tip, .sk-chart__col.is-start:focus-visible .sk-chart__tip { transform: translate(-8px, calc(-100% - 4px)) scale(1); }
.sk-chart__col.is-end:hover .sk-chart__tip, .sk-chart__col.is-end:focus-visible .sk-chart__tip { transform: translate(8px, calc(-100% - 4px)) scale(1); }

.sk-chart__x { position: relative; height: 18px; margin-top: 8px; }
.sk-chart__x span { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--sk-text-2xs); color: var(--sk-fg-subtle); white-space: nowrap; }
.sk-chart__x span:first-child { transform: none; }
.sk-chart__x span:last-child { transform: translateX(-100%); }

/* Columns */
.sk-chart__goal { position: absolute; left: 0; right: 0; z-index: 1; height: 0; border-top: 2px dashed var(--sk-amber-8); pointer-events: none; }
.sk-chart__goal b { position: absolute; right: 0; bottom: 3px; padding: 1px 7px; border-radius: var(--sk-radius-full); background: var(--sk-amber-3); color: var(--sk-amber-11); font-size: 10px; font-weight: var(--sk-weight-bold); }
.sk-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(4px, 2%, 14px); align-items: end; }
.sk-bars__col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.sk-bars__fill {
  width: min(100%, 44px);
  height: var(--pct);
  min-height: 3px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--t-solid), rgb(var(--t-rgb) / 0.75));
  transform-origin: bottom;
  transition: filter var(--sk-dur-fast), transform var(--sk-dur-base) var(--sk-ease-spring);
}
.sk-bars__fill { animation: sk-bar-grow 0.8s var(--sk-ease-glide) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes sk-bar-grow { from { transform: scaleY(0); } }
.sk-bars__col:hover .sk-bars__fill, .sk-bars__col:focus-visible .sk-bars__fill { filter: brightness(1.08) saturate(1.1); }
.sk-bars__col:focus-visible .sk-bars__fill { box-shadow: var(--sk-focus-ring); }
.sk-bars__col .sk-chart__tip { top: calc(100% - var(--pct)); }
.sk-bars__col:hover .sk-chart__tip, .sk-bars__col:focus-visible .sk-chart__tip { opacity: 1; }
.sk-bars__col.is-start:hover .sk-chart__tip, .sk-bars__col.is-start:focus-visible .sk-chart__tip { transform: translate(-4px, calc(-100% - 6px)) scale(1); }
.sk-bars__col.is-end:hover .sk-chart__tip, .sk-bars__col.is-end:focus-visible .sk-chart__tip { transform: translate(4px, calc(-100% - 6px)) scale(1); }
.sk-bars__labels { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(4px, 2%, 14px); margin-top: 8px; }
.sk-bars__labels span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: var(--sk-text-2xs); color: var(--sk-fg-subtle); }

/* Ranked bars */
.sk-barlist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sk-barlist__row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.sk-barlist__label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--sk-text-sm); font-weight: var(--sk-weight-medium); }
.sk-barlist__label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-barlist__label .sk-icon { color: var(--t-text); flex-shrink: 0; }
.sk-barlist__label small { color: var(--sk-fg-subtle); font-size: var(--sk-text-xs); font-weight: var(--sk-weight-regular); white-space: nowrap; }
.sk-barlist__value { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-bold); font-variant-numeric: tabular-nums; }
.sk-barlist__track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--sk-surface-sunken); overflow: hidden; }
.sk-barlist__fill { display: block; width: var(--pct); height: 100%; border-radius: inherit; background: var(--t-solid); transform-origin: left; animation: sk-bar-across 0.9s var(--sk-ease-glide) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes sk-bar-across { from { transform: scaleX(0); } }

/* Legend */
.sk-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--sk-text-xs); color: var(--sk-fg-muted); }
.sk-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sk-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--t-solid); flex-shrink: 0; }
.sk-legend b { color: var(--sk-fg); font-variant-numeric: tabular-nums; }
.sk-legend--stack { flex-direction: column; gap: 8px; min-width: 150px; font-size: var(--sk-text-sm); }
.sk-legend--stack li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: center; }
.sk-legend--stack small { min-width: 34px; text-align: end; color: var(--sk-fg-subtle); font-variant-numeric: tabular-nums; }

/* Donut */
.sk-donut { --size: 168px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0; }
.sk-donut__ring { position: relative; width: var(--size); height: var(--size); flex-shrink: 0; }
.sk-donut__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.sk-donut__track { fill: none; stroke: var(--sk-surface-sunken); stroke-width: 6; }
.sk-donut__seg {
  fill: none;
  stroke: var(--t-solid);
  stroke-width: 6;
  stroke-linecap: butt;
  stroke-dasharray: var(--len) 100;
  stroke-dashoffset: var(--off);
  transition: stroke-width var(--sk-dur-base) var(--sk-ease-spring);
  animation: sk-donut-in 1s var(--sk-ease-glide) both;
  animation-delay: calc(var(--i) * 90ms);
  cursor: default;
}
.sk-donut__seg:hover { stroke-width: 7.5; }
@keyframes sk-donut-in { from { stroke-dasharray: 0 100; } }
.sk-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.sk-donut__center b { font-family: var(--sk-font-display); font-size: calc(var(--size) * 0.17); font-weight: var(--sk-weight-black); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sk-donut__center small { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }

/* Gauge */
.sk-gauge { --size: 180px; position: relative; display: inline-flex; flex-direction: column; align-items: center; width: var(--size); margin: 0; }
.sk-gauge svg { width: 100%; overflow: visible; }
.sk-gauge path { fill: none; stroke-width: 9; stroke-linecap: round; }
.sk-gauge__track { stroke: var(--sk-surface-sunken); }
.sk-gauge__arc { stroke: var(--t-solid); stroke-dasharray: var(--pct) 100; animation: sk-gauge-in 1.2s var(--sk-ease-glide) both; filter: drop-shadow(0 3px 6px rgb(var(--t-rgb) / 0.35)); }
@keyframes sk-gauge-in { from { stroke-dasharray: 0 100; } }
.sk-gauge__value { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: var(--sk-font-display); font-size: calc(var(--size) * 0.085); font-weight: var(--sk-weight-bold); color: var(--sk-fg-muted); }
.sk-gauge__value b { font-size: calc(var(--size) * 0.2); font-weight: var(--sk-weight-black); letter-spacing: -0.04em; color: var(--sk-fg); font-variant-numeric: tabular-nums; }
.sk-gauge__label { display: flex; flex-direction: column; align-items: center; margin-top: 4px; font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); text-align: center; }
.sk-gauge__label small { font-size: var(--sk-text-xs); font-weight: var(--sk-weight-regular); color: var(--sk-fg-subtle); }

@media (prefers-reduced-motion: reduce) {
  .sk-chart__line, .sk-chart__area, .sk-bars__fill, .sk-barlist__fill, .sk-donut__seg, .sk-gauge__arc, .sk-chart__end { animation: none !important; }
}

/* Funnel: each step's bar is its share of the first. */
.sk-funnel { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sk-funnel__step { display: flex; flex-direction: column; gap: 7px; }
.sk-funnel__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-funnel__icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; background: var(--t-soft); color: var(--t-text); }
.sk-funnel__label { flex: 1 1 auto; min-width: 0; font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); }
.sk-funnel__value { font-family: var(--sk-font-display); font-size: var(--sk-text-xl); font-weight: var(--sk-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sk-funnel__track { display: block; height: 10px; border-radius: var(--sk-radius-full); background: var(--sk-surface-sunken); overflow: hidden; }
.sk-funnel__fill { display: block; width: var(--pct); min-width: 4px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-solid), rgb(var(--t-rgb) / 0.7)); transform-origin: left; animation: sk-bar-across 0.9s var(--sk-ease-glide) both; animation-delay: calc(var(--i) * 120ms); }
.sk-funnel__rate { font-size: var(--sk-text-xs); color: var(--sk-fg-muted); }

/* Retention grid */
.sk-cohort-wrap { max-width: 100%; overflow-x: auto; }
.sk-cohort { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: var(--sk-text-sm); font-variant-numeric: tabular-nums; }
.sk-cohort th { padding: 4px 8px; font-size: var(--sk-text-xs); font-weight: var(--sk-weight-semibold); color: var(--sk-fg-muted); text-align: start; white-space: nowrap; }
.sk-cohort .is-num { text-align: center; }
.sk-cohort__size { padding: 8px; color: var(--sk-fg-muted); }
.sk-cohort__cell { min-width: 52px; padding: 8px 6px; border-radius: 8px; text-align: center; font-weight: var(--sk-weight-semibold);
  background: rgb(var(--sk-brand-rgb) / calc(0.07 + var(--pct) / 100 * 0.78)); color: var(--sk-fg); }
.sk-cohort__cell.is-strong { color: #fff; }
.sk-cohort__cell.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--sk-border-subtle); }
@media (prefers-reduced-motion: reduce) { .sk-funnel__fill { animation: none; } }

/* Analytics page (admin/analytics.html): big figures inside tiles. */
.sk-analytics__note { display: flex; align-items: center; gap: 6px; margin: -8px 0 0; }
.sk-analytics__note .sk-icon { width: 14px; height: 14px; flex-shrink: 0; }
.sk-analytics__big { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.sk-analytics__big b { font-family: var(--sk-font-display); font-size: var(--sk-display-sm); font-weight: var(--sk-weight-black); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sk-analytics__big span { font-size: var(--sk-text-sm); color: var(--sk-fg-muted); }
.sk-analytics__live { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.sk-analytics__live b { font-family: var(--sk-font-display); font-size: var(--sk-display-sm); font-weight: var(--sk-weight-black); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sk-analytics__live span:last-child { font-size: var(--sk-text-sm); color: var(--sk-fg-muted); }
.sk-analytics__pulse { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--sk-green-9); flex-shrink: 0; }
.sk-analytics__pulse::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--sk-green-9); opacity: 0; animation: sk-analytics-ping 2s var(--sk-ease-out) infinite; }
@keyframes sk-analytics-ping { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
.sk-analytics__center { display: grid; place-items: center; padding: 6px 0; }
.sk-analytics__tokens { margin-top: 10px; font-family: var(--sk-font-display); font-weight: var(--sk-weight-bold); font-variant-numeric: tabular-nums; }
.sk-analytics__tokens small { font-family: var(--sk-font-sans); font-weight: var(--sk-weight-regular); font-size: var(--sk-text-xs); color: var(--sk-fg-muted); }
@media (prefers-reduced-motion: reduce) { .sk-analytics__pulse::after { animation: none; } }