/* SCF Sale Calendar, the money calendar (docs/wave9-money-calendar.md sections 6, 7 and 8).

   The month is a bar chart drawn on a calendar. Every day cell stands a column out of its own floor rule at
   that day's total sales over the biggest day in the same month, so seven weekday columns and five week rows
   are read against each other by height alone, with no colour scale and no legend anywhere on the surface.
   The ground never changes: a quiet Tuesday and the best Saturday of the month sit on exactly the same paper
   and only the column is different, which is what separates this from every product that tints a cell by
   value. Delete the columns and the grid is a rack of labelled figures again, which is the fault this wave
   removes, so the column is structure and not a coat of paint.

   The element that carries the surface is the column, and what carries the column is the one custom property
   `--h` that money.js sets on every cell: the column's height, the figure's position and the weekday shape
   under the grid are all drawn from it. Take `--h` away and every column flattens to a two pixel stub, every
   figure drops to the floor and the ranking is gone. The month figure over the grid is the anchor of the
   composition and the largest single thing on the page, but it is a label on the whole and not the reading
   itself.

   Ground. Plain paper, the calendar surfaces' own, not the powder blue wash the rest of Market reads on. The
   surface device is measured columns on a floor rule, where the sale calendar has hairline ruled plates and
   the Daybook a ruled table.

   Every colour here is a token from tokens.css or a colour mix of one. Nothing is defined only inside a media
   query, so both themes and the theme toggle work. Nothing on this surface moves: the columns are a state and
   not a motion, and a cell that slid or scaled under a press would be a height changing for a reason that is
   not money. */

/* 0. Where the calendar stands inside Market. The other two views reach the same rules: the room drops its
      powder blue wash for plain paper, because a ranking read by height needs one unchanging ground, and the
      shared head gives up both the indent that holds the reading's spine and the plate it floats on, because
      the grid under it sets the measure for the whole surface.
      The plate goes because of where its edges land. It carries an 18px margin, a 12px radius, a card shadow
      and a 6px accent cap, so in money mode a rounded shadowed card stood over a hard square hairline grid,
      its own content began at 56px while the grid began at 28px and the plate itself at 32px: three left
      edges in the top 200px of a surface whose whole claim is measurement. Now the Market head, this head
      and the grid all open on `--mk-edge` and there is one spine down the page.
      All of it is written here rather than in market.css, so the whole of this wave's paint is in one file
      and deleting it reverts the surface. */
.market-root.is-money { background: var(--paper); }
.mk.is-money .mk-head {
  margin: 0;
  padding: 22px var(--mk-edge) 18px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  background: var(--paper);
}
.mk.is-money .mk-head::before { display: none; }
/* Today has nowhere to go on the month already shown, so it says so and stays in the tab order. A `disabled`
   button cannot take focus, so pressing it took the keyboard out of the head and back to the top of the
   document; `aria-disabled` says the same thing to a screen reader and leaves the reader where they were.
   The press itself is already a no operation, because the stepper ignores a move to the month it is on. */
.mk-nav > button[aria-disabled="true"],
.mk-nav > button[aria-disabled="true"]:hover { color: var(--ghost); cursor: default; }
/* The house press travel is a promise that something happened, so the one control that answers nothing does
   not make it. */
.mk-nav > button[aria-disabled="true"]:active { transform: none; }

.mo-host { background: var(--paper); }

.mo {
  /* The type ladder of a cell hangs off one value and the other is derived from it, so the carrying figure
     cannot be overtaken by the day numeral at some awkward viewport: the ratio is written into the value
     rather than checked after the fact. The figure is never under 1.95 times the numeral at any width. */
  --mo-num: 11px;
  --mo-fig: max(calc(var(--mo-num) * 1.95), min(1.55vw, 26px));
  /* The room the figure needs above its own column head, so the best day of the month reaches full height
     with its figure still inside the cell rather than clipped off the top of it. */
  --mo-figspace: calc(var(--mo-fig) * 1.05 + 5px);
  /* The room the figure needs beside the column once the grid lies down as a list under 720. */
  --mo-figroom: 92px;
  /* The cell is tall because the column has to win the cell: every pixel the numeral, the marks and the
     figure do not take is column. It is sized against the screen it is on rather than fixed, because five
     rows of 170px is 880px of grid and a laptop showing 900px has two heads standing on it first, so the
     month arrived needing two scrolls to read. At a 900px screen this resolves to about 144px, where the
     best day of the month still stands about sixty five pixels against an eleven pixel numeral, and on a
     tall monitor it opens back out to the full 170. The floor holds the column readable on a short screen.
     A month is five rows of it and the grid scrolls, the same as the sale calendar. */
  --mo-cell: clamp(132px, 16vh, 170px);

  /* The three tints of one column, online at the floor, the register above it, the draft orders and the
     mobile app at its head. One hue, three weights, so the register's share of a day is read inside the
     column's own width and never needs a second chart. Mixed toward the paper, so the pair flips with the
     theme the way every other token here does. */
  --mo-online: color-mix(in srgb, var(--accent-strong) 80%, var(--paper));
  --mo-pos: color-mix(in srgb, var(--accent-strong) 46%, var(--paper));
  --mo-drafts: color-mix(in srgb, var(--accent-strong) 20%, var(--paper));
  --mo-floor: var(--rule-2);

  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--paper);
  font-family: var(--f-ui);
  color: var(--ink);
}

