/* Styles for the analytics area: the site dashboard (public/static/app/analytics.js),
   goals and share tabs, share pages, site card stats (src/routes/analytics.ts).
   Linked on every page by src/layout.ts, after site.css. Uses the tokens there;
   the dashboard is adapted from makerhandle public/static/app-stats.css. */

.dash,
.dialog.dash-all {
  /* Bars behind breakdown rows: the accent at low strength, so row text keeps
     its full contrast (--text on the bar stays above 11:1 in both themes). */
  --dash-bar: color-mix(in srgb, var(--accent) 13%, transparent);
  --dash-bar-hover: color-mix(in srgb, var(--accent) 24%, transparent);
  --dash-good: var(--success-fg);
  --dash-bad: var(--danger-fg);
}
.dash {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin-top: 20px;
  font-variant-numeric: tabular-nums;
}
.dash.is-loading > :not(.dash-bar) {
  opacity: 0.55;
  transition: opacity var(--dur-2) ease var(--dur-1);
  pointer-events: none;
}
.dash-ic {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.dash-unavailable {
  margin: 0;
}
.dash-sub {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.dash-sub .mono {
  font-size: var(--type-small);
}
.dash-notice {
  margin: 16px 0 0;
}

/* ---- top bar ---- */
.dash-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.dash-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-panel);
  font-size: var(--type-small);
  color: var(--text-dim);
  white-space: nowrap;
}
.dash-live b {
  color: var(--text);
  font-weight: var(--weight-title);
}
.dash-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
}
.dash-live.on .dash-pulse {
  background: var(--success-fg);
}
.dash-live.on .dash-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--success-fg);
  opacity: 0.5;
  animation: dash-pulse 2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes dash-pulse {
  from {
    transform: scale(0.4);
    opacity: 0.55;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--btn-h-md);
  padding: 0 12px;
  border: 1px solid var(--line-control);
  border-radius: var(--btn-radius);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--type-ui);
  font-weight: var(--weight-strong);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.dash-btn:hover {
  background: var(--bg-hover);
  border-color: var(--line-strong);
}
.dash-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dash-btn[aria-expanded='true'] {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.dash-btn .dash-ic {
  color: var(--text-dim);
}
.dash-range {
  min-width: 176px;
}
.dash-range-label {
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Menus are the shared .menu-list with .menu-row items (ui.css), opened by
   the script under their button; these only lay out what is inside them. */
.dash .menu-list {
  display: grid;
}
.dash .menu-row {
  justify-content: space-between;
}
.menu-row[aria-checked='true']:not(.switch) {
  font-weight: var(--weight-title);
}
.menu-row[aria-checked='true']:not(.switch) svg {
  color: var(--accent);
}
.menu-row:disabled,
.menu-row[aria-disabled='true'] {
  color: var(--text-faint);
  cursor: default;
}
.menu-row:disabled:hover,
.menu-row[aria-disabled='true']:hover {
  background: transparent;
}
.menu-row:disabled svg,
.menu-row[aria-disabled='true'] svg {
  color: inherit;
}
.dash-menu-filter {
  min-width: 260px;
  max-height: min(70vh, 520px);
  max-height: min(70dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The period menu, one clock for the board: periods on the left, what they
   are compared with on the right. On phones the two stack, and the periods
   sit two to a row so the whole menu fits without a long scroll. */
.dash .dash-menu-range {
  grid-template-columns: minmax(176px, auto) minmax(344px, auto);
  column-gap: var(--space-1);
}
.dash-range-col {
  display: grid;
  align-content: start;
  min-width: 0;
}
.dash-range-col + .dash-range-col {
  padding-left: var(--space-1);
  border-left: 1px solid var(--line);
}
.dash-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-menu-end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* Key hints only where a mouse can hover; a chosen row shows its check instead. */
.dash-menu-kbd,
.menu-row[aria-checked='true'] .dash-menu-kbd {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .dash-menu-kbd {
    display: inline-grid;
  }
}
@media (max-width: 720px) {
  .dash .dash-menu-range {
    grid-template-columns: 1fr;
    max-height: min(78vh, 660px);
    max-height: min(78dvh, 660px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .dash-range-col:first-child {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-1);
  }
  .dash-range-col:first-child .menu-sep {
    grid-column: 1 / -1;
  }
  .dash-range-col + .dash-range-col {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}
.dash-menu-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dash-menu-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-menu-hint {
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
}
.dash-menu-note {
  margin: 0;
  padding: var(--space-2) 10px;
  font-size: var(--type-small);
  color: var(--text-dim);
}
.dash-custom {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-1);
}
.dash-custom .menu-heading {
  padding-inline: 6px;
}
.dash-custom-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.dash-date {
  min-width: 0;
  padding-inline: 8px;
  font-variant-numeric: tabular-nums;
}
/* A whole date, calendar icon included, always fits its field. */
.dash-custom-row .dash-date {
  min-width: 150px;
}

.dash-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
}
.dash-chip-group {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
}
/* What an app's own tag means, in one quiet line under its chip. */
.dash-filter-note {
  max-width: 34ch;
  padding-left: 10px;
  overflow: hidden;
  color: var(--text-faint);
  font-size: var(--type-caption);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 4px 4px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  font-size: var(--type-ui);
}
.dash-chip-dim {
  color: var(--text-dim);
  white-space: nowrap;
}
.dash-chip b {
  overflow: hidden;
  font-weight: var(--weight-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-chip button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.dash-chip button:hover {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--text);
}
.dash-clear {
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--type-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- KPIs and chart ---- */
.dash-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--type-small);
  font-weight: var(--weight-title);
  white-space: nowrap;
  color: var(--text-faint);
}
.dash-delta.good {
  color: var(--dash-good);
}
.dash-delta.bad {
  color: var(--dash-bad);
}
/* Profit below zero (the Return on all ad spend panel) reads as a loss. */
.dash-neg {
  color: var(--dash-bad);
}

.dash-chart {
  position: relative;
  min-height: 232px;
  padding: 18px 18px 6px;
}
.dash-chart:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.dash-svg {
  display: block;
  overflow: visible;
  touch-action: pan-y;
}
.dash-gl {
  stroke: var(--line);
  stroke-width: 1;
}
.dash-gl.base {
  stroke: var(--line-strong);
}
.dash-ytick,
.dash-xtick {
  fill: var(--text-faint);
  font-family: var(--sans);
  font-size: var(--type-caption);
}
.dash-fill-top {
  stop-color: var(--accent);
  stop-opacity: 0.26;
}
.dash-fill-bottom {
  stop-color: var(--accent);
  stop-opacity: 0;
}
.dash-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dash-tail {
  stroke-dasharray: 3 5;
}
.dash-prev {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.75;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  opacity: 0.85;
}
.dash-dot {
  fill: var(--accent);
}
.dash-svg.animate .dash-line:not(.dash-tail) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash-draw calc(var(--dur-4) * 2) var(--ease-out) forwards;
}
.dash-svg.animate .dash-area {
  opacity: 0;
  animation: dash-fade calc(var(--dur-4) * 1.5) ease var(--dur-3) forwards;
}
@keyframes dash-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash-fade {
  to {
    opacity: 1;
  }
}
.dash-cross {
  stroke: var(--text-dim);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.dash-hdot {
  fill: var(--accent);
  stroke: var(--bg-panel);
  stroke-width: 2.5;
}
.dash-hdot.prev {
  fill: var(--text-faint);
}
.dash-tip {
  position: absolute;
  top: 8px;
  left: 0;
  /* Solid, over every mark and note in the chart, in both themes. */
  z-index: 40;
  isolation: isolate;
  display: grid;
  gap: 5px;
  min-width: 170px;
  padding: 10px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  font-size: var(--type-small);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) ease;
}
.dash-tip.show {
  opacity: 1;
}
.sw-none {
  visibility: hidden;
}
.dash-tip-when {
  font-family: var(--mono);
  font-size: var(--type-caption);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.dash-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-tip-row span {
  flex: 1;
  white-space: nowrap;
  color: var(--text-dim);
}
.dash-tip-row b {
  font-size: var(--type-body);
}
.dash-tip-row.prev b {
  font-size: var(--type-small);
  color: var(--text-dim);
}
.sw {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 3px;
  border-radius: var(--r-xs);
  background: var(--accent);
}
.sw.prev {
  background: repeating-linear-gradient(90deg, var(--text-faint) 0 3px, transparent 3px 5px);
}

/* ---- breakdown panels ---- */
.dash-panel-note {
  margin: -4px 0 10px;
  font-size: var(--type-small);
  color: var(--text-faint);
}
.dash-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar {
  display: none;
}
/* More tabs than fit: a fade on the side that scrolls (scrollFade in app/analytics.js). */
.dash-tabs.fade-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.dash-tabs.fade-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
  mask-image: linear-gradient(to right, transparent, #000 36px);
}
.dash-tabs.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.dash-tabs button {
  padding: 5px 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-faint);
  font: inherit;
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
}
.dash-tabs button:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.dash-tabs button[aria-selected='true'] {
  background: var(--bg-active);
  color: var(--text);
}
.dash-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dash-colhead,
.dash-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 52px;
  align-items: center;
  column-gap: 8px;
}
.dash-colhead.goals,
.dash-goals .dash-row {
  grid-template-columns: minmax(0, 1fr) 80px 72px 60px;
}
.dash-colhead {
  padding: 0 10px 6px;
  font-family: var(--mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.dash-colhead > :not(:first-child) {
  text-align: right;
}
.dash-colhead .dash-pct {
  font-size: inherit;
}
.dash-rows {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-row {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--type-ui);
  text-align: left;
  cursor: pointer;
  /* The row's own corners round the bar's start, and its end when it is full. */
  overflow: hidden;
}
.dash-row:disabled {
  cursor: default;
}
.dash-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: var(--w);
  /* Square start, a small round at the end: a short bar reads as a bar, not a pill. */
  border-radius: 0 4px 4px 0;
  background: var(--dash-bar);
  transition: background-color var(--dur-1) ease, width var(--dur-4) var(--ease-out);
}
.dash-row:not(:disabled):hover .dash-bar-fill,
.dash-row.active .dash-bar-fill {
  background: var(--dash-bar-hover);
}
.dash-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.dash-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.dash-name .dash-ic {
  color: var(--text-dim);
}
.dash-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An app's own tag (zalo, ig): who added it, one quiet line under the name.
   The full sentence is the title, and shows under the filter once tapped. */
.dash-label-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 5px 0;
  text-align: left;
}
.dash-row-note {
  overflow: hidden;
  color: var(--text-dim);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-row:not(:disabled):hover .dash-label {
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 3px;
}
/* The goal's name wins the room: its rule shrinks first, never past half the row, and shows
   only on a wide card, where it is not a cut-off "/gu..." beside a cut-off name. */
.dash-goals {
  container-type: inline-size;
}
@container (max-width: 559px) {
  .dash-goal-match {
    display: none;
  }
}
.dash-goal-match {
  overflow: hidden;
  flex-shrink: 100;
  min-width: 0;
  max-width: 45%;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--bg-hover);
  font-family: var(--mono);
  font-size: var(--type-caption);
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-flag {
  flex-shrink: 0;
  width: 16px;
  font-size: var(--type-body);
  line-height: 1;
  text-align: center;
}
.dash-letter {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--type-label);
  font-weight: var(--weight-title);
}
.dash-val {
  font-weight: var(--weight-title);
  text-align: right;
}
.dash-pct {
  font-size: var(--type-small);
  text-align: right;
  color: var(--text-faint);
}
.dash-none {
  margin: auto 0;
  padding: 18px 10px;
  font-size: var(--type-ui);
  text-align: center;
  color: var(--text-faint);
}
.dash-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--type-small);
  text-align: center;
  color: var(--text-faint);
}

/* ---- skeleton (server-rendered, so nothing jumps when data arrives) ----
   The shared .skeleton shapes (ui.css), placed on the widget cells. */
