/* Pages: what they read (/sites/{id}/pages). Tokens from tokens.css; the KPI strip, panels,
   tabs, the period menu and breakdown rows from app.css. Every rule is scoped to the page,
   since the shell loads this sheet everywhere. Reading (scroll and time) wears the visitors'
   blue, violet in dark; buyers wear coral. Motion: scroll bars grow in row by row, an
   opened page unfolds in place into a card and its bars grow in after it; nothing moves
   for prefers-reduced-motion (app.css). */

[data-page="pages"] {
  --meter-track: #eaeef4;
  --meter-cut: var(--surface);
  --open-card: var(--surface-2);
}

:where(:root[data-theme="dark"]) [data-page="pages"] {
  --meter-track: #242424;
  --open-card: #191919;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) [data-page="pages"] {
    --meter-track: #242424;
    --open-card: #191919;
  }
}

[data-page="pages"] .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[data-pages-swap] {
  transition: opacity .2s ease;
}

[data-pages-swap][aria-busy="true"] {
  opacity: .6;
}

/* The meter: a track, the fill, and hairline cuts at the quarters. */

.read-page .meter {
  display: block;
  width: 100%;
  height: 8px;
  overflow: visible;
}

[data-page="pages"] .meter-track {
  fill: var(--meter-track);
}

.meter-fill {
  fill: var(--visitors);
  transform-box: fill-box;
  transform-origin: left center;
}

.meter-fill.tone-buyers {
  fill: var(--revenue);
}

.meter-cut {
  fill: var(--meter-cut);
}

/* KPIs: three, in the dashboard's strip. */

[data-page="pages"] .read-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

[data-page="pages"] .read-kpis .kpi-change {
  min-height: 0;
}

/* The table beside the entry and exit panel. */

.read-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.read-head,
.ends-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

.ends-head {
  align-items: center;
}

.read-base {
  color: var(--muted);
  font-size: 13.5px;
}

.read-base strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.read-hint {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
}

.read-cols,
.read-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px minmax(140px, 210px) 72px;
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 10px;
}

.read-cols {
  margin: 16px 0 4px;
  color: var(--faint);
  font-size: 12.5px;
}

.read-cols span:nth-child(2),
.read-cols span:nth-child(4) {
  text-align: right;
}

.read-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}

.read-item {
  border-radius: 10px;
  transition: background-color .3s ease;
}

.read-item[data-open] {
  --meter-cut: var(--open-card);
  background: var(--open-card);
  box-shadow: inset 0 0 0 1px var(--line);
}

.read-row {
  position: relative;
  height: 44px;
  border-radius: 8px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color .15s ease;
}

.read-item:not([data-open]) .read-row:hover {
  --meter-cut: var(--surface-2);
  background: var(--surface-2);
}

.read-row:focus-visible {
  outline-offset: -2px;
}

.read-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.read-chevron {
  flex: none;
  width: 8px;
  height: 12px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease-out), stroke .15s ease;
}

.read-row:hover .read-chevron,
.read-item[data-open] .read-chevron {
  stroke: var(--ink);
}

.read-item[data-open] .read-chevron {
  transform: rotate(90deg);
}

.read-item[data-loading] .read-chevron {
  stroke: var(--brand);
}

.read-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
}

.read-row:hover .read-path {
  text-decoration: underline;
  text-decoration-color: var(--faint);
}

.read-num {
  color: var(--ink);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.read-unit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.read-depth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
}

.depth-pct {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.depth-pct.none {
  color: var(--faint);
}

.read-empty {
  padding: 28px 10px 18px;
  color: var(--muted);
  font-size: 14px;
  max-width: 70ch;
}

.read-empty p + p {
  margin-top: 6px;
}

.read-empty-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.read-foot {
  margin-top: 14px;
  padding: 12px 10px 0;
  border-top: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 92ch;
}

.read-mode-note {
  margin-top: 14px;
}

/* A page unfolds in place: the detail's height runs from 0 to its content. */

.read-detail {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .45s var(--ease-out), visibility 0s linear .45s;
}

.read-item[data-open] .read-detail {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .45s var(--ease-out), visibility 0s linear 0s;
}

.read-detail-inner {
  min-height: 0;
  overflow: hidden;
}

.read-open {
  padding: 6px 16px 18px 27px;
}

.open-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 18px 30px;
}

.open-col {
  min-width: 0;
}

