/* =================================================================================================
 * minute-sheet.css  ::  Minute Notes  ::  the page furniture for The Clearing Clock
 *
 * A note on this site takes one offer apart into durations and puts a price on each of them. Almost
 * every block below exists to set a span of time, or the cost of one, in front of somebody holding a
 * handset. So the file is laid out by the KIND of object a rule dresses, not by the order those
 * objects happen to appear down the page:
 *
 *     1   tokens, restated as a fallback
 *     2   the single measure, written down once
 *     3   running text and headings
 *     4   figures, which is the register this site argues in
 *     5   the three navigating lists: path, marks, stamp
 *     6   the masthead, and the three readings beneath it
 *     7   the body and its numbered pieces
 *     8   tables, and the port a wide one travels in
 *     9   objects with a visible edge
 *    10   the questions
 *    11   handsets
 *
 * NOTHING HERE IS A VALUE OF ITS OWN. astra-child-chrono owns the palette, the faces, the type
 * ladder and the spacing module, all of them custom properties on :root. Section 1 copies out the
 * ones a note needs, to the theme's numbers, purely so that a page is legible in the moment before
 * the theme arrives and in the event that it is ever taken away.
 *
 * NOTHING HERE IS DRAWN TWICE EITHER. The theme publishes the devices this site uses everywhere, so
 * a measured span, a framed drawing, a note to one side, the age mark and a small-capital label are
 * one shape wherever they land. The handful a note uses are copied out below, same drawing, same
 * tokens, for the reason section 1 exists and for no other.
 * ============================================================================================== */

/* -------------------------------------------------------------------------------------------
 * 1  TOKENS
 * ---------------------------------------------------------------------------------------- */

.cl-run {
  /* Three greys to stand things on, lightest first. */
  --cl-paper: #F4F5F7;
  --cl-panel: #E7EAEE;
  --cl-panel-2: #D9DEE4;

  /* Reading colour, and the quieter one captions and reference lines take. */
  --cl-ink: #15191F;
  --cl-ink-2: #4A525C;

  /* A link, a link under the pointer, and the colour a figure takes when it has gone against
     the reader. Nothing else on a note is coloured. */
  --cl-read: #1F3A6E;
  --cl-read-d: #15284D;
  --cl-cost: #A8324E;

  /* Three weights of rule: the one that separates, and two hairlines. */
  --cl-rule: #687481;
  --cl-hair: #D5DBE1;
  --cl-hair-5: #B9C2CB;

  /* Headings are set in a book face, running text in whatever the device already has, and every
     figure in a monospace so that a column of hours sits square under itself. Nothing is
     fetched over the wire to read a page here. */
  --cl-letter:
    Georgia,                        /* the book face, where it exists */
    "Iowan Old Style",              /* and its counterparts */
    "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  --cl-prose:
    system-ui, -apple-system,       /* the device's own text face */
    "Segoe UI", Roboto,             /* desktop Windows, then Android */
    "Helvetica Neue", Arial, sans-serif;
  --cl-figurine:
    ui-monospace, SFMono-Regular,   /* the device's own monospace */
    "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* The ladder: caption, reading size, standfirst, then the three heading steps, then the size
     the three readings are set at. */
  --cl-t-cap: 0.8125rem;
  --cl-t-base: 1.0625rem;
  --cl-t-lead: 1.25rem;
  --cl-t-h3: 1.375rem;
  --cl-t-h2: 1.75rem;
  --cl-t-h1: 2.375rem;
  --cl-t-fig: 1.75rem;

  /* Four steps of vertical space, and two border weights. */
  --cl-step: 0.5rem;
  --cl-gap: 1rem;
  --cl-gap-2: 1.75rem;
  --cl-gap-3: 2.75rem;
  --cl-edge: 2px;
  --cl-line: 1px;

  font-family: var(--cl-prose);
  font-size: var(--cl-t-base);
  line-height: 1.6;
  color: var(--cl-ink);
}

