/* SCF Sale Calendar, the Market view.

   The room: a powder blue wash, no boxes, four full bleed registers threaded on one vertical hairline.
   The hairline is the spine. Every channel hangs its mark on it, the three that only make claims start to
   the right of it, and the one measured channel breaks out to the left of it with the revenue numeral.
   Take the spine away and the ranking has nothing to hold it, so the spine is structure.

   Every colour here is a token from `tokens.css`, or a `color-mix` of one, or the two fixed channel data
   colours the calendar already declares as `--ch-meta` and `--ch-google` with the contract values behind
   them as a fallback. Nothing is defined only inside a media query, so both themes and the toggle work.
   Only `transform` and `opacity` ever animate, and the only animation on this surface is the house button
   press, because the readiness rule on the month grid owns the one considered motion moment in this app. */

.market-root {
  background: var(--accent-soft);
  display: flex;
  flex-direction: column;
}

.mk {
  /* the measure. `--mk-edge` is the page margin, `--mk-axis` is where the spine stands, `--mk-in` is where
     every band's content begins. The revenue numeral is the only thing that starts at `--mk-edge`. */
  --mk-edge: 32px;
  --mk-axis: 52px;
  --mk-in: 124px;

  /* The type ladder, and the whole of it hangs off one value. `--an-lead` sizes the headline, which is the
     sentence this page exists to deliver; the revenue numeral is derived from it at eighty per cent and
     every supporting figure from the numeral. Deriving rather than declaring is what makes the rule hold
     at every width: the headline cannot be overtaken by a figure at some awkward viewport, because every
     figure on the page is a fraction of it. The headline carries roughly a hundred characters where the
     numeral carries eight, so on ink it wins by a factor closer to twenty than to four. */
  --an-lead: clamp(28px, 4.2vw, 54px);
  --mk-lead: max(30px, calc(var(--an-lead) * .8));
  --mk-fig: max(17px, calc(var(--mk-lead) / 1.9));
  --mk-fig2: max(15px, calc(var(--mk-lead) / 2.5));

  --mk-rule: color-mix(in srgb, var(--accent-strong) 20%, transparent);
  --mk-spine: color-mix(in srgb, var(--accent-strong) 34%, transparent);
  --mk-wash: color-mix(in srgb, var(--accent-strong) 6%, transparent);

  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: var(--f-ui);
  color: var(--ink);
}

/* 1. Head. Four type roles: the eyebrow in the display face, the window as a figure, the lede in the
      interface face, the snapshot state quieter again. The head sits on the same measure as the bands. */
.mk-head {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 22px var(--mk-edge) 20px var(--mk-in);
  border-bottom: 1px solid var(--mk-rule);
}
.mk-head-id { flex: 1 1 380px; min-width: 0; max-width: 64ch; }
.mk-eyebrow {
  margin: 0;
  font: 800 11px/1.2 var(--f-display);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.mk-window {
  margin: 6px 0 0;
  font: 700 26px/1.1 var(--f-display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.mk-lede {
  margin: 8px 0 0;
  font: 500 13.5px/1.45 var(--f-ui);
  letter-spacing: 0;
  color: var(--ink-2);
  max-width: 58ch;
}
.mk-note {
  margin: 6px 0 0;
  font: 400 12.5px/1.5 var(--f-ui);
  color: var(--muted);
}
.mk-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-seg { background: var(--mk-wash); border-color: var(--mk-rule); }
.mk-seg > button { color: var(--ink-2); }
.mk-seg > button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .mk-seg > button:not([aria-pressed="true"]):hover { color: var(--ink); }
  .mk-snap:hover, .mk-run:hover { background: var(--mk-wash); }
}
.mk-snap, .mk-run { border-color: var(--mk-rule); color: var(--ink); }

/* 2. The scroller. The head stays put and the registers scroll under it, the same shape the month grid uses. */
.mk-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ghost) transparent;
}
.mk-bands { position: relative; padding-bottom: 56px; }

/* ===========================================================================
   2b. The reading. The only block on this page that is not a channel, and the reason the page exists.

   It sits above the spine because the spine ranks channels and this ranks nothing: it is one sentence
   about what happened, and under it the working that produced the sentence. The eyebrow and the headline
   hang out to the page margin, so the reading starts left of everything beneath it and the eye has no
   choice about where to begin. Everything after the headline returns to the same measure the bands use,
   which is what keeps the outdent reading as a hanging headline rather than as a block that slipped.

   Every colour below is a token or a `color-mix` of one, so both themes and the theme toggle work with no
   colour defined only inside a media query. Nothing here animates.
   =========================================================================== */