/* 1. The head. Four type roles across the two bands, each differing from the one above it in two or more of
      face, size, weight, tracking and colour: the Market eyebrow and the month name one band up, then the
      month figure that anchors the page, its label, and the lede. It carries no eyebrow of its own. It used
      to, and it was byte for byte the Market eyebrow forty pixels above it, the same face at the same size,
      weight, tracking and colour, which is two elements doing one job.
      On a desktop the scroller is inside this view, so the head stays put and the grid scrolls under it.
      Under 1024 the page itself scrolls and the Market head above is the one that sticks, so this one goes
      with the grid rather than standing a second band under it. */
.mo-head {
  position: sticky;
  top: 0;
  z-index: 4;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 22px var(--mk-edge) 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
}
@media (max-width: 1023.98px) {
  .mo-head { position: static; }
}
.mo-id { flex: 1 1 520px; min-width: 0; }
.mo-total {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.mo-total-f {
  font: 800 clamp(34px, 4vw, 52px)/1 var(--f-display);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mo-total-l {
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.mo-lede {
  margin: 10px 0 0;
  max-width: 58ch;
  font: 500 13.5px/1.5 var(--f-ui);
  color: var(--ink-2);
}
/* The state line, and it is a fifth role rather than the lede a pixel smaller: it is tracked, lighter in
   colour and in the interface face at a size nothing else on the surface uses, so it reads as the surface
   talking about itself and not as a second paragraph of the lede. */
.mo-note {
  margin: 9px 0 0;
  font: 500 11.5px/1.5 var(--f-ui);
  letter-spacing: .06em;
  color: var(--muted);
}
.mo-note.is-bad { color: var(--bad); }
/* The one control on this head, and it only exists on a month that did not load. A quiet text button in the
   accent, the same shape Analytics uses for its own retry. */
.mo-again {
  margin: 0 0 0 4px;
  padding: 2px 6px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: none;
  font: 700 11.5px/1.4 var(--f-ui);
  letter-spacing: .06em;
  color: var(--accent-strong);
  cursor: pointer;
}
.mo-again[aria-disabled="true"] { color: var(--muted); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .mo-again:not([aria-disabled="true"]):hover { border-color: var(--accent-strong); }
}

/* 2. The body, on the same measure as both heads. */
.mo-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--mk-edge) 44px;
}

/* 3. The grid. Seven columns Monday to Sunday, one month at a time, because a month is the unit of this
      reading and a column measured against another month's best day would compare nothing. */
.mo-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 20px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.mo-dow {
  padding: 10px 9px 8px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-2);
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}

.mo-day {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--mo-cell);
  margin: 0;
  padding: 8px 9px 9px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mo-day.is-blank { cursor: default; }
.mo-day:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
  z-index: 2;
}
/* The selected cell is ruled, never filled. A fill would be a second thing height has to compete with. */
.mo-day.is-pick {
  box-shadow: inset 0 0 0 2px var(--accent-strong);
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .mo-day:not(.is-blank):not(.is-pick):hover { box-shadow: inset 0 0 0 1px var(--rule-2); }
}