.dw-sk-in > .skeleton-line {
  width: 60%;
  margin-block: 0 10px;
}
.dw-sk-in > .skeleton-num {
  width: 50%;
}
.dw-sk-chart {
  height: 210px;
}

/* ---- responsive ---- */
@media (max-width: 720px) {
  .dash {
    gap: 14px;
    margin-top: 16px;
  }
  .dash-range {
    width: 100%;
    min-width: 0;
  }
  .dash-chart {
    min-height: 200px;
    padding: 14px 10px 4px 6px;
  }
  .dash-colhead {
    padding: 0 8px 6px;
  }
  .dash-row {
    min-height: 40px;
    padding: 0 8px;
  }
  .dash-colhead,
  .dash-row {
    grid-template-columns: minmax(0, 1fr) 56px 46px;
  }
  .dash-colhead.goals,
  .dash-goals .dash-row {
    grid-template-columns: minmax(0, 1fr) 70px 50px;
  }
  .dash-hide-sm,
  .dash-goal-match {
    display: none;
  }
  .dash-privacy {
    align-items: flex-start;
    font-size: var(--type-caption);
    text-align: left;
  }
}

/* ---- site cards in /app: quick stats (src/dashboard/quick.ts) ---- */
/* Client chips on the left, the quick stats period on the right. */
.scs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.scs-range {
  margin-left: auto;
}
.app-section.scs-bar + .site-list {
  margin-top: 16px;
}
.site-card-stats {
  display: grid;
  gap: 12px;
}
.scs-visits {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
}
.scs-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.scs-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.scs-num {
  font-size: var(--fs-24);
  font-weight: var(--weight-title);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.scs-label {
  font-size: var(--type-small);
  color: var(--text-faint);
}
.scs-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--type-small);
  font-weight: var(--weight-title);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.scs-delta.up {
  color: var(--success-fg);
}
.scs-delta.down {
  color: var(--danger-fg);
}
.scs-action {
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}
.scs-money {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-tint);
}
.scs-money div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.scs-money dt {
  font-family: var(--mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.scs-money dd {
  margin: 0;
  font-size: var(--type-body);
  font-weight: var(--weight-title);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.scs-more {
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
  color: var(--text-faint);
}
.spark {
  flex-shrink: 0;
  overflow: visible;
}
.spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark-area {
  fill: var(--accent-soft);
  stroke: none;
}

/* ---- goals tab ---- */
.goal-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.goal-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.goal-item:first-child {
  border-top: 0;
}
/* A plain .pill (sans, 12px, never mono); one width so the names line up. */
.goal-kind {
  min-width: 56px;
  justify-content: center;
}
.goal-name {
  font-weight: var(--weight-strong);
}
/* Edit and Archive side by side; the edit form takes the whole row. */
.gl-acts {
  display: flex;
  align-items: center;
  gap: 2px;
}
.goal-item.gl-editing {
  display: block;
}
.gl-edit {
  display: grid;
  gap: var(--space-3);
}
.gl-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 12rem);
  gap: var(--space-3);
  align-items: start;
}
.gl-worth {
  color: var(--text-dim);
}
.gl-archived {
  margin-top: var(--space-2);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
}
.gl-archived > summary::-webkit-details-marker {
  display: none;
}

.gl-archived > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-dim);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.gl-archived .goal-item.is-archived .goal-name {
  color: var(--text-dim);
}
@media (max-width: 560px) {
  .gl-value {
    grid-template-columns: minmax(0, 1fr);
  }
  .goal-item:not(.gl-editing) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .goal-item .gl-acts {
    grid-column: 2;
  }
}
.goal-kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.goal-kinds legend {
  margin-bottom: 8px;
  padding: 0;
}
.goal-kind-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-control);
  border-radius: var(--r-lg);
  background: var(--bg-input);
  cursor: pointer;
}
.goal-kind-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.goal-kind-option input {
  margin-top: 4px;
  accent-color: var(--accent);
}
.goal-kind-option > span {
  display: grid;
  gap: 2px;
}
@media (max-width: 480px) {
  .goal-kinds {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- share pages ---- */
.share-section {
  padding-block: 32px 56px;
}
.share-container {
  max-width: 1240px;
}
.share-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.share-head h1 {
  font-size: var(--type-display);
  /* A long address (acme-shop.example.com) beside the agency name must wrap at 390px, not push the page sideways. */
  overflow-wrap: anywhere;
}
.share-head .eyebrow {
  margin-bottom: 4px;
}
.share-logo {
  flex-shrink: 0;
  max-width: 160px;
  height: 44px;
  object-fit: contain;
}
/* White label without a logo: the owner's name in the logo's place. */
.share-brand {
  flex-shrink: 0;
  max-width: 220px;
  padding-right: 16px;
  border-right: 1px solid var(--line);
  font-size: var(--fs-18);
  font-weight: var(--weight-title);
  color: var(--text);
  overflow-wrap: anywhere;
}
/* A long unbroken owner name wraps inside its box instead of pushing the page sideways at 390px. */
header.share-head p.share-brand {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  header.share-head p.share-brand {
    flex-shrink: 1;
    max-width: 40%;
  }
}
/* White-label footer: no link columns, just the owner's name and the theme toggle.
   On the page's own paper, so it is no lighter band in light or dark. */
.wl-footer {
  background: transparent;
}
.wl-footer .footer-bottom {
  margin-top: 0;
  border-top: 0;
}
/* No brand name: the toggle alone, at the end. */
.wl-footer .footer-meta:only-child {
  margin-left: auto;
}
.share-domain {
  margin-top: 2px;
  font-size: var(--type-small);
  color: var(--text-dim);
}
@media (max-width: 720px) {
  .share-section {
    padding-block: 20px 40px;
  }
  .share-head h1 {
    font-size: var(--fs-24);
  }
}

/* ---- Share tab: client invites and connect requests (src/clientShare.ts) ---- */
.ci-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.ci-form .field {
  margin: 0;
}
.ci-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ci-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.ci-avatar {
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--accent-soft);
  color: var(--accent);
}
.ci-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--text-dim);
}
.ci-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-strong);
  overflow-wrap: anywhere;
}
.ci-meta {
  font-size: var(--type-small);
  color: var(--text-faint);
}
.ci-actions {
  display: flex;
  gap: 6px;
}
.ci-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  min-width: 0;
}
.ci-link code {
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-tint);
  font-family: var(--mono);
  font-size: var(--type-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-connect {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
  gap: 10px;
}
.ci-connect .field {
  margin: 0;
}
.ci-connect .form-actions {
  margin: 0;
}
@media (max-width: 560px) {
  .ci-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .ci-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ci-actions {
    grid-column: 2;
  }
}

/* ---- the client shell: /client, /client/s/:id, /invite, /connect (src/routes/clients.ts) ---- */
.client-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.client-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
  padding-block: 8px;
}
.client-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
/* The wordmark as in the site header: a flex box, so the drawing centers in the 44px link. */
.client-brand .wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  font-size: 19px;
}
.client-logo {
  max-width: 160px;
  height: 36px;
  object-fit: contain;
}
.client-brand-name {
  font-size: var(--fs-18);
  font-weight: var(--weight-title);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}
.client-nav form {
  margin: 0;
}
.client-back svg {
  width: 16px;
  height: 16px;
}
.client-section {
  padding-block: 48px 72px;
}
.client-container {
  max-width: 760px;
}
.client-head {
  margin-bottom: 24px;
}
.client-head .eyebrow {
  margin-bottom: 6px;
}
.client-head h1 {
  font-family: var(--serif);
  font-size: var(--fs-32);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
}
.client-sub {
  margin-top: 6px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.client-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-item {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  box-shadow: var(--elev-2);
  overflow: hidden;
}
.client-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-2) ease;
}
.client-card:hover {
  background: var(--bg-hover);
}
.client-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.client-card-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---- the customizable dashboard (src/dashboard/layout.ts) ---- */

/* No visit yet: one slim line with the next step, above a dashboard that
   still shows what is connected. */
.dash-setup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 10px 10px 10px 14px;
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  border-radius: var(--r-lg);
}
.dash-setup + .dash {
  margin-top: 16px;
}
.dash-setup-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  color: var(--accent);
}
.dash-setup-mark svg {
  width: 17px;
  height: 17px;
}
.dash-setup-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--type-ui);
  color: var(--text-dim);
}
.dash-setup-text strong {
  color: var(--text);
}
.dash-setup .btn {
  flex-shrink: 0;
}
.dash-faint {
  color: var(--text-faint);
  font-weight: var(--weight-medium);
}
.dash-money {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.dash-more {
  font-size: 0.72em;
  font-weight: var(--weight-title);
  color: var(--text-faint);
}

/* Connected panels: ad spend, sales, email and texts. */
.dash-pill {
  font-size: var(--type-caption);
}
.dash-panel-tag {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-hover);
  font-size: var(--type-caption);
  color: var(--text-dim);
}
.dash-rate {
  margin-left: 5px;
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}
.dash-foot {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: var(--type-small);
  color: var(--text-faint);
}
.dash-foot a {
  font-weight: var(--weight-strong);
}
.dw-heard-line {
  margin: 0 0 var(--space-2);
  font-size: var(--type-small);
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.dw-heard-line b {
  color: var(--text);
  font-weight: var(--weight-strong);
}
.client-card-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.client-card-name {
  font-size: var(--type-heading);
  font-weight: var(--weight-title);
  overflow-wrap: anywhere;
}
.client-card-line {
  font-size: var(--type-ui);
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.client-card-line .mono {
  font-size: var(--type-small);
}
.client-card-go {
  color: var(--text-faint);
  transition: transform var(--dur-2) ease, color var(--dur-2) ease;
}
.client-card:hover .client-card-go {
  color: var(--accent);
  transform: translateX(2px);
}
.client-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--type-ui);
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.client-ask span {
  flex: 1;
}
.client-ask svg {
  width: 16px;
  height: 16px;
}
.client-ask:hover {
  text-decoration: underline;
}
.client-asks {
  margin-bottom: 16px;
}
.client-empty p {
  max-width: 420px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.connect-facts {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.connect-facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  font-size: var(--type-body);
  color: var(--text-dim);
}
.connect-facts svg {
  margin-top: 2px;
  color: var(--accent);
}
.connect-hint {
  margin-top: 12px;
  text-align: center;
}
.connect-off {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.connect-pick {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}
.connect-acct {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-control);
  border-radius: var(--r-lg);
  background: var(--bg-input);
  cursor: pointer;
}
.connect-acct:has(input:checked) {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.connect-acct input {
  margin-top: 4px;
  accent-color: var(--accent);
}
.connect-acct > span {
  display: grid;
  gap: 2px;
}
@media (max-width: 720px) {
  .client-section {
    padding-block: 28px 48px;
  }
  .client-head h1 {
    font-size: var(--fs-28);
  }
}
@media (max-width: 480px) {
  .client-back span {
    display: none;
  }
  .client-card {
    padding: 16px;
  }
}
/* Client cards keep the 16px phone gutter. */
.client-main .auth {
  padding-inline: 16px;
}

/* The key for bars: a small square in the bar color. */
.sw.sw-bar {
  height: 10px;
  border-radius: var(--r-xs);
  background: var(--accent);
}

/* ---- customizing ---- */
.dash-save-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 4em;
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  color: var(--text-faint);
}
.dash-save-state:empty {
  display: none;
}
/* A save that did not land: the line in the danger ink (AA on paper and panels), then its one way out. */
.dash-save-state.is-problem {
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  color: var(--danger-fg);
}

/* Earlier versions: one row each, the time and card count left, Restore right. */
.dash-versions {
  display: flex;
  flex-direction: column;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.dash-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}
.dash-version:first-child {
  border-top: 0;
}
.dash-version-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--type-ui);
}
.dash-version-text span {
  font-size: var(--type-small);
  color: var(--text-dim);
}