.an {
  position: relative;
  padding: 30px var(--mk-edge) 32px var(--mk-in);
  border-bottom: 1px solid var(--mk-rule);
}
.an-eyebrow {
  margin: 0 0 0 calc(var(--mk-edge) - var(--mk-in));
  font: 800 11px/1.2 var(--f-display);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* The largest text on the page, and the only thing here allowed to reach the page margin. Its size is the
   value every figure on this surface is derived from, so nothing can grow past it. */
.an-headline {
  margin: 12px 0 0 calc(var(--mk-edge) - var(--mk-in));
  font: 800 var(--an-lead)/1.03 var(--f-display);
  letter-spacing: -.035em;
  color: var(--ink);
  max-width: 28ch;
  text-wrap: balance;
}

/* The headline's own working, outdented with it. It is set wider and slightly larger than a finding's
   working, because this is the sum behind the one sentence the page is built around, and it is the proof
   the organising idea promises: the biggest claim here is also the first one to show its arithmetic. */
.an-lead-work {
  margin: 18px 0 0 calc(var(--mk-edge) - var(--mk-in));
  max-width: 76ch;
}
.an-lead-work .an-sum { margin-top: 0; font-size: 13px; padding: 11px 14px; }
.an-lead-work .an-caveat { max-width: 62ch; }

/* A finding the analyst does not trust says so here, in words, with its reason. Never a colour, never a
   badge and never a traffic light: a reader who has to learn what amber means has not been told anything.
   It takes the neutral rule every hairline on this surface uses, for the same reason. */
.an-hedge {
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--rule-2);
  font: 500 14.5px/1.5 var(--f-ui);
  letter-spacing: 0;
  color: var(--ink-2);
  max-width: 56ch;
}
.an-basis {
  margin: 12px 0 0;
  font: 400 12.5px/1.5 var(--f-ui);
  color: var(--muted);
  max-width: 62ch;
}

/* Findings on the left, what to do on the right. Two columns rather than one long list, because the
   actions are what a person leaves the page with and a list they have to scroll past six findings to
   reach is a list nobody reads. */
