/* The counter: two layouts in the Glass theme. Shared by the overlay window,
   the preview in the settings panel and the share cards.

   Detailed, depending on what is shown:

     number only        112 wpm
     with the graph     112 wpm  ~~~~~
     with a legend      112 wpm  raw 119
                                 burst 124
     with both          112 wpm  raw 119
                                 burst 124
                        ~~~~~~~~~~~~~~~~~   (the graph gets the full width)

   Compact, a capsule on one line:

                        ( 112  ⋯ 124  ~~~ )
                        ( wpm  ┄  84      )

   Accuracy is a percentage, so it is a legend value only: the graph has one
   scale, words per minute.

   Each number has its own kind of mark in the graph, so the marks stay
   apart whatever the colors are (the accent moves through most of the color
   wheel with heat, and can be any color you pick). The legend swatch copies
   the mark, which is how Compact can leave the words out:

     --series-wpm      thick line (the accent, so it follows heat)
     --series-raw      band above the wpm line
     --series-burst    dots
     --series-average  dashed line

   The accent is colored by heat: how your live speed compares to your 7-day
   average (see heatHue in counter.js). A color picked in the settings
   replaces it. */

@property --heat-hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 160;
}

.counter-frame {
  --digit-height: 1.1em;
  --series-wpm: var(--accent);
  --series-raw: #a78bfa;
  --series-burst: rgba(255, 255, 255, 0.85);
  --series-average: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  opacity: var(--counter-opacity, 1);
  transition:
    opacity 500ms ease,
    --heat-hue 900ms ease;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.counter-frame.is-idle {
  opacity: calc(var(--counter-opacity, 1) * 0.55);
}

.size-small { font-size: 18px; }
.size-medium { font-size: 24px; }
.size-large { font-size: 32px; }
.size-huge { font-size: 44px; }

.counter {
  white-space: nowrap;
}

/* The number and its unit */

/* The number and its unit, with an invisible copy of the widest reading
   ("888 wpm") in the same spot. The spot is as wide as the wider of the two,
   in whatever font the counter uses, so in Detailed the card keeps its width
   as the digits change. The visible number stays on the left. */
.counter-main {
  grid-area: main;
  display: grid;
}

.counter-main > .counter-reading {
  grid-area: 1 / 1;
}

.counter-reading {
  display: flex;
  align-items: flex-end;
  gap: 0.12em;
}

.counter-reading-widest {
  visibility: hidden;
}


.counter-number,
.counter-number-widest {
  display: flex;
  height: var(--digit-height);
  line-height: var(--digit-height);
  font-variant-numeric: tabular-nums;
}

.digit {
  display: inline-block;
  height: var(--digit-height);
  overflow: hidden;
}

.digit-strip {
  display: flex;
  flex-direction: column;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.digit-strip > span {
  display: block;
  height: var(--digit-height);
  text-align: center;
}

.counter-number.is-settling .digit-strip {
  transition: none;
}

.counter-unit {
  margin-bottom: 0.42em;
  font-size: 0.34em;
  font-weight: 700;
  color: var(--series-wpm);
  transition: color 600ms ease;
}

/* The graph's marks */

.counter-graph {
  display: none;
}

.counter-graph svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.graph-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

path.series-wpm {
  stroke: var(--series-wpm);
  stroke-width: max(2px, 0.09em);
}

path.series-raw {
  display: none;
  fill: var(--series-raw);
  fill-opacity: 0.7;
  stroke: none;
}

path.series-burst {
  display: none;
  fill: none;
  stroke: var(--series-burst);
  stroke-width: max(2.5px, 0.11em);
  stroke-linecap: round;
}

line.series-average {
  display: none;
  stroke: var(--series-average);
  stroke-width: max(1px, 0.045em);
  stroke-dasharray: 3 3;
}

.show-raw path.series-raw,
.show-burst path.series-burst,
.show-average line.series-average {
  display: inline;
}

.graph-area {
  fill: url(#graph-fill);
}

.graph-fill-top {
  stop-color: var(--series-wpm);
  stop-opacity: 0.22;
}

.graph-fill-bottom {
  stop-color: var(--series-wpm);
  stop-opacity: 0;
}

.graph-dot {
  position: absolute;
  right: -0.1em;
  width: 0.2em;
  height: 0.2em;
  margin-top: -0.1em;
  border-radius: 50%;
  background: var(--series-wpm);
  box-shadow: 0 0 0.25em var(--series-wpm);
}

.graph-dot[hidden] {
  display: none;
}

.is-idle .graph-dot {
  box-shadow: none;
}

/* The legend's parts */

.counter-legend {
  display: none;
  flex-direction: column;
}

.legend-item {
  display: none;
  align-items: center;
  gap: 0.4em;
}

/* The values are what you read, so they stay bright and the names step back */
.legend-name {
  opacity: 0.72;
}

.legend-item .legend-value {
  margin-left: auto;
  padding-left: 0.5em;
}

.show-raw .legend-item.series-raw,
.show-burst .legend-item.series-burst,
.show-average .legend-item.series-average,
.show-accuracy .legend-item.series-accuracy {
  display: inline-flex;
}

/* Every value gets a fixed slot, right-aligned, so the columns keep their
   width when a value goes from two digits to three. The digits are tabular,
   so 3ch holds any speed up to 999. Accuracy also holds a % sign, which is
   wider than a digit, so "100%" gets three digits and a full em. */
.legend-value {
  min-width: 3ch;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.legend-item.series-accuracy .legend-value {
  min-width: calc(3ch + 1em);
}

.legend-swatch {
  display: inline-block;
  width: 1em;
  height: 0.2em;
  border-radius: 0.1em;
}

.legend-item.series-raw .legend-swatch {
  height: 0.5em;
  border-radius: 0.12em;
  background: color-mix(in srgb, var(--series-raw) 60%, transparent);
}

.legend-item.series-burst .legend-swatch {
  height: 0.3em;
  background: radial-gradient(circle, var(--series-burst) 0.12em, transparent 0.14em) 0 50% / 0.34em 100% repeat-x;
}

.legend-item.series-average .legend-swatch {
  background: linear-gradient(
    90deg,
    var(--series-average) 0 35%,
    transparent 35% 60%,
    var(--series-average) 60% 100%
  );
}

/* Accuracy has no mark in the graph. Its swatch stays empty, only keeping
   the values lined up, and its % sign says what it is. */
.legend-item.series-accuracy .legend-swatch {
  background: none;
}

.legend-notice {
  display: none;
  opacity: 0.8;
}

.has-no-access .counter-legend .legend-item {
  display: none;
}

.has-no-access .legend-notice {
  display: inline;
}

/* Detailed layout */

.layout-detailed .counter {
  display: grid;
  grid-template-areas: "main";
  align-items: center;
  column-gap: 0.5em;
  row-gap: 0.08em;
}

.layout-detailed.show-graph .counter {
  grid-template-areas: "main graph";
}

.layout-detailed.show-legend .counter {
  grid-template-areas: "main legend";
}

.layout-detailed.show-graph.show-legend .counter {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "main legend"
    "graph graph";
  row-gap: 0.14em;
}

.layout-detailed .counter-graph {
  grid-area: graph;
  position: relative;
  width: 3.4em;
  height: 0.95em;
}

.layout-detailed.show-graph .counter-graph {
  display: block;
}

.layout-detailed.show-graph.show-legend .counter-graph {
  width: auto;
  height: 1.05em;
}

/* The legend is two columns, pinned to the right edge: raw and burst on top,
   avg and acc under them. Two rows are about as tall as the number, so the
   top row stays tight however many values you pick. */
.layout-detailed .counter-legend {
  grid-area: legend;
  grid-template-columns: repeat(2, auto);
  justify-self: end;
  column-gap: 0.9em;
  row-gap: 0.1em;
  font-size: max(11px, 0.38em);
  line-height: 1.25;
}

.layout-detailed.show-legend .counter-legend {
  display: grid;
}

/* Every name gets the width of the longest one, "burst", so the values line
   up down each column */
.layout-detailed .legend-name {
  min-width: 2.5em;
}

.layout-detailed .legend-item .legend-value {
  padding-left: 0;
}

/* Compact layout: a capsule on one line. The number, then the values you
   picked stacked right next to it, then a small graph at the end, where the
   newest reading is. The legend leaves its words out, since each swatch is
   the same mark as in the graph. */

.layout-compact .counter {
  display: flex;
  align-items: center;
  gap: 0.34em;
}

/* Compact stays as small as it can, so it grows with the number instead */
.layout-compact .counter-reading-widest {
  display: none;
}

/* The unit sits under the number, like the label on a gauge readout */
.layout-compact .counter-reading {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Pull the unit up under the digits. The digit columns keep their full
   height, or the next digit in a column peeks out in fonts with tall
   digits. */
.layout-compact .counter-number {
  margin-bottom: -0.1em;
}

.layout-compact .counter-unit {
  margin: 0.04em 0 0;
  font-size: 0.24em;
  line-height: 1;
  letter-spacing: 0.14em;
}

.layout-compact .counter-legend {
  order: 1;
  gap: 0.06em;
  font-size: max(10px, 0.3em);
  line-height: 1.2;
}

.layout-compact.show-legend .counter-legend {
  display: flex;
}

.layout-compact .legend-name {
  display: none;
}

.layout-compact .legend-item {
  gap: 0.3em;
}

.layout-compact .legend-swatch {
  width: 0.8em;
}

.layout-compact .counter-graph {
  order: 2;
  position: relative;
  width: 2.2em;
  height: 0.95em;
}

.layout-compact.show-graph .counter-graph {
  display: block;
}

.layout-compact path.series-wpm {
  stroke-width: max(1.75px, 0.075em);
}

.layout-compact path.series-burst {
  stroke-width: max(2px, 0.09em);
}

/* Glass: native glass behind the counter in the overlay window. The
   background here stands in for it in the settings preview and on share
   cards. Glass is the only theme so far; a new one gets a section like this
   one, keyed on its own theme class. */

.theme-glass {
  --accent: hsl(var(--heat-hue) 90% 64%);
}

.theme-glass .counter {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}

/* Set on the number and its unit together, so the invisible widest copy is
   drawn in the same weight as the real digits. The unit keeps its own
   weight. */
.theme-glass .counter-main {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* A capsule by default. Detailed with a legend grows into a card. */
.theme-glass .counter {
  padding: 0.18em 0.5em;
  border-radius: 1em;
}

.layout-detailed.show-legend.theme-glass .counter {
  padding: 0.22em 0.46em 0.28em;
  border-radius: 0.42em;
}

.layout-compact.theme-glass .counter {
  padding: 0.16em 0.46em 0.2em 0.55em;
}

.theme-glass .counter {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: rgba(60, 60, 70, 0.22);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  /* --effects-glow comes from effects.css while you are on a roll */
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.2),
    var(--effects-glow, 0 0 transparent);
}

@media (prefers-color-scheme: light) {
  .theme-glass {
    --accent: hsl(var(--heat-hue) 80% 40%);
    --series-raw: #6d28d9;
    --series-burst: rgba(29, 29, 31, 0.72);
    --series-average: rgba(29, 29, 31, 0.4);
  }

  .theme-glass .counter {
    color: #1d1d1f;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.4);
  }
}

.native-glass .theme-glass .counter {
  background: transparent;
  box-shadow: var(--effects-glow, none);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .counter-frame,
  .digit-strip,
  .counter-unit {
    transition: none;
  }
}