.open-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.open-stat {
  min-width: 0;
  padding: 12px 14px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.open-stat-value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.open-stat-label {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.open-base {
  margin-top: 8px;
  color: var(--faint);
  font-size: 12.5px;
}

.open-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 620;
}

.open-sub,
.open-note {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.open-note {
  margin-top: 10px;
}

.open-empty {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13.5px;
}

.ladder-wrap {
  margin-top: 18px;
}

.ladder {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 9px;
}

.ladder-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  min-height: 20px;
}

.ladder-mark {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

.ladder-row[data-end] .ladder-mark {
  color: var(--ink);
  font-weight: 600;
}

.ladder-pct {
  color: var(--ink);
  font-weight: 640;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Buyers before paying against everyone who didn't buy. */

/* Each side: its name and counts on one line, then its scroll bar, depth and reading time
   under the column heads. */
.versus-cols,
.versus-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 64px;
  align-items: center;
  column-gap: 14px;
}

.versus-cols {
  margin-top: 14px;
  padding-bottom: 6px;
  color: var(--faint);
  font-size: 12px;
}

.versus-cols span:nth-child(n + 2) {
  text-align: right;
}

.versus-rows {
  list-style: none;
  padding: 0;
  margin: 0;
}

.versus-row {
  grid-template-areas:
    "label label label"
    "meter depth time";
  row-gap: 8px;
  padding: 12px 0 13px;
  border-top: 1px solid var(--line);
}

.versus-label {
  grid-area: label;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.versus-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 560;
}

.swatch {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--visitors);
}

.versus-buyers .swatch {
  background: var(--revenue);
}

.versus-sub {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.versus-meter {
  grid-area: meter;
  padding-left: 17px;
}

.versus-depth {
  grid-area: depth;
}

.versus-time {
  grid-area: time;
}

.versus-num {
  color: var(--ink);
  font-weight: 650;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.versus-buyers .versus-num {
  color: var(--revenue-ink);
}

.versus .open-sub {
  margin-top: 10px;
}

/* Entry and exit */

/* Both lists share one cell, so the panel is as tall as the longer of the two (and no
   taller), and switching tabs never moves the page: the hidden list keeps its room but
   isn't shown, focused or read. */
.ends-wrap {
  display: grid;
}

.ends-wrap > .ends-list {
  grid-area: 1 / 1;
  min-width: 0;
}

.ends-wrap > .ends-list[hidden] {
  display: block !important;
  visibility: hidden;
}

.ends-caption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.ends-panel .rows-head {
  margin-top: 8px;
}

.ends-panel .row-name {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

/* Narrower screens */

@media (max-width: 1100px) {
  .read-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .open-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  [data-page="pages"] .read-kpis .kpi {
    border-top: 0;
    border-left: 1px solid var(--line-2);
  }

  [data-page="pages"] .read-kpis .kpi:first-child {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  [data-page="pages"] .read-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-page="pages"] .read-kpis .kpi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "sub value";
    align-items: center;
    column-gap: 12px;
    padding: 12px 16px;
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }

  [data-page="pages"] .read-kpis .kpi:first-child {
    border-top: 0;
  }

  [data-page="pages"] .read-kpis .kpi-label {
    grid-area: label;
  }

  [data-page="pages"] .read-kpis .kpi-value {
    grid-area: value;
    margin: 0;
    font-size: 30px;
    text-align: right;
  }

  [data-page="pages"] .read-kpis .kpi-change {
    grid-area: sub;
    font-size: 12.5px;
  }

  .read-panel,
  .ends-panel {
    padding: 16px 12px 12px;
  }

  .read-head,
  .ends-head {
    padding: 0 4px;
  }

  .read-hint {
    padding: 0 4px;
  }

  .read-cols {
    display: none;
  }

  .read-list {
    margin-top: 10px;
  }

  .read-row {
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name views"
      "depth time";
    row-gap: 7px;
    column-gap: 14px;
    padding: 10px 10px 11px;
  }

  .read-name {
    grid-area: name;
  }

  .read-views {
    grid-area: views;
  }

  .read-depth {
    grid-area: depth;
    padding-left: 17px;
  }

  .read-time {
    grid-area: time;
    min-width: 92px;
  }

  .read-unit {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 400;
  }

  .read-open {
    padding: 4px 12px 16px;
  }

  .open-stat-value {
    font-size: 24px;
  }

  .versus-cols,
  .versus-row {
    column-gap: 10px;
  }

  .read-foot {
    padding: 12px 4px 0;
  }
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  .read-row .meter-fill {
    animation: tally-grow .9s var(--ease-out) .15s both;
  }

  .read-item:nth-child(2) .read-row .meter-fill { animation-delay: .19s; }
  .read-item:nth-child(3) .read-row .meter-fill { animation-delay: .23s; }
  .read-item:nth-child(4) .read-row .meter-fill { animation-delay: .27s; }
  .read-item:nth-child(5) .read-row .meter-fill { animation-delay: .31s; }
  .read-item:nth-child(6) .read-row .meter-fill { animation-delay: .35s; }
  .read-item:nth-child(7) .read-row .meter-fill { animation-delay: .39s; }
  .read-item:nth-child(8) .read-row .meter-fill { animation-delay: .43s; }
  .read-item:nth-child(n + 9) .read-row .meter-fill { animation-delay: .47s; }

  /* Opened: the card's contents settle in as it unfolds, then its bars grow. */
  .read-item[data-open] .read-open {
    animation: pages-settle .5s var(--ease-out) .08s both;
  }

  .read-item[data-open] .ladder .meter-fill {
    animation: tally-grow .8s var(--ease-out) .22s both;
  }

  .read-item[data-open] .ladder-row:nth-child(2) .meter-fill { animation-delay: .28s; }
  .read-item[data-open] .ladder-row:nth-child(3) .meter-fill { animation-delay: .34s; }
  .read-item[data-open] .ladder-row:nth-child(4) .meter-fill { animation-delay: .4s; }

  .read-item[data-open] .versus .meter-fill {
    animation: tally-grow .8s var(--ease-out) .36s both;
  }

  .read-item[data-open] .versus-row:nth-child(2) .meter-fill {
    animation-delay: .44s;
  }

  /* The other tab's rows grow in as it shows. */
  .ends-list[data-shown] .bar-visitors {
    animation: tally-grow .7s var(--ease-out) both;
  }
}

@keyframes pages-settle {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
}