.an-cols {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 48px;
  align-items: start;
}
@media (min-width: 1100px) {
  .an-cols { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
}

/* A finding. Numbered, because a reading of six things is an ordered argument and not a pile. The counter
   is a real figure in the display face, tabular, so it lines up down the edge. */
.an-findings {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: anfind;
}
.an-find {
  counter-increment: anfind;
  position: relative;
  padding: 0 0 22px 34px;
  max-width: 64ch;
}
.an-find + .an-find { padding-top: 22px; border-top: 1px solid var(--mk-rule); }
.an-find::before {
  content: counter(anfind);
  position: absolute;
  left: 0;
  top: 1px;
  font: 700 13px/1.2 var(--f-display);
  font-variant-numeric: tabular-nums;
  color: var(--ghost);
}
.an-find + .an-find::before { top: 23px; }
.an-find-tag {
  margin: 0;
  font: 700 10px/1.2 var(--f-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.an-what {
  margin: 5px 0 0;
  font: 700 17px/1.28 var(--f-display);
  letter-spacing: -.012em;
  color: var(--ink);
}
.an-why {
  margin: 6px 0 0;
  font: 400 13.5px/1.5 var(--f-ui);
  letter-spacing: 0;
  color: var(--ink-2);
}

/* The working. This is the organising idea made visible: the subtraction, the division or the standard
   deviation that produced the sentence above it, printed so a reader can check it rather than trust it.
   Take this line away and every finding on the page becomes an assertion. */
.an-sum {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--mk-wash);
  font: 500 12.5px/1.6 var(--f-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: .005em;
  color: var(--accent-strong);
}

/* Provenance on a figure the platform counted about its own work. The mark says who counted it and the
   caveat under it says what that is worth. Both are drawn text and neither is ever a hover or a title. */
.an-claim {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 9.5px/1.2 var(--f-display);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.an-claim::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  background: var(--warn);
}
.an-caveat {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--warn);
  font: 400 12px/1.45 var(--f-ui);
  color: var(--ink-2);
  max-width: 46ch;
}
.an-conf {
  margin: 10px 0 0;
  font: 400 12px/1.45 var(--f-ui);
  color: var(--muted);
}

/* What to do. Each row carries the figure that triggered it as its own marker, so the eye can see that
   every line came off a number, and the words name the same figure again for anyone reading rather than
   scanning. */
.an-do { min-width: 0; }
.an-do-eyebrow {
  margin: 0;
  font: 800 10.5px/1.2 var(--f-display);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.an-do-list { list-style: none; margin: 14px 0 0; padding: 0; }
.an-do-row { display: flex; align-items: baseline; gap: 10px; }
.an-do-row + .an-do-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mk-rule); }
.an-do-fig {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 11.5px/1.5 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}
.an-do-text {
  min-width: 0;
  font: 500 13.5px/1.5 var(--f-ui);
  letter-spacing: 0;
  color: var(--ink);
}
.an-writer {
  margin: 24px 0 0;
  font: 400 12px/1.5 var(--f-ui);
  color: var(--muted);
  max-width: 72ch;
}

/* No reading arrived. One plain sentence saying why, never an empty frame and never a figure. */
.an-quiet { padding-bottom: 24px; }
.an-quiet-line {
  margin: 10px 0 0 calc(var(--mk-edge) - var(--mk-in));
  font: 500 15px/1.45 var(--f-ui);
  color: var(--ink-2);
  max-width: 60ch;
}

/* Loading. Blocks in the wash of this room, nothing moving, sized to what is coming. */
.an-skel-eyebrow { display: block; height: 10px; width: 96px; margin-left: calc(var(--mk-edge) - var(--mk-in)); }
.an-skel-head {
  display: block;
  height: calc(var(--an-lead) * .74);
  width: min(720px, 82%);
  margin: 14px 0 0 calc(var(--mk-edge) - var(--mk-in));
}
.an-skel-head2 { width: min(520px, 58%); margin-top: 10px; }
.an-skel-line { display: block; height: 12px; width: min(420px, 52%); margin-top: 18px; }

/* 3. A register. No box, no shadow: a band is marked by the rule above it, its mark on the spine and where
      its content begins. The spine is drawn one segment per band so the segments join into one thread and
      the first and last stop exactly on their own mark. */
.mk-band {
  position: relative;
  padding: 26px var(--mk-edge) 30px var(--mk-in);
  overflow-wrap: break-word;
}
.mk-band + .mk-band { border-top: 1px solid var(--mk-rule); }
.mk-band::before {
  content: "";
  position: absolute;
  left: var(--mk-axis);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--mk-spine);
}
.mk-band:first-of-type::before { top: 40px; }
.mk-band:last-of-type::before { bottom: calc(100% - 40px); }

/* The mark, the same geometry as a channel bubble on the month grid: 20px round, a 12px icon, a 1.5px ring.
   The measured channel is the only filled mark and the only one at 30px, so the spine reads as one solid
   anchor with three claims hanging under it. */
.mk-mark {
  position: absolute;
  left: var(--mk-axis);
  top: 40px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--mkc, var(--rule-2));
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--mkc, var(--muted));
}
.mk-mark .ic { width: 12px; height: 12px; }
.mk-mark.is-truth {
  width: 30px;
  height: 30px;
  border: 0;
  background: var(--mkc, var(--accent-strong));
  color: var(--linen);
}
.mk-mark.is-truth .ic { width: 17px; height: 17px; }

/* 4. Band head. Role, name, sentence: three roles, each differing from the one above in font, size, weight,
      tracking or colour, and the band note under the figures makes a fourth. */