/* Arrange on a phone: the cards as a list, 44px buttons to move or remove each. */
.dash-arrange {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-arrange-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--line);
}
.dash-arrange-row:first-child {
  border-top: 0;
}
.dash-arrange-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--type-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-arrange .icon-button {
  width: var(--ctl-h-lg);
  height: var(--ctl-h-lg);
}
.dash-arrange .icon-button:disabled {
  opacity: 0.35;
}
.dash-arrange-remove {
  color: var(--danger-fg);
}

/* Small square tools: refresh, undo and redo, a widget's menu. */
.dash .icon-button:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}
.dash .icon-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dw-dragging,
.dw-dragging * {
  cursor: grabbing !important;
  user-select: none;
}
@media (max-width: 720px) {
  .dash-setup {
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .dash-setup .btn {
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }
  .dash-hide-xs {
    display: none;
  }
  .dash-menu-range {
    right: auto;
    left: 0;
  }
  .scs-range {
    margin-left: 0;
  }
}

/* ==== The widget dashboard (public/static/app/analytics.js, src/dashboard/layout.ts) ====
   A 12-column board of cards, edited like Funnel's: drag by the header, resize
   from the corner, Chart settings on the right. Everything here is scoped
   under .dash, .dw (a widget) or .dash-head. */

/* Five line colors for the main chart, in fixed order, the accent first.
   Checked with the dataviz palette validator (lightness band, chroma, CVD
   and normal-vision separation, 3:1 contrast) against #ffffff, #fbfaf7 and
   #f8f6f1 in light, and #23211e and #1c1b18 in dark; all pass. The light set
   is Datacenter's accent with Mokxi's admin series hues, darkened to the band;
   the dark set is Mokxi's dark series. */
.dash {
  --s1: var(--accent);
  --s2: #0f8a78;
  --s3: #c8650f;
  --s4: #b8327f;
  --s5: #6d4fc4;
  --row-h: 124px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .dash {
    --s1: #3d8ff0;
    --s2: #1f9e8b;
    --s3: #d9701f;
    --s4: #d4508f;
    --s5: #8a70e6;
  }
}
:root[data-theme='dark'] .dash {
  --s1: #3d8ff0;
  --s2: #1f9e8b;
  --s3: #d9701f;
  --s4: #d4508f;
  --s5: #8a70e6;
}

/* ---- header: title and actions, then the date and filters ---- */
.dash-head {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.dash-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.dash-head-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}
.dash-title {
  margin: 0;
  font-size: var(--type-title);
  font-weight: var(--weight-title);
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.dash-title-input {
  width: min(320px, 100%);
  height: 36px;
  padding: 0 10px;
  /* Dashed says "you can type here"; --line-input keeps it at 3:1. */
  border: 1px dashed var(--line-input);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-18);
  font-weight: var(--weight-title);
}
.dash-title-input:focus {
  border: 1px solid var(--accent);
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}
.dash-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dash-head-actions .btn {
  gap: 6px;
}
.dash-refreshed {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 2px;
  font-size: var(--type-small);
  color: var(--text-faint);
  white-space: nowrap;
}
.dash-refresh.is-spinning svg {
  animation: dash-spin 0.8s linear infinite;
}
@keyframes dash-spin {
  to {
    transform: rotate(360deg);
  }
}
.dash-head-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dash-head-filters .dash-filters {
  margin: 0;
}
.dash-range {
  height: auto;
  min-height: var(--btn-h-md);
  padding: 4px 12px;
}
.dash-range-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
  text-align: left;
}
.dash-range-vs {
  overflow: hidden;
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-11);
  font-weight: var(--weight-title);
}

/* ---- the board ---- */
.dash-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
}
.dash-body.is-inspecting {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.dw-grid {
  /* --board tells the script the grid is the 12-column board (drag by cell). */
  --board: 1;
  --gap: 16px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Sub-rows: 14 to a row's pitch (GRID.SUB in public/static/app/analytics.js),
     so a table or panel is as tall as its content. Each card keeps the gap
     below it as a margin. */
  grid-auto-rows: calc((var(--row-h) + var(--gap)) / 14);
  column-gap: var(--gap);
  min-width: 0;
}
.dw {
  position: relative;
  margin-bottom: var(--gap);
  display: flex;
  flex-direction: column;
  grid-column: var(--x) / span var(--w);
  grid-row: var(--y) / span var(--h);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2);
}
.dw-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 6px 0 14px;
  transition: background-color var(--dur-1) ease;
}
.dw-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: var(--bg-tint);
  color: var(--text-dim);
}
.dw-mark .dw-logo svg {
  width: 14px;
  height: 14px;
}
/* A title wraps to a second line before it is cut: "Cost per signup (Meta)" keeps who counted it. */
.dw-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--type-ui);
  font-weight: var(--weight-title);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.dw-head-tools {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}
/* Square tools sit at the dense row height in the head and on every widget. */
.dw-menu-btn,
.dash-head .icon-button {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
}
/* The menu sits quiet until the card is pointed at, focused or touched. */
@media (hover: hover) {
  .dw:not(.is-editing) .dw-menu-btn {
    opacity: 0;
    transition: opacity var(--dur-1) ease;
  }
  .dw:hover .dw-menu-btn,
  .dw:focus-within .dw-menu-btn,
  .dw .dw-menu-btn[aria-expanded='true'] {
    opacity: 1;
  }
}
.dw .dropdown .menu-list {
  top: calc(100% + 2px);
}
.dw:has(.menu-list) {
  z-index: 30;
  overflow: visible;
}
.dw-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0 14px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  container-type: inline-size;
}
.dw-loading {
  padding-top: 6px;
}
.dw-loading > .skeleton-line {
  width: 60%;
}

/* A number tile. When its line is on the main chart, a bar in the line's
   color runs along its top. */
.dw-number .dw-body {
  justify-content: flex-end;
  padding: 0;
}
.dw-num {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  width: 100%;
  min-height: 100%;
  padding: 0 14px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.dw-num-toggle {
  cursor: pointer;
  transition: background-color var(--dur-1) ease;
}
.dw-num-toggle:hover {
  background: var(--bg-hover);
}
.dw-num-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.dw.is-charted::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--tone, var(--accent));
}
.dw.is-charted .dw-mark {
  background: color-mix(in srgb, var(--tone, var(--accent)) 14%, transparent);
  color: var(--tone, var(--accent));
}
.dw-num-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.dw-num-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.dw-num-value {
  font-size: var(--fs-28);
  font-weight: var(--weight-title);
  line-height: 1.1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.dw-num-value.is-none {
  font-size: var(--fs-24);
  font-weight: var(--weight-strong);
  color: var(--text-faint);
}
.dw-num-sub {
  overflow: hidden;
  font-size: var(--type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
}
.dw-spark {
  width: 84px;
  height: 34px;
  color: var(--tone, var(--accent));
}
.dw-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dw-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dw-spark-area {
  fill: currentColor;
  opacity: 0.1;
}
/* Today is still filling up: its stretch is dashed, as on the charts. */
.dw-spark-tail {
  stroke-dasharray: 2 3.5;
}
/* A taller tile: the sparkline goes under the number, full width. */
.dw-number.dw-tall .dw-num {
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
}
.dw-number.dw-tall .dw-spark {
  order: -1;
  width: 100%;
  height: 56px;
  margin-bottom: 4px;
}
@container (max-width: 210px) {
  .dw-num {
    grid-template-columns: minmax(0, 1fr);
  }
  .dw-spark {
    display: none;
  }
}

/* Charts fill the card; the script draws them at the box's size. */
.dw-chart {
  flex: 1;
  min-height: 0;
  padding: 0;
}
.dw-chart:focus-visible {
  border-radius: var(--r-md);
}
.dw-panel-chart {
  flex: 0 0 150px;
  margin: 2px 0 10px;
}
.dw-bar {
  fill: var(--accent);
  transition: fill var(--dur-1) ease;
}
.dw-bar.is-hover {
  fill: var(--accent-hover);
}
/* The bar still filling up (today, this hour): a lighter fill and a dashed edge, so a short bar reads as "so far", not a drop. */
.dw-bar.is-partial {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}
.dw-bar.is-partial.is-hover {
  fill: var(--accent-soft);
  stroke: var(--accent-hover);
}
.dw-line-over {
  stroke: var(--s2);
}
.dash-line.dw-tone-1 {
  stroke: var(--s1);
}
.dash-line.dw-tone-2 {
  stroke: var(--s2);
}
.dash-line.dw-tone-3 {
  stroke: var(--s3);
}
.dash-line.dw-tone-4 {
  stroke: var(--s4);
}
.dash-line.dw-tone-5 {
  stroke: var(--s5);
}
.dw .dash-hdot {
  stroke: var(--bg-raised);
}
.dash-hdot.dw-tone-1,
.dash-dot.dw-tone-1 {
  fill: var(--s1);
}
.dash-hdot.dw-tone-2,
.dash-dot.dw-tone-2 {
  fill: var(--s2);
}
.dash-hdot.dw-tone-3,
.dash-dot.dw-tone-3 {
  fill: var(--s3);
}
.dash-hdot.dw-tone-4,
.dash-dot.dw-tone-4 {
  fill: var(--s4);
}
.dash-hdot.dw-tone-5,
.dash-dot.dw-tone-5 {
  fill: var(--s5);
}
.dw-sw-1 {
  background: var(--s1);
}
.dw-sw-2 {
  background: var(--s2);
}
.dw-sw-3 {
  background: var(--s3);
}
.dw-sw-4 {
  background: var(--s4);
}
.dw-sw-5 {
  background: var(--s5);
}
.dw-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dw-legend {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 18px;
  padding-top: 8px;
  font-size: var(--type-small);
  color: var(--text-dim);
}
.dw-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.dw-legend.is-multi {
  justify-content: flex-start;
}
.dw-legend b {
  color: var(--text);
  font-weight: var(--weight-title);
}
.dw-legend .dw-legend-note {
  margin-left: auto;
  color: var(--text-faint);
  white-space: normal;
}
.dw .dash-none {
  margin: auto 0;
}

/* Horizontal bars, one per row. */
.dw-hbars {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
}
.dw-hbar {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-size: var(--type-ui);
}
.dw-hbar-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* One line a name, cut with an ellipsis (the full name is its title), so long campaign names never stack. */
.dw-hbar-name .dash-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}
.dw-hbar-track {
  height: 10px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--bg-hover);
}
.dw-hbar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.dw-hbar-val {
  min-width: 48px;
  font-weight: var(--weight-title);
  text-align: right;
}

/* Visit breakdown rows: the dashboard's rows, with as many columns as fit. */
.dw-rows-wrap {
  min-width: 0;
}
.dash-colhead.dw-colhead,
.dash-row.dw-row {
  grid-template-columns: minmax(0, 1fr) repeat(var(--n, 2), minmax(52px, auto));
}
.dw .dash-colhead {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 2px;
  background: var(--bg-raised);
}
.dw-tabs {
  flex-shrink: 0;
  margin: 0 0 10px;
}
.dw-tools-row {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 8px;
  min-width: 0;
}
.dw-tools-row:empty {
  display: none;
}
.dw-tools-row .dw-tabs {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0 auto 10px 0;
}
.dw-tools-row .dash-panel-tag,
.dw-tools-row .pill {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Tables: a name with a muted line, then numbers on the right. */
.dw-table-wrap {
  min-width: 0;
  margin: 0 -14px;
  overflow-x: auto;
}
/* A table wider than its card fades at the edge that scrolls, so the hidden columns show they are there. */
.dw-table-wrap.fade-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.dw-table-wrap.fade-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px);
}
.dw-table-wrap.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.dw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-ui);
  font-variant-numeric: tabular-nums;
}
.dw-table th,
.dw-table td {
  padding: 8px 14px;
  text-align: left;
  vertical-align: middle;
}
.dw-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 6px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.dw-table tbody tr + tr {
  border-top: 1px solid var(--line);
}
.dw-table tbody tr:hover {
  background: var(--bg-hover);
}
.dw-table tbody th {
  width: 100%;
  max-width: 0;
  font-weight: var(--weight-medium);
}
.dw-table .num {
  padding-left: 8px;
  text-align: right;
  white-space: nowrap;
}
.dw-table td.num {
  font-weight: var(--weight-title);
}
.dw-cell-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dw-cell-text {
  display: grid;
  min-width: 0;
}
.dw-cell-main,
.dw-cell-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-cell-sub {
  font-size: var(--type-caption);
  color: var(--text-faint);
}
.dw-logo {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text);
}
.dw-logo svg {
  width: 16px;
  height: 16px;
}
.dw-logo .logo-letter {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--type-label);
  font-weight: var(--weight-title);
}