/* -------------------------------------------------------------------------------------------
 * 2  THE SINGLE MEASURE
 *
 * One column, and everything stands in it. A paragraph, a heading, a table, a framed drawing, the
 * readings, a measured span, the marks bar and the ranking slot all begin where the column begins
 * and end where it ends. There is no narrower column for running text. A reader comparing the
 * figure in a sentence with the figure in the table under it should find the two on the same
 * vertical, and that only happens if nothing has an inset of its own.
 *
 * Two objects are inset, and both of them are things with an edge a reader can see: a table cell,
 * and the frame around a drawing. A rule laid across a block is a border and costs that block no
 * width, so a block with a rule on it still spans the column. Space above and below is unrestricted
 * for the same reason, and a page of arithmetic wants plenty of it.
 *
 * The rule is enforced here, in one statement over every object in the column, rather than being
 * remembered separately in twenty shorthands. Several of these would sit flush without it. A few,
 * the drawing frame and an answer in the questions among them, come from the browser already pushed
 * in, and those are the ones that quietly broke this rule on earlier builds in this network.
 * Everything past this section is therefore about vertical rhythm, rules, colour, and in three
 * places how many columns a grid stands in.
 * ---------------------------------------------------------------------------------------- */

.cl-run :is(h2, h3),
.cl-path,
.cl-path ol,
.cl-top,
.cl-top__ref,
.cl-top h1,
.cl-top__says,
.cl-reading,
.cl-stand,
.cl-marks,
.cl-marks ol,
.cl-main,
.cl-piece,
.cl-grid,
.cl-scroll,
.cl-scale,
.cl-aside,
.cl-chart,
.cl-queries,
.cl-queries:is(dl),
.cl-queries:is(dl) dt,
.cl-queries:is(dl) dd,
.cl-support,
.cl-stamp,
.cl-stamp ol,
.cl-stamp__ref {
  margin-inline: 0;
}

.cl-path ol,
.cl-top,
.cl-marks,
.cl-marks ol,
.cl-piece,
.cl-scale,
.cl-stamp,
.cl-stamp ol {
  padding-inline: 0;
}

/* -------------------------------------------------------------------------------------------
 * 3  RUNNING TEXT AND HEADINGS
 *
 * Reading size is fixed once, against the wrapper, so that it reaches a paragraph wherever on the
 * note that paragraph has been put. Anything wanting a different size has to be at least as
 * particular as that rule to get one, which is the point: a page this full of numbers has to hold
 * to the ladder, and a block that drifts off it by accident is a block that reads as a mistake.
 * ---------------------------------------------------------------------------------------- */

.cl-run :is(p, li) {
  font-size: var(--cl-t-base);
}

.cl-run :is(h2, h3) {
  font-family: var(--cl-letter);
  color: var(--cl-ink);
}

.cl-run h2 {
  margin-block: var(--cl-gap-3) var(--cl-gap);
  font-size: var(--cl-t-h2);
  line-height: 1.22;
}

.cl-run h3 {
  margin-block: var(--cl-gap-2) var(--cl-step);
  font-size: var(--cl-t-h3);
  line-height: 1.3;
}

.cl-run a {
  color: var(--cl-read);
}

.cl-run :is(a:hover, a:focus) {
  color: var(--cl-read-d);
}

/* A label in small capitals, standing over a block that is about to list something. */
.cl-legend {
  display: block;
  color: var(--cl-ink-2);
  text-transform: uppercase;
  font-size: var(--cl-t-cap);
  letter-spacing: 0.09em;
}