.mk-band-head { margin-bottom: 18px; }
.mk-role {
  margin: 0;
  font: 700 10.5px/1.2 var(--f-display);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.mk-band.is-claim .mk-role { color: var(--muted); }
.mk-name {
  margin: 5px 0 0;
  font: 700 21px/1.15 var(--f-display);
  letter-spacing: -.015em;
  color: var(--ink);
}
.mk-says {
  margin: 4px 0 0;
  font: 500 13.5px/1.4 var(--f-ui);
  letter-spacing: 0;
  color: var(--ink-2);
}
.mk-band-note {
  margin: 16px 0 0;
  font: 400 12.5px/1.5 var(--f-ui);
  color: var(--muted);
  max-width: 62ch;
}

/* 5. Figures. Reading order is label then value, which is the right order to hear; the order property puts
      the value first, which is the right order to scan. */
.mk-figures {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 40px;
}
.mk-figures dt, .mk-figures dd { margin: 0; }
.mk-figure { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* A figure the platform is reporting about itself. Meta claims a return on ad spend on this account
   between four and ten times what the store records, so the caveat under it is not optional and the
   figure itself is marked, in a colour that is not the one the measured figures use. */
.mk-figure.is-claimed .mk-value { color: var(--warn); }
.mk-figure.is-claimed .mk-label::after {
  content: "claimed";
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--warn-soft);
  color: var(--warn);
  font: 700 9px/1.7 var(--f-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.mk-value { order: 1; font: 700 var(--mk-fig2)/1.05 var(--f-display); letter-spacing: -.02em; color: var(--ink-2); white-space: nowrap; }
.mk-label { order: 2; font: 700 10.5px/1.2 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
/* The mark on a figure the platform counted itself. It is drawn text and it is always there: the tag names
   who did the counting, the caveat under it says what that is worth. Neither is ever a hover or a title. */
.mk-claim {
  order: 3;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 9.5px/1.2 var(--f-display);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mk-claim::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  background: var(--mkc, var(--rule-2));
}
.mk-move { order: 4; font: 500 13px/1.35 var(--f-ui); letter-spacing: 0; color: var(--ink-2); }
.mk-hint { order: 5; font: 400 12px/1.4 var(--f-ui); color: var(--muted); }
.mk-caveat {
  order: 6;
  font: 400 12px/1.45 var(--f-ui);
  color: var(--ink-2);
  border-left: 2px solid var(--mkc, var(--rule-2));
  padding-left: 10px;
  max-width: 34ch;
}
.mk-figure.is-first .mk-value { font-size: var(--mk-fig); color: var(--ink); }
.mk-figure.is-first .mk-label { color: var(--accent-strong); }

/* The one thing on the page allowed to break the spine. It takes its own line so nothing has to wrap around
   it, and the numeral alone hangs out to the page margin: its label and its movement line stay on the measure
   with every other band, so the outdent reads as a hanging figure rather than as a block that slipped. It
   steps down a size when the figure is long enough to run past the measure. */
.mk-figures-lead { display: block; margin: 0 0 20px; }
.mk-figure.is-lead .mk-value { margin-left: calc(var(--mk-edge) - var(--mk-in)); }
.mk-figure.is-lead .mk-value {
  font: 800 var(--mk-lead)/0.86 var(--f-display);
  letter-spacing: -.045em;
  color: var(--ink);
}
.mk-figure.is-lead.is-long .mk-value { font-size: calc(var(--mk-lead) * .82); }
.mk-figure.is-lead.is-longer .mk-value { font-size: calc(var(--mk-lead) * .68); }
.mk-figure.is-lead { gap: 8px; }
.mk-figure.is-lead .mk-label { font-size: 11.5px; letter-spacing: .24em; color: var(--accent-strong); }
.mk-figure.is-lead .mk-move { font-size: 14px; color: var(--ink); }

/* The caveat sits beside the figure where there is room for it and under the figure where there is not. No
   figure a platform counted itself is ever drawn without it, so a band holding two such figures prints the
   sentence twice on purpose. Each claimed figure takes a full row of the band, which is what stops the
   repeat from reading as noise: the two caveats stack on the same edge into one caution rail in the channel
   colour, instead of competing for width with a figure that was measured. */
@media (min-width: 900px) {
  .mk-figures > .mk-figure.has-caveat { flex: 1 0 100%; }
  .mk-figure.has-caveat {
    display: grid;
    grid-template-columns: auto minmax(0, 30ch);
    grid-auto-rows: min-content;
    column-gap: 20px;
    align-items: start;
  }
  .mk-figure.has-caveat > .mk-value { grid-column: 1; grid-row: 1; }
  .mk-figure.has-caveat > .mk-label { grid-column: 1; grid-row: 2; }
  .mk-figure.has-caveat > .mk-claim { grid-column: 1; grid-row: 3; }
  .mk-figure.has-caveat > .mk-move { grid-column: 1; grid-row: 4; }
  .mk-figure.has-caveat > .mk-hint { grid-column: 1; grid-row: 5; }
  .mk-figure.has-caveat > .mk-caveat { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
}
.mk-caveat-band { margin: 16px 0 0; }

/* 6. A channel with no credentials. The only box on the page, on purpose: the channel that cannot report a
      figure is a different kind of object, so it reads as a form to fill in rather than a figure to trust.
      It never shows a number, a placeholder or a chart. */
.mk-setup {
  border: 1px solid var(--mk-rule);
  border-radius: var(--r-md);
  background: var(--mk-wash);
  padding: 16px 18px;
  max-width: 62ch;
}
.mk-setup-note { margin: 0; font: 400 14px/1.5 var(--f-ui); color: var(--ink-2); }
.mk-envs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mk-env { display: inline-flex; align-items: baseline; gap: 8px; }
.mk-env-name {
  font: 500 12.5px/1.4 var(--f-ui);
  letter-spacing: .02em;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-strong) 12%, transparent);
  border-radius: var(--r-sm);
  padding: 3px 8px;
}
.mk-env-state { font: 700 10px/1.2 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mk-setup-how { margin: 12px 0 0; font: 400 12.5px/1.5 var(--f-ui); color: var(--muted); }
.mk-setup .btn { margin-top: 12px; }

/* 7. Nothing to draw. A plain line, never a greyed out figure. */
.mk-blank { margin: 0; font: 400 13.5px/1.5 var(--f-ui); color: var(--muted); max-width: 62ch; }
.mk-blank-top { padding: 20px var(--mk-edge) 0 var(--mk-in); }
.mk-fatal { padding: 40px var(--mk-edge) 40px var(--mk-in); max-width: 62ch; }
.mk-fatal-line { margin: 8px 0 16px; font: 500 15px/1.45 var(--f-ui); color: var(--ink); }

/* 8. Loading: blocks in the wash of this room rather than the linen of the calendar, and nothing moves. */
.mk .skel { background: color-mix(in srgb, var(--accent-strong) 12%, transparent); }
.mk-skel-role { height: 10px; width: 88px; }
.mk-skel-name { height: 20px; width: 148px; margin-top: 9px; }
.mk-skel-lead { height: clamp(48px, 7vw, 104px); width: min(460px, 68%); margin-left: calc(var(--mk-edge) - var(--mk-in)); }
.mk-skel-fig { height: 30px; width: 172px; }

/* 9. Narrower than the desktop layout: the page itself scrolls, so the scroller gives its height back and
      the measure tightens. The numeral still starts at the page margin and still crosses the spine. */
@media (max-width: 1023.98px) {
  .mk { height: auto; min-height: 0; }
  .mk-scroll { overflow: visible; flex: none; }
  .mk-head { position: sticky; top: var(--stick-h, 155px); z-index: 6; background: var(--accent-soft); }
}

@media (max-width: 720px) {
  .mk {
    --mk-edge: 16px;
    --mk-axis: 30px;
    --mk-in: 60px;
    /* The same derivation as the desktop ladder, at a phone's measure. The headline stays the largest text
       here too, and it stays a whole sentence against an eight character numeral, so it stays dominant. */
    --an-lead: clamp(25px, 6.6vw, 38px);
    --mk-lead: max(24px, calc(var(--an-lead) * .78));
  }
  .an { padding: 22px var(--mk-edge) 24px var(--mk-in); }
  .an-headline { max-width: none; letter-spacing: -.03em; }
  .an-cols { margin-top: 20px; gap: 22px; }
  .an-find { padding-left: 26px; }
  .an-hedge { font-size: 13.5px; }
  .mk-head { padding: 16px var(--mk-edge) 16px var(--mk-in); gap: 14px 16px; }
  .mk-window { font-size: 22px; }
  .mk-controls { width: 100%; }
  .mk-seg { flex: 1; }
  .mk-seg > button { flex: 1; justify-content: center; }
  .mk-band { padding: 22px var(--mk-edge) 26px var(--mk-in); }
  .mk-figures { gap: 16px 28px; }
  .mk-figures-lead { margin-bottom: 16px; }
  .mk-mark.is-truth { width: 26px; height: 26px; }
  .mk-mark.is-truth .ic { width: 15px; height: 15px; }
  .mk-figure.is-lead .mk-move { font-size: 13px; }
}

/* 10. Reduced motion: the only travel on this surface is the house button press, so it goes. */
@media (prefers-reduced-motion: reduce) {
  .mk-snap:active, .mk-run:active, .mk-seg > button:active, .mk-setup .btn:active { transform: none; }
  .mk .is-loading { animation: none; opacity: .7; }
}