/* Stat tiles in the connected panels, like the number tiles: lines between. */
.dw-stats {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
}
/* Three numbers fill the row, with no empty cell. */
.dw-stats-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@container (max-width: 560px) {
  .dw-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dw-stats-3 > :last-child {
    grid-column: 1 / -1;
  }
}
.dw-stat {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 11px 13px;
  background: var(--bg-raised);
}
.dw-stat-label {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.dw-stat-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-20);
  font-weight: var(--weight-title);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.dw-stat-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  /* Wraps rather than clips: a flex line cannot draw an ellipsis, so "Reported by Meta and Google" lost its end on a phone. */
  font-size: var(--type-caption);
  color: var(--text-faint);
}
.dw .dash-foot {
  flex-shrink: 0;
}
.dw .dash-panel-note {
  flex-shrink: 0;
  margin: 0 0 10px;
}
/* Widget empties are the shared .empty .empty-plain (ui.css), centered in the card. */
.dw .empty {
  flex: 1;
  align-content: center;
  padding: var(--space-3) var(--space-3) var(--space-2);
}
.dw .empty p:not(.empty-title) {
  margin: 0;
}
/* No widgets at all: the framed empty across the board, as tall as it needs. */
.dw-grid:has(> .empty) {
  grid-auto-rows: auto;
}
.dw-grid > .empty {
  grid-column: 1 / -1;
}

/* The skeleton the server draws on the same cells. */
.dw-sk {
  box-shadow: none;
}
.dw-sk-in {
  padding: 14px;
}

/* ---- editing ---- */
.dw.is-editing {
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.dw.is-editing:hover {
  border-color: var(--line-strong);
}
.dw.is-editing .dw-head {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.dw-grip {
  display: grid;
  place-items: center;
  width: 14px;
  margin-left: -6px;
  color: var(--text-faint);
}
.dw.is-editing:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dw.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--elev-2);
}
.dw.is-selected .dw-head {
  background: var(--accent-soft);
}
.dw.is-selected .dw-grip {
  color: var(--accent);
}
/* Hints about clicking keep their space while editing, so cards keep their height. */
.dw-hint.is-still,
.dw-notes-pop.is-still {
  visibility: hidden;
}
/* While editing, a widget is a thing to move, not to click through. */
.dw.is-editing .dw-body {
  pointer-events: none;
}
.dw.is-dragging,
.dw.is-resizing {
  z-index: 20;
  box-shadow: var(--elev-4);
}
.dw.is-dragging {
  opacity: 0.94;
  cursor: grabbing;
}
.dw-drop {
  grid-column: var(--x) / span var(--w);
  grid-row: var(--y) / span var(--h);
  margin-bottom: var(--gap);
  border: 2px dashed var(--accent);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  pointer-events: none;
}
.dw-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  touch-action: none;
}
.dw-resize::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  border-bottom-right-radius: var(--r-xs);
}
.dw.is-selected .dw-resize::after,
.dw-resize:hover::after {
  border-color: var(--accent);
}
.dash.is-editing .dash-head {
  position: sticky;
  top: 62px;
  z-index: 40;
  margin: -8px -12px 0;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--bg);
}
.dash.is-editing .dash-save-state {
  min-width: 0;
}

/* ---- Chart settings ---- */
.dw-inspector {
  position: sticky;
  top: 160px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
  max-height: calc(100dvh - 180px);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-3);
  animation: dw-in var(--dur-2) var(--ease-out);
}
@keyframes dw-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
}
.dw-insp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--line);
}
.dw-insp-head h2 {
  margin: 0;
  font-size: var(--type-body);
  font-weight: var(--weight-title);
}
.dw-insp-body {
  display: grid;
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dw-insp-foot {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.dw-insp-foot .btn {
  gap: 6px;
}
.dw-insp-foot .dw-remove {
  margin-left: auto;
  color: var(--danger-fg);
}
.dw-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.dw-field-label {
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  color: var(--text-dim);
}
.dw-field-hint {
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--text-faint);
}
.dw-field .field-input {
  height: 38px;
  font-size: var(--type-ui);
}
.dw-switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.dw-switch-row > span {
  display: grid;
  gap: 2px;
}
.dw-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  padding: 2px;
  border: 1px solid var(--line-control);
  border-radius: var(--r-md);
}
.dw-stepper-val {
  min-width: 64px;
  font-size: var(--type-ui);
  font-weight: var(--weight-strong);
  text-align: center;
}
.dw-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--line-control);
  border-radius: var(--btn-radius);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--type-ui);
  text-align: left;
  cursor: pointer;
}
.dw-picker:hover {
  border-color: var(--line-strong);
}
.dw-picker:focus-visible,
.dw-picker[aria-expanded='true'] {
  border-color: var(--accent);
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}
.dw-picker-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.dw-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: var(--weight-strong);
}
.dw-picker-item > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-inspector .dropdown {
  display: block;
}
.dw-menu-metrics {
  left: 0;
  right: 0;
  min-width: 0;
  max-height: min(56vh, 440px);
  max-height: min(56dvh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dw-menu-group {
  display: flex;
  align-items: center;
  gap: 7px;
}
/* The metric picker: the search box stays on top while the list scrolls under it. */
.dw-menu-metrics {
  padding-top: 0;
}
.dw-find-wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-2) var(--space-1) var(--space-1);
  background: var(--bg-raised);
}
.dw-find {
  width: 100%;
}
.dw-pick-row[hidden],
.dw-pick-group[hidden] {
  display: none;
}
/* Each metric's value now, so people pick by seeing: right-aligned, tabular, quiet. */
.dw-pick-val {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--space-3);
  color: var(--text-dim);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
}
.dw-pick-row .dash-menu-text {
  flex: 1 1 auto;
}
.dw-pick-none {
  margin: 0;
  padding: var(--space-3) 10px;
  font-size: var(--type-small);
  color: var(--text-dim);
}
.dw-menu-group .dash-ic,
.dw-menu-group .dw-logo {
  color: var(--text-dim);
}
.dw-menu-group .dw-logo svg {
  width: 13px;
  height: 13px;
}

/* ---- in between: the board flows; widgets keep their order and height ---- */
@media (max-width: 1080px) {
  .dw-grid {
    --board: 0;
    grid-auto-flow: row dense;
  }
  .dw {
    grid-column: span var(--wm);
    grid-row: span var(--h);
    order: var(--o);
  }
  .dw-drop {
    display: none;
  }
  .dash-body.is-inspecting {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: min(64vh, 560px);
  }
  /* Chart settings become a bottom sheet over the board. */
  .dw-inspector {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: auto;
    z-index: 90;
    max-height: min(64vh, 560px);
    max-height: min(64dvh, 560px);
    border-bottom: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--elev-4);
    animation-name: dw-up;
  }
  .dw-insp-head {
    position: relative;
    padding-top: 16px;
  }
  .dw-insp-head::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: var(--r-pill);
    background: var(--line-strong);
  }
  .dw-insp-body {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
  }
}
@keyframes dw-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* ---- phones: numbers two a row, everything else the whole width ---- */
@media (max-width: 720px) {
  .dw-grid {
    --gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    row-gap: var(--gap);
  }
  .dw {
    grid-column: span var(--wp);
    grid-row: auto;
    margin-bottom: 0;
  }
  .dw-number {
    min-height: 104px;
  }
  /* A row's name takes a second line rather than ending in "...", so "Direct / None" and a page path read whole.
     Three lines at most: a 180-character product path filled a phone screen. The full name is the title. */
  .dash-label {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  /* Two numbers a row leave no room for the plain # mark: its 30px goes to the name, so "Unique visitors" reads whole. A platform logo stays. */
  .dw-number .dw-mark:not(:has(.dw-logo)) {
    display: none;
  }
  .dw-body {
    overflow: visible;
    padding-inline: 12px;
  }
  .dw-line .dw-chart,
  .dw-bar .dw-chart {
    flex: 0 0 210px;
  }
  .dw-head {
    height: 42px;
    padding-left: 12px;
  }
  .dw-num {
    padding-inline: 12px;
  }
  .dw-num-value {
    font-size: var(--fs-24);
  }
  .dw-table-wrap {
    margin-inline: -12px;
  }
  .dw-table th,
  .dw-table td {
    padding-inline: 12px;
  }
  .dash-title {
    font-size: var(--fs-18);
  }
  .dash-refreshed-text {
    display: none;
  }
  .dash-head-actions {
    margin-left: auto;
  }
  .dash-addcard-start {
    min-width: 44px;
  }
  /* The smallest phones: Share keeps its icon (the label stays its name), so
     the five actions fit on one row. */
  @media (max-width: 359px) {
    .dash-head-actions {
      gap: 6px;
    }
    .dash-share {
      min-width: 44px;
      padding-inline: 0;
      justify-content: center;
    }
    .dash-share > span:not(.dash-ic) {
      display: none;
    }
  }
  .dash-head-filters > .dropdown:first-child {
    flex: 1 1 100%;
  }
  .dash-head-filters .dash-range {
    width: 100%;
  }
  .dash.is-editing .dash-head {
    top: 56px;
    margin-inline: -16px;
    padding-inline: 16px;
    border-radius: 0;
  }
  .dw-resize {
    width: 32px;
    height: 32px;
  }
  .dw-legend .dw-legend-note {
    margin-left: 0;
  }
  .dw-hbar {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw,
  .dw-inspector,
  .dw-num-toggle,
  .dw-menu-btn {
    animation: none;
    transition: none;
  }
  .dash-refresh.is-spinning svg {
    animation: none;
  }
}
@media (max-width: 720px) {
  .dw-inspector {
    max-height: 52vh;
    max-height: 52dvh;
  }
  .dash-body.is-inspecting {
    padding-bottom: 52vh;
  }
}
@media (max-width: 720px) {
  /* While editing on a phone the sticky bar keeps only the title and actions. */
  .dash.is-editing .dash-head-filters {
    display: none;
  }
}

/* ---- ad rows: sortable headers, the top-N note, and their settings ---- */
.dw-table thead th:has(.dw-sort) {
  padding-block: 2px;
}
.dw-sort {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-height: 28px;
  padding: 0 4px;
  margin-right: -4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.dw-sort:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
}
.dw-sort:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}
.dw-sort:disabled {
  cursor: default;
}
.dw-sort.is-on {
  color: var(--text);
}
.dw-sort-dir {
  font-family: var(--sans);
  font-size: var(--type-caption);
}
.dw-table td.is-sorted {
  color: var(--text);
}
.dw-table-more {
  margin: 0;
  padding: 8px 14px 0;
  font-size: var(--type-caption);
  color: var(--text-faint);
}
.dw-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: var(--type-ui);
  cursor: pointer;
}
.dw-check:hover {
  background: var(--bg-hover);
}
.dw-check input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.dw-check span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-rows-all {
  justify-self: start;
}

/* ---- the visitors-now tile ---- */
.dw-live .dw-body {
  justify-content: flex-end;
}
.dw-livebox {
  display: grid;
  gap: 2px;
  padding-bottom: 2px;
}
.dw-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dw-live-num {
  font-size: var(--fs-28);
  font-weight: var(--weight-title);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.dw-livebox.on .dash-pulse {
  background: var(--success-fg);
}
.dw-livebox.on .dash-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--success-fg);
  opacity: 0.5;
  animation: dash-pulse 2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