/* Carried to a screen reader and to nobody else. */
.cl-offscreen {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------------------------
 * 4  FIGURES
 *
 * How a number is set matters here as much as how a sentence is. Three things are wanted of every
 * one of them: a single face throughout, digits of equal width so that a column of hours stacks
 * square, and, where the number is the conclusion rather than the working, a colour saying which
 * direction it went in.
 *
 *     .cl-figurine   any measured quantity at all: 13 h 20 min, 4,000 presses, £288.00
 *     .cl-read-fig   what survives the run, and anything else in the reader's favour
 *     .cl-cost-fig   what the run has eaten, and anything else against them
 *     .cl-rev        the revision number in the two reference lines
 *     .cl-tel        a helpline number, which must not break across a line
 *
 * The two coloured ones share a column with the plain one, cell against cell, so they take the
 * same face and the same digit width and separate on colour alone. Colour is never doing that work
 * by itself: the words beside the number repeat it, so a figure reading "minus £5.76" is a loss in
 * a column of black type and a loss again to anybody seeing no colour at all.
 * ---------------------------------------------------------------------------------------- */

.cl-figurine,
.cl-read-fig,
.cl-cost-fig,
.cl-rev,
.cl-scale__fig,
.cl-reading__fig {
  font-family: var(--cl-figurine);
  font-variant-numeric: tabular-nums;
}

.cl-read-fig {
  color: var(--cl-read);
}

.cl-cost-fig {
  color: var(--cl-cost);
}

.cl-tel {
  font-family: var(--cl-figurine);
  white-space: nowrap;
}

/* One span of time lifted out between two rules, where it is the conclusion of the piece it
   closes rather than a number inside a sentence. */
.cl-scale {
  margin-block: var(--cl-gap-2);
  padding-block: var(--cl-step);
  border-block: var(--cl-line) solid var(--cl-rule);
  text-align: center;
}

.cl-scale__fig {
  color: var(--cl-ink-2);
  font-size: var(--cl-t-cap);
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------------------------
 * 5  THE THREE NAVIGATING LISTS
 *
 * The path up top, the marks bar under the ranking, and the stamp at the foot are one family. Each
 * is a numbered list of links with its markers suppressed, and two of the three spread into as many
 * columns as the width allows. They sit together because changing how a note is got around means
 * changing all three at once, and because keeping them apart is exactly how one of them finishes up
 * with a gap the other two do not have.
 * ---------------------------------------------------------------------------------------- */

.cl-path ol,
.cl-marks ol,
.cl-stamp ol {
  padding: 0;
  list-style: none;
}

.cl-marks ol,
.cl-stamp ol {
  display: grid;
  /* Two of the three stand in columns, and the width decides how many: one on a handset, two or
     three above it. */
  grid-template-columns: repeat(auto-fill, /* each at least */ minmax(17rem, 1fr));
}

/* The path. Three steps above a guide, two above a section, one at the front. */
.cl-path {
  margin-block: 0 var(--cl-gap);
  font-size: var(--cl-t-cap);
}

.cl-path ol {
  margin: 0;
  gap: 0 0.5em;
  flex-wrap: wrap;
  display: flex;
}

.cl-path li + li::before {
  margin-right: 0.5em;
  color: var(--cl-rule);
  content: "/";
}

.cl-path__here {
  color: var(--cl-ink-2);
}

/* The marks bar: one entry for each numbered piece, ruled above and below. */
.cl-marks {
  margin-block: 0 var(--cl-gap-2);
  padding-block: var(--cl-gap);
  border-block: var(--cl-line) solid var(--cl-rule);
}

.cl-marks ol {
  margin-block: var(--cl-step) 0;
  gap: var(--cl-step) var(--cl-gap-2);
}

.cl-marks a {
  gap: 0.6em;
  display: flex;
  text-decoration: none;
}

.cl-marks :is(a:hover, a:focus) span {
  text-decoration: underline;
}

.cl-marks__no {
  color: var(--cl-ink-2);
  font-family: var(--cl-figurine);
}

/* The stamp: where to read next, then what this note is and when it was priced. */
.cl-stamp {
  margin-block: var(--cl-gap-3) 0;
  padding-block-start: var(--cl-gap);
  border-block-start: var(--cl-edge) solid var(--cl-ink);
}

.cl-stamp ol {
  margin-block: var(--cl-step) var(--cl-gap-2);
  gap: var(--cl-gap);
}

.cl-stamp a {
  display: block;
  text-decoration: none;
}

.cl-stamp__name {
  display: block;
  font-family: var(--cl-letter);
  text-decoration: underline;
}

.cl-stamp__says {
  display: block;
  color: var(--cl-ink-2);
  font-size: var(--cl-t-cap);
}

/* Both reference lines, head and foot, carry the same marks in the same setting. */
.cl-top__ref,
.cl-stamp__ref {
  gap: 0 var(--cl-gap-2);
  flex-wrap: wrap;
  display: flex;
  color: var(--cl-ink-2);
  text-transform: uppercase;
  font-family: var(--cl-figurine);
  font-size: var(--cl-t-cap);
  letter-spacing: 0.04em;
}

.cl-stamp__ref {
  padding-block-start: var(--cl-step);
  border-block-start: var(--cl-line) solid var(--cl-rule);
}

/* -------------------------------------------------------------------------------------------
 * 6  THE MASTHEAD
 *
 * Reference line, title, a standfirst leading on the number the reader will act on, and then the
 * readings.
 *
 * THE READINGS are what this site is built around. Three cells: the size of the thing, the length
 * of the run, the length of the wait for payment. They go BELOW the standfirst, never above it,
 * because a span of time is meaningless until somebody has said what was being timed. The centre
 * cell is the one called out, since the length of the run is the figure no operator prints and the
 * figure this site exists to supply. It is given a caption of its own as well as a colour, so that
 * what singles it out is never the colour by itself.
 * ---------------------------------------------------------------------------------------- */

.cl-top {
  margin-block: 0 var(--cl-gap-2);
  padding-block: var(--cl-gap) var(--cl-gap-2);
  border-block-start: var(--cl-edge) solid var(--cl-ink);
  border-block-end: var(--cl-line) solid var(--cl-rule);
}

.cl-top__ref {
  margin-block: 0 var(--cl-gap);
}

.cl-top h1 {
  margin-block: 0 var(--cl-gap);
  font-family: var(--cl-letter);
  font-size: var(--cl-t-h1);
  line-height: 1.14;
}

.cl-top__says {
  margin-block: 0 var(--cl-gap-2);
  font-size: var(--cl-t-lead);
  line-height: 1.45;
}

/* Three equal cells. The hairlines between them are the background showing through the gap. */
.cl-reading {
  margin: 0;
  display: grid;
  gap: var(--cl-line);
  grid-template-columns: repeat(3, 1fr);
  border: var(--cl-line) solid var(--cl-rule);
  background-color: var(--cl-rule);
}

.cl-reading__cell {
  display: block;
  padding: var(--cl-gap);
  background-color: var(--cl-panel);
}

.cl-reading__cell--called {
  background-color: var(--cl-panel-2);
}

.cl-reading__cap {
  display: block;
  margin-bottom: var(--cl-step);
  color: var(--cl-ink-2);
  text-transform: uppercase;
  font-size: var(--cl-t-cap);
  letter-spacing: 0.09em;
}

.cl-reading__fig {
  display: block;
  color: var(--cl-read);
  font-size: var(--cl-t-fig);
  line-height: 1.1;
}

.cl-reading__cell--called .cl-reading__fig {
  color: var(--cl-cost);
}

/* -------------------------------------------------------------------------------------------
 * 7  THE BODY
 *
 * Seven to ten numbered pieces, each opening on the question it settles. A hairline between one
 * piece and the next, and none above the first, because the marks bar already finishes on a rule.
 * ---------------------------------------------------------------------------------------- */

.cl-main > .cl-piece + .cl-piece {
  border-block-start: var(--cl-line) solid var(--cl-hair-5);
}

.cl-piece {
  padding-block-start: var(--cl-gap);
}

.cl-piece__no {
  margin: 0;
  color: var(--cl-cost);
  font-family: var(--cl-figurine);
  font-size: var(--cl-t-cap);
  letter-spacing: 0.12em;
}

/* Number and heading read as one thing, so the heading gives up its space above. */
.cl-piece > h2:first-of-type {
  margin-block-start: var(--cl-step);
}

/* -------------------------------------------------------------------------------------------
 * 8  TABLES
 *
 * A table here is nearly always a stake or a multiple down the left and a duration across the top,
 * so cells holding figures are ranged right and row headings stay left. Rules go across and never
 * down: a vertical rule would take width the table has not got on a handset, and tinting alternate
 * rows does the same job for nothing.
 * ---------------------------------------------------------------------------------------- */

.cl-grid {
  width: 100%;
  margin-block: var(--cl-gap-2);
  border-collapse: collapse;
  font-size: var(--cl-t-cap);
}

.cl-grid caption {
  padding-block-end: var(--cl-step);
  color: var(--cl-ink-2);
  text-align: left;
  text-transform: uppercase;
  font-size: var(--cl-t-cap);
  letter-spacing: 0.09em;
}

.cl-grid :is(th, td) {
  padding: var(--cl-step) var(--cl-gap) var(--cl-step) 0;
  border-block-start: var(--cl-line) solid var(--cl-hair-5);
  vertical-align: top;
  text-align: left;
}

.cl-grid thead th {
  border-block-start: 0;
  border-block-end: var(--cl-line) solid var(--cl-rule);
  font-family: var(--cl-prose);
  font-size: var(--cl-t-cap);
  letter-spacing: 0.04em;
}

/* Any cell carrying a number, in whichever of the three registers it is written. */
.cl-grid :is(th, td):is(.cl-figurine, .cl-read-fig, .cl-cost-fig) {
  padding-right: 0;
  text-align: right;
}

.cl-grid tbody tr:nth-child(2n) {
  background-color: var(--cl-panel);
}

/* A table wider than a handset travels inside its own port. The numbers keep their size and the
   document stays still. The port spans the column like anything else.

   A caption belongs to the table and rides in the port with it, so a long one looks truncated
   while the port is parked at the left. Caption a travelling table in four or five words and put
   the explanation in the paragraph above, where the full column is available. */
.cl-scroll {
  margin-block: var(--cl-gap-2);
  overflow-x: auto;
}

.cl-scroll .cl-grid {
  margin: 0;
  min-width: 34rem;
}

/* -------------------------------------------------------------------------------------------
 * 9  OBJECTS WITH A VISIBLE EDGE
 *
 *     .cl-stand     the slot the ranking is printed into. No inset whatever, because the timers
 *                   arrive carrying edges of their own and Offer Timers draws those.
 *     .cl-aside     a qualification or a definition, ruled down its leading edge.
 *     .cl-chart     the frame a drawing sits in, its caption beneath.
 *     .cl-support   the care block, which closes the reading and is drawn heaviest of the four.
 * ---------------------------------------------------------------------------------------- */

.cl-stand {
  margin-block: 0 var(--cl-gap-3);
}

.cl-aside {
  margin-block: var(--cl-gap-2);
  padding: var(--cl-gap);
  border-inline-start: 3px solid var(--cl-rule);
  background-color: var(--cl-panel);
}

.cl-aside p:last-child {
  margin-bottom: 0;
}

.cl-chart {
  margin-block: var(--cl-gap-2);
  padding: var(--cl-step);
  border: var(--cl-line) solid var(--cl-rule);
  background-color: var(--cl-paper);
}

/* Both renderings of a drawing travel in one srcset, so the frame only ever has to hold whichever
   of the two the browser settled on, at the full width of the column. */
.cl-chart img {
  height: auto;
  width: 100%;
  display: block;
}

.cl-chart figcaption {
  padding: var(--cl-step) var(--cl-step) 0;
  color: var(--cl-ink-2);
  font-size: var(--cl-t-cap);
}

.cl-support {
  margin-block: var(--cl-gap-3) 0;
  padding: var(--cl-gap) var(--cl-gap) var(--cl-step);
  border: var(--cl-edge) solid var(--cl-ink);
  background-color: var(--cl-panel-2);
}

/* The only h2 on a note that opens a box rather than a piece of the body, so it steps down and
   gives up the space above it. */
.cl-support h2 {
  margin-top: 0;
  font-size: var(--cl-t-h3);
}

.cl-support__help {
  font-size: var(--cl-t-cap);
}

/* The age mark, set as a stamped figure, which is what it is. */
.cl-18 {
  display: inline-block;
  margin-right: 0.5em;
  padding: 0 0.35em;
  border: var(--cl-line) solid var(--cl-ink);
  background-color: var(--cl-panel-2);
  font-family: var(--cl-figurine);
  font-size: var(--cl-t-cap);
  font-weight: 700;
}

/* -------------------------------------------------------------------------------------------
 * 10  THE QUESTIONS
 *
 * A ruled definition list. Every question and every answer is written twice over, once here and
 * once inside the structured data closing the note, and the two have to read identically once
 * tags come off, so nothing in this section may put a word on the page or take one away.
 * ---------------------------------------------------------------------------------------- */

.cl-queries {
  margin-block: var(--cl-gap-3) 0;
}

.cl-queries:is(dl) {
  margin-block: var(--cl-gap) 0;
}

.cl-queries:is(dl) dt {
  margin-block-start: var(--cl-gap);
  padding-block-start: var(--cl-gap);
  border-block-start: var(--cl-line) solid var(--cl-rule);
  font-family: var(--cl-letter);
  font-size: var(--cl-t-h3);
  line-height: 1.3;
}

.cl-queries:is(dl) dd {
  margin-block: var(--cl-step) 0;
}

/* =================================================================================================
 * 11  HANDSETS
 *
 * The ladder steps down where the theme steps it down, and at no other width. Two breakpoints a few
 * pixels apart is how a heading ends up one rung off its own scale.
 *
 * The readings stack. Three numbers that size cannot be read across a 390 pixel screen, and a
 * reader on a 390 pixel screen is who this site was built for. The column lists collapse for the
 * same reason.
 *
 * No rule in here touches width, or space to the left or right, of anything in the column.
 * ============================================================================================== */

@media (max-width: 921px) {
  .cl-run {
    --cl-t-h1: 1.875rem;
    --cl-t-h2: 1.5rem;
    --cl-t-fig: 1.5rem;
    --cl-t-lead: 1.125rem;
  }

  .cl-reading,
  .cl-marks ol,
  .cl-stamp ol {
    grid-template-columns: 1fr;
  }
}

/* Nothing on a note moves of its own accord, but the theme and the ranking both animate, so the
   preference is honoured over everything inside the wrapper. */
@media (prefers-reduced-motion: reduce) {
  .cl-run * {
    animation: none !important;
    transition: none !important;
  }
}