.mo-id-day {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.mo-num {
  font: 500 var(--mo-num)/1 var(--f-ui);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.mo-day.is-today .mo-num { font-weight: 700; color: var(--accent-strong); }
/* The weekday name belongs to the list under 720, where there is no header row to carry it. */
.mo-wd { display: none; }

/* 4. The column. It stands on the floor rule at the foot of the well and rises to its share of the month. */
.mo-well {
  position: relative;
  flex: 1 1 auto;
  min-height: 54px;
  margin-top: 8px;
  border-bottom: 1px solid var(--mo-floor);
}
.mo-col {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* The share is taken of the well less the room the figure needs, so a day at a hundred per cent still has
     its own figure over it inside the cell. */
  height: calc((100% - var(--mo-figspace)) * var(--h, 0) / 100);
  min-height: 2px;
  display: flex;
  flex-direction: column-reverse;
  background: var(--mo-online);
  /* The head of the column, drawn in the accent at full strength. The bands inside are three tints of one
     hue and the lightest of them is the top one, so at the one edge the whole reading depends on, where the
     bar stops, the column was dissolving into the paper at about 1.3 to 1. An inset rule takes no layout,
     so the head is crisp whichever band happens to reach it. */
  box-shadow: inset 0 1px 0 0 var(--accent-strong);
}
.mo-seg {
  display: block;
  width: 100%;
  height: calc(var(--s, 0) * 1%);
}
.mo-seg.is-online { background: var(--mo-online); }
.mo-seg.is-pos { background: var(--mo-pos); }
.mo-seg.is-drafts { background: var(--mo-drafts); }
/* The figure that labels a column, riding the head of its own column so the figure and the height it stands
   for are read as one thing. Three days of the month carry one: the day a reader chose, the best day and the
   leanest read day. Thirty of them, in the display face at 800 against near black, beat the columns they
   were meant to label by about four times on ink and thirty times on count, and the grid read as the rack of
   labelled figures the wave exists to remove. The best day and the chosen day take the full ink, because
   those are the two a person is looking for. */
.mo-fig {
  position: absolute;
  left: 0;
  bottom: calc((100% - var(--mo-figspace)) * var(--h, 0) / 100);
  margin-bottom: 4px;
  font: 800 var(--mo-fig)/1 var(--f-display);
  font-style: normal;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
/* The floor of the month is the quieter of the two ends: it is there to give the scale a bottom, not to be
   looked at. The chosen day is never quieted, even when it is that floor. */
.mo-day.is-low .mo-fig { color: var(--muted); }
.mo-day.is-pick .mo-fig { color: var(--ink); }
/* Today is still being sold. One hairline stands where its column will be at midnight, and the cell carries
   no figure at all, because there is nothing yet to print. */
.mo-col.is-now {
  height: 0;
  min-height: 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid var(--rule-2);
}

/* 5. The two ad marks, Google then Meta, in fixed slots so a platform that is not connected leaves its slot
      empty and never slides the other mark under the wrong name. No numerals: no product this could be
      mistaken for will give up the number, and the number is in the line under the grid.
      Filled means the ads ran that day, and which fill says whether they paid for themselves. Hollow means
      there is no return to show, either because nothing was spent or because the day has not been read, and
      the two hollows are told apart by how firm the outline is. Three of these four used to be a pale
      beige at under 2 to 1, which is a mark a person cannot see across a desk, so the fills are now the ink
      greys the rest of the app uses for small type. */
.mo-marks {
  margin-top: auto;
  padding-top: 7px;
  display: grid;
  grid-template-columns: repeat(2, 8px);
  gap: 5px;
  align-items: center;
}
.mo-mark {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background: none;
}
.mo-mark.mo-google { grid-column: 1; }
.mo-mark.mo-meta { grid-column: 2; }
.mo-mark.is-lit { background: var(--accent-strong); border-color: var(--accent-strong); }
.mo-mark.is-dim { background: var(--muted); border-color: var(--muted); }
.mo-mark.is-none { background: none; border-color: var(--muted); }
.mo-mark.is-wait { background: none; border-color: var(--ghost); }

/* 6. The line under the grid. This is where every figure a cell no longer prints is read. */
.mo-pick {
  margin: 20px 0 0;
  max-width: 100ch;
  font: 500 14px/1.6 var(--f-ui);
  color: var(--ink-2);
}

/* 7. The foot: the weekday shape of the month beside the month read. */
.mo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 48px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.mo-panel { flex: 1 1 280px; min-width: 0; }
/* The caption is the eyebrow of its panel and has to win against the labels under it, which are also small,
   also uppercase and also tracked. It is a pixel and a half bigger than they were and it was losing, so it
   takes the display face, the accent and a clear size step instead. */
.mo-cap {
  display: block;
  font: 800 12px/1.2 var(--f-display);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.mo-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  max-width: 400px;
  margin-top: 14px;
}
.mo-wk { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mo-wk-well {
  position: relative;
  height: 56px;
  border-bottom: 1px solid var(--mo-floor);
}
/* The medians take the middle tint. They answer a second question about the same month, so they read under
   the grid's own columns rather than beside them. */
.mo-wk-col {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: calc(100% * var(--h, 0) / 100);
  min-height: 2px;
  background: var(--mo-pos);
}
.mo-wk-d {
  font: 500 10px/1.2 var(--f-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.mo-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 14px 0 0;
}
.mo-s { min-width: 0; }
.mo-s-l {
  margin: 0;
  font: 700 9.5px/1.2 var(--f-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.mo-s-f {
  margin: 3px 0 0;
  font: 700 17px/1.1 var(--f-display);
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
/* A row of identically weighted tiles is a wall and not a reading, so the line is ranked. The blended return
   is the only verdict on it and stands largest; the count of read days is where the figures came from rather
   than a figure of its own and stands smallest. The month's own total is not here at all: it is the figure
   standing over the grid already. */
.mo-s.is-lead .mo-s-f { font-size: 24px; font-weight: 800; }
.mo-s.is-quiet .mo-s-f { font-size: 14px; color: var(--ink-2); }
.mo-sum.is-none {
  display: block;
  font: 500 13.5px/1.5 var(--f-ui);
  color: var(--muted);
}

/* The last line on the surface: what a figure on it means, written once. It used to close the selected day's
   sentence, which set forty words of definition down again under every single click. */
.mo-def {
  flex: 1 1 100%;
  margin: 4px 0 0;
  max-width: 96ch;
  font: 400 12.5px/1.6 var(--f-ui);
  color: var(--muted);
}

/* 8. Under 720 the seven columns have nowhere to stand: a cell is 44px wide and a five digit figure is wider
      than that. The grid becomes a list of days, one row each, and the column lies down. Height stops
      carrying value and width takes it, and nothing else about the column changes: the same share of the same
      best day of the same month, the same three tints in the same order out from the floor rule, the same
      three labelled days, the same two marks. A day outside the month is dropped rather than drawn as an
      empty row. The breakpoint is 720 and not 719.98 so that it lands on the same pixel as market.css, which
      is where the measure this surface is padded on changes.
      The weekday axis does not survive down here. Thirty stacked rows cannot be read against each other by
      weekday, so the shape panel under the grid is where a weekday question is answered on a phone. */
@media (max-width: 720px) {
  .mo-head { padding: 18px var(--mk-edge) 14px; gap: 12px 20px; }
  .mo-body { padding: 0 var(--mk-edge) 36px; }

  .mo-grid { display: block; margin-top: 14px; border: 0; }
  .mo-dow, .mo-day.is-blank { display: none; }

  .mo-day {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-areas: "id well marks";
    align-items: center;
    column-gap: 14px;
    width: 100%;
    min-height: 0;
    padding: 11px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .mo-day.is-pick { box-shadow: inset 2px 0 0 var(--accent-strong); }
  @media (hover: hover) and (pointer: fine) {
    .mo-day:not(.is-blank):not(.is-pick):hover { box-shadow: inset 1px 0 0 var(--rule-2); }
  }

  .mo-id-day { grid-area: id; }
  .mo-wd {
    display: block;
    font: 700 10px/1.2 var(--f-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mo-num { color: var(--ink-2); }

  .mo-well {
    grid-area: well;
    height: 22px;
    min-height: 0;
    margin: 0;
    border-bottom: 0;
    border-left: 1px solid var(--mo-floor);
  }
  .mo-col {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: calc((100% - var(--mo-figroom)) * var(--h, 0) / 100);
    height: auto;
    min-height: 0;
    min-width: 2px;
    flex-direction: row;
    /* The head of the column is its right edge once it lies down, so the accent rule moves with it. */
    box-shadow: inset -1px 0 0 0 var(--accent-strong);
  }
  .mo-seg { width: calc(var(--s, 0) * 1%); height: auto; }
  .mo-col.is-now {
    width: 0;
    min-width: 0;
    height: auto;
    border-top: 0;
    border-left: 1px solid var(--rule-2);
  }
  /* The three labelled days line their figures up at the right edge of the well instead of riding the tip of
     each bar, so they are read against each other and none of them can run out past the edge of a 390
     screen. The room is held on every row whether it carries a figure or not, because it comes out of the
     width the bars are drawn into and the bars are on one scale. */
  .mo-fig {
    left: auto;
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: var(--mo-figroom);
    margin: 0;
    text-align: right;
  }

  .mo-marks {
    grid-area: marks;
    margin: 0;
    padding: 0;
    justify-self: end;
  }

  .mo-pick { margin-top: 16px; font-size: 13.5px; }
  .mo-foot { margin-top: 22px; gap: 22px 32px; }
  .mo-week { max-width: none; }
  .mo-wk-well { height: 44px; }
}