/* ---- undo and redo while editing ---- */
.dash-undo {
  display: inline-flex;
  gap: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .dash-live.on .dash-pulse::after,
  .dw-livebox.on .dash-pulse::after {
    animation: none;
    /* At rest the ring is a soft halo, not a second solid dot. */
    opacity: 0.25;
  }
}
/* While editing, a widget waiting for its new numbers dims a little. */
.dash.is-refreshing .dw.is-selected .dw-body {
  opacity: 0.55;
  transition: opacity var(--dur-2) ease var(--dur-1);
}
/* In the panels the whole card scrolls, so a table never squeezes into a
   strip of its own; a table widget scrolls inside, under its sticky head. */
.dw-ads .dw-table-wrap,
.dw-sales .dw-table-wrap,
.dw-messages .dw-table-wrap {
  flex-shrink: 0;
}

/* ---- who is on the site: the live pill's list and Recent visitors ---- */
.dash-live-btn {
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.dash-live-btn:hover {
  border-color: var(--line-strong);
  background: var(--bg-hover);
}
.dash-live-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dash-live-btn[aria-expanded='true'] {
  border-color: var(--accent);
}
.dash-live-btn .dash-ic {
  color: var(--text-faint);
}
.menu-list.dw-live-menu {
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  max-height: min(70dvh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dw-live-head {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.dw-live-head span {
  font-size: var(--type-small);
  color: var(--text-faint);
}
.dw-live-all {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.dw-people {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
}
a.dw-person:hover,
a.dw-person:focus-visible {
  background: var(--bg-hover);
  outline: 2px solid transparent;
  text-decoration: none;
}
a.dw-person:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.dw-person-av {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--type-label);
  font-weight: var(--weight-title);
}
.dw-person-text {
  display: grid;
  min-width: 0;
}
.dw-person-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-size: var(--type-ui);
  font-weight: var(--weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-person-tag {
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--chip-ok-bg, var(--bg-hover));
  color: var(--chip-ok-fg, var(--text-dim));
  font-size: var(--fs-11);
  font-weight: var(--weight-strong);
}
.dw-person-sub {
  overflow: hidden;
  font-size: var(--type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
}
.dw-person-facts {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-small);
  color: var(--text-dim);
  white-space: nowrap;
}
.dw-person-src {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-person-when {
  min-width: 64px;
  text-align: right;
  color: var(--text-faint);
}
.dw-visitors .dw-body {
  padding-inline: 6px;
}
@container (max-width: 420px) {
  .dw-person-src {
    display: none;
  }
}
@media (max-width: 720px) {
  .dw-person-src {
    max-width: 72px;
  }
}
.dw-person-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A narrow card: the name takes the row's full width, and where from, the
   flag, device and time sit under it on the right, beside the visit count.
   Names and pages wrap rather than end in "...". */
@container (max-width: 420px) {
  .dw-person {
    row-gap: 2px;
  }
  .dw-person-av {
    grid-row: 1 / span 2;
  }
  .dw-person-text {
    display: contents;
  }
  .dw-person-name {
    flex-wrap: wrap;
    grid-column: 2 / -1;
    overflow: visible;
    white-space: normal;
  }
  .dw-person-label,
  .dw-person-sub {
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .dw-person-sub {
    grid-column: 2;
  }
  .dw-person-facts {
    grid-row: 2;
    grid-column: 3;
  }
}
.dw-person-tag {
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .dw-live-menu .dw-person-src {
    display: none;
  }
}

/* ---- no inner scrollbars: charts fit their card, tables and panels grow
   to fit their rows (the script measures them) ---- */
.dw .dw-body {
  overflow: hidden;
}
.dw.dw-auto .dw-body {
  overflow: visible;
}
.dw.dw-auto .dw-table-wrap {
  flex-shrink: 0;
  overflow: visible;
}

/* ---- the main chart's marks for the bucket still filling up ---- */
.dw .dash-dot.dw-today {
  fill: var(--bg-raised);
  stroke: var(--accent);
  stroke-width: 2;
}
/* A line with one number so far (tracking began today): a soft halo and the number beside it. */
.dw .dash-halo {
  fill: var(--accent);
  opacity: 0.16;
}
.dw .dash-halo.dw-tone-1 { fill: var(--s1); }
.dw .dash-halo.dw-tone-2 { fill: var(--s2); }
.dw .dash-halo.dw-tone-3 { fill: var(--s3); }
.dw .dash-halo.dw-tone-4 { fill: var(--s4); }
.dw .dash-halo.dw-tone-5 { fill: var(--s5); }
.dw .dash-solo {
  fill: var(--text);
  font-family: var(--sans);
  font-size: var(--type-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dw .dash-dot.dw-today.is-real {
  fill: var(--accent);
  stroke: var(--bg-raised);
  stroke-width: 2;
}
.dw .dash-dot.dw-today.dw-tone-1 { stroke: var(--s1); }
.dw .dash-dot.dw-today.dw-tone-2 { stroke: var(--s2); }
.dw .dash-dot.dw-today.dw-tone-3 { stroke: var(--s3); }
.dw .dash-dot.dw-today.dw-tone-4 { stroke: var(--s4); }
.dw .dash-dot.dw-today.dw-tone-5 { stroke: var(--s5); }
.dw .dash-dot.dw-today.is-real.dw-tone-1 { fill: var(--s1); stroke: var(--bg-raised); }
.dw .dash-dot.dw-today.is-real.dw-tone-2 { fill: var(--s2); stroke: var(--bg-raised); }
.dw .dash-dot.dw-today.is-real.dw-tone-3 { fill: var(--s3); stroke: var(--bg-raised); }
.dw .dash-dot.dw-today.is-real.dw-tone-4 { fill: var(--s4); stroke: var(--bg-raised); }
.dw .dash-dot.dw-today.is-real.dw-tone-5 { fill: var(--s5); stroke: var(--bg-raised); }
/* Pointing at a legend item picks its line out. */
.dw-chart .is-dim {
  opacity: 0.16;
  transition: opacity var(--dur-1) ease;
}
.dw-legend-item {
  border-radius: var(--r-sm);
}
.dw-legend-item:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--accent);
}

/* ---- number tiles say they can be clicked ---- */
.dw-num-toggle {
  position: relative;
}
.dw-num-toggle > :not(.dw-num-hit):not(.dw-chip-row) {
  pointer-events: none;
}
.dw-num-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.dw-num-hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.dw-num-toggle:hover {
  background: var(--bg-hover);
}
.dw-chip-row {
  position: absolute;
  top: -36px;
  right: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
  pointer-events: none;
}
.dw-num-toggle:hover .dw-chip-row,
.dw-num-toggle:focus-within .dw-chip-row,
.dw-chip-row:has([aria-expanded='true']) {
  opacity: 1;
}
.dw-chip-row .dw-swatch-pop {
  pointer-events: auto;
}
@media (hover: none) {
  .dw-chip-row {
    opacity: 1;
  }
}
.dw-chart-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}
.dw-chart-chip.is-on {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 45%, var(--line));
  color: var(--text);
}
.dw-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
}
.dw-legend.is-multi .dw-hint {
  order: 9;
}

/* ---- colors: the dot that opens the picker, and the picker ---- */
.dw-swatch-pop {
  display: inline-flex;
}
.dw-swatch-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid var(--bg-raised);
  border-radius: 50%;
  background: var(--sw, var(--accent));
  box-shadow: 0 0 0 1px var(--line-strong);
  cursor: pointer;
}
.dw-legend .dw-swatch-btn {
  width: 14px;
  height: 14px;
}
.dw-swatch-btn:hover {
  box-shadow: 0 0 0 1px var(--text-dim);
}
.dw-swatch-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.menu-list.dw-color-menu {
  width: 248px;
}
.dw-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 8px 8px;
}
.dw-swatch {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--bg-raised);
  border-radius: 50%;
  background: var(--sw, var(--bg-tint));
  box-shadow: 0 0 0 1px var(--line-strong);
  color: var(--text-dim);
  cursor: pointer;
}
.dw-swatch[aria-checked='true'] {
  box-shadow: 0 0 0 2px var(--text);
}
.dw-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dw-hex {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0 8px 4px;
}
.dw-hex-wheel {
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line-control);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  cursor: pointer;
}
.dw-hex-text {
  height: 34px;
  font-family: var(--mono);
  font-size: var(--type-small);
}

/* ---- a sparkline with one day of data is a dot ---- */
.dw-spark {
  position: relative;
}
.dw-spark-base {
  stroke: var(--line-strong);
  stroke-width: 1;
}
.dw-spark-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .dw-chip-row,
  .dw-chart .is-dim {
    transition: none;
  }
}
/* The number tile's chip sits in the header row, above its body. */
.dw.dw-number .dw-body {
  overflow: visible;
}
/* The chart chip lives in the number tile's header, before its menu. */
.dw-head .dw-chip-row {
  position: static;
  margin-right: 2px;
  opacity: 1;
  pointer-events: auto;
}
.dw-head .dw-chip-row:not(.is-on) {
  opacity: 0;
}
.dw:hover .dw-head .dw-chip-row,
.dw:focus-within .dw-head .dw-chip-row {
  opacity: 1;
}
@media (hover: none) {
  .dw-head .dw-chip-row:not(.is-on) {
    opacity: 1;
  }
  .dw-head .dw-chip-row:not(.is-on) .dw-chip-text {
    display: none;
  }
}
.dw-chart-chip {
  cursor: pointer;
  font: inherit;
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
}
.dw-chart-chip:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.dw-chart-chip.is-on {
  width: 22px;
  justify-content: center;
  padding: 0;
  border-color: transparent;
  background: color-mix(in srgb, var(--tone, var(--accent)) 16%, transparent);
  color: var(--tone, var(--accent));
}
.dw-chart-chip.is-on .dw-chip-text {
  display: none;
}
/* Hidden chips take no room, so titles stay whole until a tile is pointed at. */
.dw-head .dw-chip-row:not(.is-on) {
  display: none;
}
.dw:hover .dw-head .dw-chip-row,
.dw:focus-within .dw-head .dw-chip-row {
  display: flex;
}
@media (hover: none) {
  .dw-head .dw-chip-row:not(.is-on) {
    display: flex;
  }
}
.dw-color-rows {
  display: grid;
  gap: 6px;
}
.dw-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--type-ui);
}
.dw-inspector .dw-swatch-pop .menu-list {
  top: calc(100% + 6px);
}

/* ---- round four: clean tiles, the dashboard switcher, goals, headers, segments ---- */
/* Outside edit mode a tile on the chart says so with its top bar; the chip shows on hover only. */
.dw-head .dw-chip-row,
.dw-head .dw-chip-row.is-on {
  display: none;
}
.dw:hover .dw-head .dw-chip-row,
.dw:focus-within .dw-head .dw-chip-row {
  display: flex;
}
@media (hover: none) {
  .dw-head .dw-chip-row,
  .dw-head .dw-chip-row:not(.is-on) {
    display: none;
  }
}
/* In a number tile's head the chip is its plus alone ("Add to chart" is its tooltip), laid
   over the end of the name beside the menu: taking room in the row, it squeezed a
   quarter-width tile's name into "Conversi / ons" on hover. */
.dw-number .dw-head {
  position: relative;
}
.dw-number .dw-head .dw-chip-row {
  position: absolute;
  top: 50%;
  right: calc(6px + var(--ctl-h-sm));
  margin: 0;
  padding-left: var(--space-3);
  background: linear-gradient(to right, transparent, var(--bg-raised) var(--space-3));
  transform: translateY(-50%);
}
.dw-number .dw-head .dw-chip-text {
  display: none;
}
.dw-number .dw-head .dw-chart-chip {
  width: 22px;
  justify-content: center;
  padding: 0;
}
.dw-legend .dw-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* The dashboard switcher: the title is the button. */
.dash-board-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 420px;
  min-height: 36px;
  margin-left: -8px;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--type-title);
  font-weight: var(--weight-title);
  letter-spacing: -0.012em;
  cursor: pointer;
}
.dash-board-btn:hover,
.dash-board-btn[aria-expanded='true'] {
  background: var(--bg-hover);
}
.dash-board-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.dash-board-btn svg {
  flex-shrink: 0;
  color: var(--text-dim);
}
.dash-board-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-list.dash-menu-boards {
  left: -8px;
  width: min(320px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  max-height: min(560px, calc(100dvh - 120px));
  overflow-y: auto;
}
.dash-menu-boards .dash-menu-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-menu-boards .dash-menu-main {
  min-width: 0;
}
.dash-template {
  align-items: flex-start;
  padding-block: 8px;
}
.dash-template-text {
  display: grid;
  gap: 1px;
  text-align: left;
}
.dash-template-text b {
  font-weight: var(--weight-strong);
}
.dash-template-text span {
  color: var(--text-dim);
  font-size: var(--type-small);
}
/* "Show to clients": a menu row that is the shared .switch. */
.menu-row.dash-menu-switch {
  font-weight: inherit;
}
.dash-menu-switch input {
  margin-left: auto;
}

/* ---- dialogs: confirmations, rename, the share link, notes, a new goal ---- */
.dash-share-row {
  display: flex;
  gap: var(--space-2);
}
.dash-share-row .field-input {
  flex: 1 1 auto;
  min-width: 0;
}
.dialog .dw-goal-maker {
  padding: 0;
  border: 0;
  background: transparent;
}
.dialog .dw-gm-head {
  display: none;
}
.dash-goal-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
}
.dash-goal-pick .field-input {
  width: auto;
  max-width: 180px;
  height: 32px;
  padding-block: 0;
  font-size: var(--type-small);
}
.dw-goal-none {
  margin: 0;
}
@media (max-width: 640px) {
  .dash-board-btn {
    max-width: calc(100vw - 150px);
    font-size: var(--fs-18);
  }
}

/* Ad headers: every column named over its values, on up to two lines held to the bottom so the
   one-line names sit on the same baseline; a longer name ends in an ellipsis, the full name on hover. */
.dw.dw-auto .dw-table-wrap:has(.dw-ad-table) {
  overflow-x: auto;
  overflow-y: hidden;
}
.dw-ad-table thead th.num {
  max-width: 152px;
  vertical-align: bottom;
}
.dw-ad-table thead th:first-child {
  vertical-align: bottom;
}
.dw-ad-table th,
.dw-ad-table td {
  padding-inline: 10px;
}
.dw-ad-table tbody th {
  min-width: 150px;
}
/* A tall ad panel gives spare room to its chart, never to blank space under the rows. */
.dw.dw-auto .dw-panel-chart {
  flex: 1 0 150px;
}
.dw-ad-table .dw-sort {
  max-width: 100%;
  margin-right: 0;
  padding-inline: 0;
}
.dw-sort-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-ad-table .dw-sort {
  align-items: flex-end;
}
.dw-ad-table .dw-sort-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* As wide as the name up to the cap, so the column never squeezes it to one word a line. */
  width: max-content;
  max-width: 132px;
  white-space: normal;
  text-align: right;
  text-wrap: balance;
}
.dw-ad-table th.num,
.dw-ad-table td.num {
  text-align: right;
}

.dw-ad-table thead th:first-child,
.dw-ad-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-raised);
}
.dw-ad-table thead th:first-child {
  z-index: 2;
}
.dw-ad-table tbody tr:hover th {
  background: var(--bg-hover);
}
@media (max-width: 640px) {
  .dw-ad-table tbody th {
    min-width: 128px;
    max-width: 150px;
  }
}

/* A one-row tile with nothing connected: one quiet line and a Connect link, no mark. */
.dw-number .empty {
  justify-items: start;
  align-content: end;
  gap: var(--space-1);
  padding: 0 14px 12px;
  text-align: left;
}
.dw-number .empty-mark {
  display: none;
}
.dw-number .empty p:not(.empty-title) {
  font-size: var(--type-small);
}
.dw-number .empty .btn {
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  margin: 0;
  font-weight: var(--weight-strong);
}
.dw-number .empty .btn:hover {
  text-decoration: underline;
}

/* ---- Chart settings on wide screens: the board keeps its real width (the drawer is below) ---- */
@media (min-width: 1081px) {
  .dash-body.is-inspecting {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- a goal made in the editor ---- */
.dw-goal-maker {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-tint);
}
.dw-gm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -4px -4px -4px 0;
  font-size: var(--type-ui);
}
.dw-gm-ideas {
  display: grid;
  gap: 6px;
}
.dw-gm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dw-gm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.dw-gm-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-gm-chip:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.dw-gm-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.dw-gm-form {
  display: grid;
  gap: 12px;
}
.dw-gm-form .dw-field-hint {
  margin: 0;
}
.dw-gm-error {
  margin: 0;
  color: var(--danger-fg);
  font-size: var(--type-small);
}
.dw-gm-actions {
  display: flex;
  justify-content: flex-end;
}
.dash-goal-new {
  gap: 6px;
}

/* The edit bar keeps to one row at 1280: a shorter title field and goal picker. */
@media (min-width: 1081px) {
  .dash.is-editing .dash-title-input {
    width: min(240px, 100%);
  }
  .dash-goal-pick .field-input {
    max-width: 160px;
  }
}

/* ---- Chart settings: one calm system (sizes as Mokxi's comfortable controls) ---- */
.dw-inspector {
  --ctl-h: 36px;
  --ctl-r: 8px;
  --ctl-px: 10px;
  --ctl-fs: 14px;
}
.dw-insp-head {
  flex-shrink: 0;
  align-items: flex-start;
  padding: 14px 10px 12px 20px;
}
.dw-insp-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.dw-insp-kicker {
  color: var(--text-faint);
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
}
.dw-insp-head h2.dw-insp-name {
  overflow: hidden;
  margin: 0;
  font-size: var(--type-heading);
  font-weight: var(--weight-title);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-inspector .dw-insp-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.dw-sec {
  display: grid;
  gap: 14px;
  padding: 18px 20px 20px;
}
.dw-sec + .dw-sec {
  border-top: 1px solid var(--line);
}
.dw-sec-title {
  margin: 0;
  color: var(--text);
  font-size: var(--type-small);
  font-weight: var(--weight-title);
  letter-spacing: 0;
}
.dw-sec-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.dw-inspector .dw-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.dw-inspector .dw-field-label {
  color: var(--text-dim);
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  line-height: 1.3;
}
.dw-inspector .dw-field-hint {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--type-small);
  line-height: 1.4;
}
.dw-field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
/* Every input, select and picker: one height, radius and padding. */
.dw-inspector .field-input,
.dw-inspector .dw-picker,
.dw-inspector .dw-static {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-px);
  border-radius: var(--ctl-r);
  font-size: var(--ctl-fs);
  line-height: 1.2;
}
.dw-inspector select.field-input {
  padding-right: 30px;
  text-overflow: ellipsis;
}
.dw-inspector .dw-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding-block: 6px;
}
.dw-static {
  display: flex;
  align-items: center;
  border: 1px dashed var(--line);
  color: var(--text-dim);
}
.dw-inspector .segmented {
  --seg-h: var(--ctl-h);
  display: flex;
  width: 100%;
}
.dw-inspector .segment {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-inspector .dw-stepper {
  display: grid;
  grid-template-columns: var(--ctl-h) minmax(0, 1fr) var(--ctl-h);
  align-items: center;
  width: 100%;
  height: var(--ctl-h);
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--ctl-r);
  background: var(--bg-raised);
}
.dw-step {
  display: grid;
  place-items: center;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.dw-step:hover:not(:disabled) {
  color: var(--text);
}
.dw-step:disabled {
  opacity: 0.4;
  cursor: default;
}
.dw-step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--ctl-r);
}
.dw-inspector .dw-stepper-val {
  text-align: center;
  font-size: var(--ctl-fs);
}
.dw-inspector .dw-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dw-switch-text {
  display: grid;
  gap: 2px;
}
.dw-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  cursor: pointer;
  justify-self: start;
}
.dw-link:disabled {
  color: var(--text-faint);
  cursor: default;
}
.dw-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Checklists: names wrap to two lines, never sideways; no box of their own to scroll. */
.dw-checklist {
  display: grid;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--ctl-r);
  background: var(--bg-raised);
}
.dw-checklist-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ctl-h);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.dw-inspector .dw-checklist-find {
  flex: 1 1 auto;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  font-size: var(--type-small);
}
.dw-checklist-count {
  margin-right: auto;
  color: var(--text-faint);
  font-size: var(--type-small);
  white-space: nowrap;
}
.dw-checklist-find + .dw-checklist-count {
  margin-right: 0;
}
.dw-checklist-items {
  display: grid;
  min-width: 0;
  padding: 4px 0;
}
.dw-inspector .dw-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 7px 10px;
  font-size: var(--ctl-fs);
  line-height: 1.3;
  cursor: pointer;
}
.dw-inspector .dw-check[hidden] {
  display: none;
}
.dw-inspector .dw-check:hover {
  background: var(--bg-hover);
}
.dw-inspector .dw-check input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.dw-check-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* The footer: Remove on the left, Done on the right. */
.dw-inspector .dw-insp-foot {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
}
.dw-inspector .dw-insp-foot .dw-done {
  min-width: 84px;
  margin-left: auto;
}
.dw-inspector .dw-goal-maker {
  gap: 14px;
  padding: 14px;
  border-radius: var(--ctl-r);
}

/* ---- the drawer itself (wide screens) ---- */
@media (min-width: 1081px) {
  .dw-inspector.is-drawer {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: auto;
    z-index: 92;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: none;
    border-radius: var(--r-xl);
    box-shadow: var(--elev-4);
    animation: dw-drawer-in var(--dur-2) var(--ease-out);
  }
  .dw-inspector.is-drawer.is-left {
    right: auto;
    left: 16px;
    animation-name: dw-drawer-in-left;
  }
  /* Everything but the selected widget and the edit bar sits under a soft dim. */
  .dash.has-drawer::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 88;
    background: color-mix(in srgb, var(--scrim) 58%, transparent);
    pointer-events: none;
    animation: dw-fade var(--dur-2) var(--ease-out);
  }
  .dash.has-drawer .dw.is-selected {
    z-index: 90;
    box-shadow: 0 0 0 2px var(--accent), var(--elev-3);
  }
  .dash.has-drawer.is-editing .dash-head {
    z-index: 91;
  }
}
@keyframes dw-drawer-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
@keyframes dw-drawer-in-left {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}
@keyframes dw-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dw-inspector.is-drawer,
  .dash.has-drawer::after {
    animation: none;
  }
}
/* Phones: the sheet, with finger-sized controls. */
@media (max-width: 720px) {
  .dw-inspector {
    --ctl-h: 44px;
    --ctl-fs: 16px;
  }
  .dw-sec {
    padding: 16px;
  }
  .dw-field-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dw-inspector .dw-insp-foot {
  justify-content: flex-start;
}
.dw-field-pair.dw-pair-auto {
  grid-template-columns: minmax(0, 1fr) auto;
}
.dw-inspector .dw-pair-auto .segmented {
  width: auto;
}
.dw-inspector .dw-pair-auto .segment {
  flex: 0 0 auto;
  padding-inline: 10px;
}
.dw-inspector .dw-insp-foot .dw-remove {
  margin-left: 0;
}

/* ---- notes on the chart (src/dashboard/notes.ts) ---- */
/* A small flag on the baseline of a day with a note; the note reads in the tip. */
.dash-note line {
  stroke: var(--text-faint);
  stroke-width: 1.25;
}
.dash-note circle {
  fill: var(--accent);
  stroke: var(--bg-raised);
  stroke-width: 1.5;
}
.dash-svg.is-drillable {
  cursor: pointer;
}
.dash-tip-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 240px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--text);
  white-space: normal;
}
.dash-tip-note .dash-ic {
  margin-top: 3px;
  color: var(--accent);
}
.dw-notes-pop {
  display: inline-flex;
}
.dw-notes-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}
.dw-notes-btn:hover,
.dw-notes-btn[aria-expanded='true'] {
  border-color: var(--line-strong);
  color: var(--text);
}
/* The notes dialog: this period's notes, then a day and a line to add one. */
.dash-notes {
  display: grid;
  max-height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.dash-notes-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 4px 4px 4px 6px;
  border-radius: var(--r-md);
  font-size: var(--type-ui);
}
.dash-notes-item.is-day {
  background: var(--accent-soft);
}
.dash-notes-day {
  font-family: var(--mono);
  font-size: var(--type-caption);
  color: var(--text-faint);
}
.dash-notes-text {
  overflow-wrap: anywhere;
}
.dash-notes-auto {
  display: block;
  font-size: var(--type-caption);
  color: var(--text-faint);
}
.dash-notes .icon-button {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
}
.dash-notes-row {
  grid-template-columns: 132px minmax(0, 1fr);
}
@media (max-width: 720px) {
  .dw-notes-btn {
    min-height: 44px;
  }
  .dash-head .icon-button,
  .dash-notes .icon-button {
    width: var(--ctl-h-lg);
    height: var(--ctl-h-lg);
  }
  .dash-notes-row {
    grid-template-columns: 1fr;
  }
}

/* A revenue widget's takeaway: one sentence above its numbers (src/revenue/report.ts). */
.dw-take {
  margin: 0 0 var(--space-3);
  font-size: var(--type-body);
  line-height: var(--lh-snug);
  color: var(--text);
  text-wrap: pretty;
}

/* Ad spend card: a row's own result kind under its count, names that open Attribution. */
.dw-cell-link {
  color: inherit;
  text-decoration: none;
}
.dw-cell-link:hover,
.dw-cell-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dw-cell-kind {
  display: block;
  font-size: var(--type-caption);
  font-weight: 400;
  color: var(--text-faint);
  white-space: nowrap;
}

/* The one line on what keeps ads untied, with Copy parameters and How. */
.dw-ad-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex-shrink: 0;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-hover);
}
.dw-ad-foot-text {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  font-size: var(--type-caption);
  color: var(--text-dim);
}
.dw-ad-foot-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Customize: ordered picks (numbers on top, columns) and column sets. */
.dw-cols {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.dw-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dw-presets .dw-gm-chip[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--accent);
}
.dw-ordered {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.dw-ordered-items {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-ordered-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.dw-ordered-name {
  overflow: hidden;
  font-size: var(--type-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-ordered-btn {
  width: 32px;
  height: 32px;
}
.dw-ordered-btn:disabled {
  opacity: 0.35;
}
/* Ad card labels name who counted them ("Cost per signup (Meta)"): they wrap rather than lose the platform. */
.dw-stat.dw-by-platform .dw-stat-label,
.dw-stat.dw-by-tracked .dw-stat-label {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---- the Card editor: metric, Show as and Split by up front; the rest under More ---- */
.dw-shape {
  width: 100%;
}
.dw-shape .segment {
  flex: 1 1 0;
}
.dw-more {
  border-top: 1px solid var(--line);
}
.dw-more-sum {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--ctl-h-lg);
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
  font-size: var(--type-small);
  font-weight: var(--weight-title);
  color: var(--text);
}
.dw-more-sum::-webkit-details-marker {
  display: none;
}
.dw-more-sum:hover {
  background: var(--bg-hover);
}
.dw-more-sum:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dw-more-hint {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-weight: var(--weight-medium);
}
.dw-more-sum .dash-ic {
  color: var(--text-dim);
  transition: transform var(--dur-2) var(--ease-out);
}
.dw-more[open] .dw-more-sum .dash-ic {
  transform: rotate(180deg);
}
.dw-more-body {
  display: grid;
  gap: 14px;
  padding: 4px 20px 20px;
}
.dw-filters {
  display: grid;
  gap: var(--space-2);
}
.dw-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 4px 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}
.dw-filter-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--type-small);
  color: var(--text-dim);
}
.dw-filter-text b {
  color: var(--text);
  font-weight: var(--weight-strong);
}
.dw-filter-new {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--space-2);
  align-items: center;
}
.dw-filter-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: start;
  min-height: 32px;
}
@media (max-width: 520px) {
  .dw-filter-new {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dw-filter-new .dw-filter-ok {
    grid-column: 1 / -1;
  }
}

/* ---- tabs past three: More, a quiet select that reads as a tab ---- */
.dw-tab-more {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  padding: 0 6px 0 9px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
}
.dw-tab-more:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.dw-tab-more.is-on {
  background: var(--bg-hover);
  color: var(--text);
}
.dw-tab-select {
  /* As wide as the option shown ("More", or the view picked), not the longest one. */
  field-sizing: content;
  appearance: none;
  min-height: 30px;
  padding: 0 14px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dw-tab-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.dw-tab-more .dash-ic {
  position: absolute;
  right: 6px;
  pointer-events: none;
}

/* ---- empty in one line, with its action ---- */
.dw-empty-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) 0;
  color: var(--text-dim);
  font-size: var(--type-ui);
}
.dw-empty-line .dash-ic {
  color: var(--text-faint);
}

/* ---- a card the dashboard's filters cannot narrow: greyed, one line says so ---- */
.dw.is-unfiltered:not(.dw-number) .dw-body,
.dw-number.is-unfiltered .dw-num-main,
.dw-number.is-unfiltered .dw-num svg {
  opacity: 0.45;
}
.dw-unfiltered {
  margin: 0;
  padding: 0 16px 12px;
  color: var(--text-dim);
  font-size: var(--type-caption);
}
/* Phones (npm run check:visual): a number tile's name may take two lines
   rather than end in "...", and the site's address sits on its own line above
   its two pills. */
@media (max-width: 720px) {
  .dw-number .dw-head {
    height: auto;
    min-height: 42px;
  }
  .dw-number .dw-title {
    /* The whole name: a clamp with visible overflow painted its third line over the number. */
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
    line-clamp: none;
    white-space: normal;
    line-height: 1.2;
  }
  .dash-sub > :first-child {
    flex-basis: 100%;
  }
}

/* ---- Add card: one sheet (openAddSheet, src/dashboard/suggest.ts) ----
   Suggested on top, then search, then templates. Each card is one row a
   finger tall: its mark, its name, one line of why, and a plus. On a phone
   the dialog is already a bottom sheet (ui.css). */
/* Wider than a plain dialog on a desk; a phone keeps ui.css's full-width sheet. */
@media (min-width: 721px) {
  .dash-add-sheet {
    width: min(560px, calc(100vw - 32px));
  }
}
.dash-add-sheet .dialog-body {
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}
.dash-add-sec {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.dash-add-h {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.dash-add-list {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.dash-add-list:empty {
  display: none;
}
.dash-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  min-height: var(--ctl-h-lg);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  text-align: left;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.dash-add-row:hover:not(:disabled) {
  background: var(--bg-hover);
}
.dash-add-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dash-add-row:disabled {
  cursor: default;
}
.dash-add-row:disabled .dash-add-title {
  color: var(--text-dim);
}
.dash-add-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}
.dash-add-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 1px;
}
/* Names and reasons wrap rather than end in "...": a cut name hides which card it is. */
.dash-add-title {
  font-size: var(--type-ui);
  font-weight: var(--weight-strong);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.dash-add-why {
  font-size: var(--type-small);
  line-height: var(--lh-snug);
  color: var(--text-dim);
}
.dash-add-plus {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--text-faint);
  border-radius: var(--r-pill);
  transition: color var(--dur-1) ease, background var(--dur-1) ease;
}
.dash-add-row:hover:not(:disabled) .dash-add-plus,
.dash-add-row:focus-visible .dash-add-plus {
  color: var(--accent);
  background: var(--accent-soft);
}
.dash-add-skel {
  height: 48px;
  border-radius: var(--r-md);
}
.dash-add-find {
  width: 100%;
}
.dash-add-note {
  margin: 0;
  padding: var(--space-2) 0;
  font-size: var(--type-small);
  color: var(--text-dim);
}
.dash-add-tpls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.dash-add-tpl {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  min-height: var(--ctl-h-lg);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.dash-add-tpl:hover {
  background: var(--bg-hover);
  border-color: var(--line-strong);
}
.dash-add-tpl:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dash-add-tpl b {
  font-size: var(--type-ui);
  font-weight: var(--weight-strong);
}
.dash-add-tpl span {
  font-size: var(--type-small);
  line-height: var(--lh-snug);
  color: var(--text-dim);
}
/* The title holds focus on a phone (see openAddSheet); it needs no ring. */
.dash-add-sheet .dialog-title:focus:not(:focus-visible) {
  outline: 2px solid transparent;
}
/* A card just added says where it landed, then lets go. */
.dw.is-new {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-card);
  transition: box-shadow var(--dur-4) var(--ease-out);
}
@media (max-width: 520px) {
  .dash-add-tpls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- card sentences, targets and unusual changes (src/dashboard/insight.ts, pace.ts) ---- */
/* The sentence is the tile's one line of small print: dimmer than the number,
   a little stronger than a plain note, since it says why. */
.dw-num-why {
  color: var(--text-dim);
}
.dw-number.dw-tall .dw-num-why {
  overflow: visible;
  white-space: normal;
  line-height: 1.35;
}
/* A one-row tile with a sentence: the text takes the whole width. */
.dw-num-text.is-wide {
  grid-column: 1 / -1;
}
.dw-num-text.is-wide .dw-num-why {
  overflow: visible;
  white-space: normal;
  line-height: 1.3;
}
/* A target spans the tile under the number: bar, where it stands, its pace. */
.dw-target {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  --target: var(--accent);
}
.dw-target.is-good {
  --target: var(--success);
}
.dw-target.is-warn {
  --target: var(--warning);
}
.dw-target.is-bad {
  --target: var(--danger);
}
.dw-target-bar {
  position: relative;
  display: block;
  height: 6px;
  margin-top: var(--space-1);
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dw-target-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--target);
}
/* Where the bar should be by today on pace. */
.dw-target-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
}
.dw-target-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--type-caption);
}
.dw-target-head {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--type-caption);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.dw-target-status {
  flex: none;
  font-weight: var(--weight-strong);
  color: var(--text-dim);
}
.dw-target.is-good .dw-target-status {
  color: var(--success-fg);
}
.dw-target.is-warn .dw-target-status {
  color: var(--warning-fg);
}
.dw-target.is-bad .dw-target-status {
  color: var(--danger-fg);
}
.dw-target-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--type-caption);
  color: var(--text-faint);
}
/* An unusual change: a dot and its words in the header, linked to its cause. */
.dw-unusual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin-right: 2px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--warning-bg);
  color: var(--warning-fg);
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-decoration: none;
}
a.dw-unusual:hover {
  text-decoration: underline;
}
a.dw-unusual:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dw-unusual:not(:has(.dw-unusual-text)) {
  padding: 0;
}
.dw-unusual-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warning);
}
@media (max-width: 720px) {
  /* Two tiles a row: the dot alone, its words in the label. */
  .dw-unusual {
    justify-content: center;
    padding: 0;
  }
  .dw-unusual-text {
    display: none;
  }
  .dw-num-why {
    overflow: visible;
    white-space: normal;
    line-height: 1.35;
  }
}
@media (forced-colors: active) {
  .dw-target-fill,
  .dw-target-mark,
  .dw-unusual-dot {
    background: CanvasText;
  }
}

/* Days before tracking began (src/tracking/start.ts): no data, not 0. A muted hatch, the line starts where data does. */
.dash-nodata-hatch {
  stroke: var(--line);
  stroke-width: 1.5;
}
.dash-nodata-text {
  fill: var(--text-faint);
  font-size: var(--type-caption);
}

/* ---- card states (src/dashboard/resolve.ts cardState) ----
   A card held by a state says one line and offers one action, centered in
   the card; on a one-row tile they sit left under the title. */
.dw-state {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-2) 0;
  text-align: center;
}
.dw-state-text {
  max-width: 34ch;
  margin: 0;
  font-size: var(--type-small);
  line-height: 1.4;
  color: var(--text-dim);
}
.dw-state .notice-action {
  margin: 0;
}
.dw-number .dw-body:has(> .dw-state) {
  padding: 0 14px 12px;
}
.dw-number:not(.dw-tall) .dw-state {
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 0;
  text-align: left;
}
/* One line on a one-row tile (the words are written to fit); the whole line is its title. */
.dw-number:not(.dw-tall) .dw-state-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A state that keeps the numbers: the card's one line of small print, its action a link. */
.dw-state-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.dw-state-line-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-state-line.is-sync-broken .dw-state-line-text {
  color: var(--warning-fg);
}
.dw-state-link {
  position: relative;
  z-index: 2;
  flex: none;
  color: var(--accent);
  font-weight: var(--weight-strong);
  text-decoration: none;
  pointer-events: auto;
}
.dw-state-link:hover {
  text-decoration: underline;
}
.dw-state-link:focus-visible {
  border-radius: var(--r-xs);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dash-pill-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.dash-pill-act {
  color: var(--accent);
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  text-decoration: none;
  white-space: nowrap;
}
.dash-pill-act:hover {
  text-decoration: underline;
}

/* ---- the drill-down: a number or a chart point opens what makes it up ---- */
/* The number is its own button above the tile's add-to-chart area, so the two never compete. */
.dw-num-drill {
  position: relative;
  z-index: 2;
  margin: -2px -4px;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  text-decoration: underline dotted transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color var(--dur-1) ease, text-decoration-color var(--dur-1) ease;
}
.dw-num-drill:hover {
  background: var(--bg-hover);
  text-decoration-color: var(--text-faint);
}
.dw-num-toggle:hover .dw-num-drill:hover {
  background: var(--bg-raised);
}
.dw-num-drill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}
.dash-tip-hint {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: var(--type-caption);
}

/* The sheet: on the right on a desk, from the bottom on a phone (ui.css .dialog). */
.dialog.dash-drill {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dialog.dash-drill:not([open]) {
  display: none;
}
/* Grows from its content, not from 0: Safari gave a 0% basis no height in a sheet of auto height,
   and the breakdown opened 100px tall with its rows hidden. min-height 0 still lets it scroll under max-height. */
.dash-drill .dialog-body {
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  overflow: auto;
}
.dash-drill-head {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.dash-drill-when {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--type-small);
}
.dash-drill-value {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: var(--weight-title);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.dash-drill-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--text-dim);
  font-size: var(--type-small);
}
.dash-drill-note .dash-ic {
  margin-top: 3px;
  color: var(--accent);
}
.dash-drill-tabs {
  margin: 0 -9px;
}
.dash-drill-tabs button {
  min-height: var(--ctl-h-sm);
}
.dash-drill-panel {
  min-height: 180px;
}
.dash-drill-panel:focus-visible {
  border-radius: var(--r-sm);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
/* Names get the room in the sheet; the bar only compares. */
.dash-drill .dw-hbar {
  grid-template-columns: minmax(0, 1fr) minmax(48px, 30%) auto;
}
.dash-drill-loading {
  display: grid;
  gap: 10px;
  padding-top: 6px;
}
.dash-drill-foot {
  justify-content: space-between;
  border-top: 1px solid var(--line);
}
.dash-drill-foot > :only-child {
  margin-left: auto;
}
@media (min-width: 721px) {
  .dialog.dash-drill {
    width: min(460px, calc(100vw - 32px));
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border-width: 0 0 0 1px;
    border-radius: var(--r-xl) 0 0 var(--r-xl);
  }
  .dialog.dash-drill[open] {
    animation-name: dash-drill-in;
  }
}
@media (max-width: 720px) {
  /* Phones size cards to their content: a state's line and a sync line wrap rather than cut. */
  .dw-number:not(.dw-tall) .dw-state-text,
  .dw-state-line-text {
    overflow: visible;
    white-space: normal;
  }
  .dw-state-line {
    flex-wrap: wrap;
  }
  .dw-state .btn {
    max-width: 100%;
    height: auto;
    min-height: var(--ctl-h-lg);
    white-space: normal;
  }
  .dialog.dash-drill {
    max-height: 86dvh;
  }
  .dash-drill-tabs button {
    min-height: var(--ctl-h-lg);
  }
}
@keyframes dash-drill-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

/* Which dashboard of how many: dots on a phone (swipe for the others) and on the TV. */
.dash-pages {
  display: none;
}

/* ---- phones: the most important numbers first, every target 44px ---- */
@media (max-width: 720px) {
  /* The fixed order (GRID.phone in app/analytics.js): numbers two a row, then charts, then tables and panels. */
  .dw {
    order: var(--op);
  }
  .dash-head .icon-button,
  .dw-menu-btn,
  .dash-btn,
  .dash-live-btn,
  .dash-tabs button,
  .dw-tab-more,
  .dw-sort {
    min-height: var(--ctl-h-lg);
  }
  /* A short heading such as ROAS left the sort button 28px wide. */
  .dw-sort {
    min-width: var(--ctl-h-lg);
  }
  .dash-head .icon-button,
  .dw-menu-btn {
    width: var(--ctl-h-lg);
  }
  .dash-addcard-start {
    min-width: var(--ctl-h-lg);
    justify-content: center;
  }
  .dw-tab-select {
    min-height: var(--ctl-h-lg);
  }
  /* The menu sits in the card's corner; its larger target reaches into the padding, not the title. */
  .dw-menu-btn {
    margin-right: calc(var(--space-2) * -1);
  }
  /* The number opens its breakdown: the target is 44px tall around it, the figure keeps its place. */
  .dw-num-drill {
    position: relative;
  }
  .dw-num-drill::after {
    content: '';
    position: absolute;
    /* 44px wide even round a one-digit "0": half the shortfall on each side, never under 6px. */
    inset: -8px min(-6px, calc(50% - 22px));
  }
  .dw-show-all {
    min-height: var(--ctl-h-lg);
    margin-top: var(--space-1);
    color: var(--text-dim);
    gap: var(--space-1);
  }
  .dash-pages {
    display: flex;
    gap: 6px;
    margin-left: calc(var(--space-2) * -1);
  }
  .dash.is-leaving-left .dash-body,
  .dash.is-leaving-right .dash-body {
    opacity: 0.4;
    transition: opacity var(--dur-2) var(--ease-out);
  }
}
.dash-pages i,
.tv-pages i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}
.dash-pages i.is-on,
.tv-pages i.is-on {
  background: var(--text-dim);
}
.dw-show-all .dash-ic {
  color: var(--text-faint);
}
/* Arrange on a phone: the groups the phone draws in, so a card moves among its own kind. */
.dash-arrange-group {
  padding: var(--space-3) 0 var(--space-1);
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-arrange-group + .dash-arrange-row {
  border-top: 0;
}

/* ---- the TV (/tv/:token): a glance from across the room ---- */
body.tv {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
.tv-main {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--space-10) var(--space-6);
}
/* Room for a figure, its change and the line under it at TV size. */
.dash.is-tv {
  --row-h: 140px;
}
.dash.is-tv .dw-grid,
.dash.is-tv .dash-head {
  pointer-events: none;
}
.tv-head {
  /* It stays on top while a tall board moves a screenful at a time. */
  position: sticky;
  top: 0;
  /* Over the cards, whose menu layer is 30. */
  z-index: 31;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2) var(--space-8);
  margin-bottom: var(--space-4);
  padding: var(--space-6) 0 var(--space-4);
  background: var(--bg);
}
.tv-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.tv-who,
.tv-when {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.tv-when {
  justify-items: end;
  text-align: right;
}
.tv-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--text-dim);
  font-size: var(--type-heading);
  font-weight: var(--weight-strong);
}
.tv-logo {
  display: block;
  max-width: 160px;
  max-height: 28px;
  object-fit: contain;
}
.tv-brand-name {
  color: var(--text);
}
.tv-brand-name + .tv-site::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 var(--space-3) 0 0;
  border-radius: 50%;
  background: var(--text-faint);
  vertical-align: middle;
}
.tv-title {
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-32);
  font-weight: var(--weight-title);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tv-period {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--weight-title);
}
.tv-meta {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  color: var(--text-dim);
  font-size: var(--type-small);
}
.tv-updated {
  font-variant-numeric: tabular-nums;
}
.tv-pages {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
  margin: 0;
}
/* Large type: titles and figures sized for the room (the page also scales to the screen, fitTv). */
.dash.is-tv .dw-title {
  font-size: var(--type-heading);
}
.dash.is-tv .dw-num-value {
  font-size: var(--fs-40);
}
.dash.is-tv .dash-delta {
  font-size: var(--type-body);
}
/* The change sits beside its figure on every tile, so the figures line up across the row. */
.dash.is-tv .dw-num-main {
  flex-wrap: nowrap;
}
/* A long figure ("1m 55s") keeps its room: the sparkline gives way, never the reverse. */
.dash.is-tv .dw-number:not(.dw-tall) .dw-num {
  grid-template-columns: max-content minmax(0, 84px);
  justify-content: space-between;
}
.dash.is-tv .dw-number:not(.dw-tall) .dw-spark {
  width: 100%;
}
/* Nothing to press on a TV: menus, tabs, hints and buttons stay off screen. */
.dash.is-tv .dw-menu-btn,
.dash.is-tv .dw-chip-row,
.dash.is-tv .dw-hint,
.dash.is-tv .dw-notes-pop,
.dash.is-tv .dw-tabs,
.dash.is-tv .info-tip,
.dash.is-tv .dw-link,
.dash.is-tv .dash-pill-act,
.dash.is-tv .dw-state .btn,
.dash.is-tv .dw-sort-dir {
  display: none;
}
.dash.is-tv .dw-grid.is-new {
  animation: tv-in var(--dur-4) var(--ease-out);
}
.dash.is-turning .dw-grid {
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
@keyframes tv-in {
  from {
    opacity: 0;
  }
}
.tv-main:has(.tv-gone) {
  padding-bottom: 0;
}
.tv-gone {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: center;
}
.tv-gone h1 {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: var(--weight-title);
  letter-spacing: -0.02em;
}
.tv-gone p {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-18);
}

/* Under a list read from sampled rows (src/dashboard/resolve.ts `estimated`). */
.dw-estimated {
  margin: 6px 0 0;
  font-size: var(--fs-12);
}

/* Editing on a phone: the goal picker drops its "Goal" word (the select still says it) and narrows,
   so Goal, Arrange and Done share one row instead of Done wrapping alone. */
@media (max-width: 720px) {
  .dash.is-editing .dash-goal-pick > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dash.is-editing .dash-goal-pick .field-input {
    max-width: 128px;
  }
}

/* "See all": every row of one list, with a search that stays on top while the rows scroll. */
.dash-all-head {
  position: sticky;
  top: calc(var(--space-4) * -1);
  z-index: 2;
  display: grid;
  gap: var(--space-2);
  margin: 0 calc(var(--space-6) * -1);
  padding: var(--space-2) var(--space-6);
  background: var(--bg-raised);
}
.dash-all-find {
  width: 100%;
}
.dash-all-count {
  margin: 0;
  font-size: var(--type-small);
}
.dash-all-rows {
  margin-top: var(--space-2);
}
.dash-all-rows .skeleton-row {
  display: block;
  height: 30px;
  margin-bottom: 6px;
}
/* The Filters menu's search results replace its lists in place. */
.dash-filter-list,
.dash-filter-groups {
  display: contents;
}
/* A sheet with no number on top (a list of pages has no one total) leaves no gap for it. */
.dash-drill-value:empty {
  display: none;
}
/* "See all" keeps its height while a search narrows the rows, so the sheet does not jump under the thumb. */
.dialog.dash-all {
  min-height: min(72dvh, 640px);
}
/* A goal with a value per conversion: what its conversions are worth, quiet beside its name. */
.dash-goal-worth {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: var(--type-small);
}
/* The Google search card (analytics.js searchBody): clicks by day under the tiles, then top searches beside top pages, stacked on a phone or a half-width card. */
.dw-gs-spark .dw-spark {
  width: 100%;
  height: 40px;
  margin: 0 0 var(--space-3);
}
.dw-gs-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}