/* =================================================================================================
   Offer Timers 1.0.0, the ranking for The Clearing Clock.

   ARRANGED FROM THE INSIDE OUT, because a schedule is only a stack of timers and the timer is the
   part with an argument in it. One timer, its head, its three readings, the rows beneath them, its
   foot. The container and the notes around it come after that, and the width queries come last.

   LAID OUT THE WAY DURATIONS WANT TO BE READ, which is downwards. A timer takes the whole measure
   and the next one goes beneath it, so the eye runs down one column and the comparing happens by
   itself. Within a timer the three readings move into a row as soon as there is space for one,
   since they are three parts of a single answer and separating them costs exactly the comparison
   that the schedule exists to make. That is the opposite of a grid of cards, where the offers sit
   abreast and the readings inside them never do.

   HANDSET FIRST. This serves a domain about playing on a phone, so the narrow layout is the plain
   one and carries no query at all. Everything inside a width query adds something for a bigger
   screen rather than undoing something meant for a smaller one.

   VALUES BELONG TO THE THEME. astra-child-chrono publishes every colour, face, size and space on
   :root beneath the --cl- names, and nothing here is invented. Nor is any of it restated in a
   block on a wrapper, which is the usual plugin habit and a bad one: a wrapper redeclaring :root
   quietly overrides it for everything inside, and leaves a second copy of each value free to drift
   away from the first. Instead each token is read where it is used and carries a short standby
   inside the var(), in case this file is ever served ahead of its theme. A standby is never more
   than a floor: one hex, or a generic family in place of a seven-name stack that already has a
   home.

   COLOUR CARRIES NO MEANING ALONE. The indigo marks a reading and the carmine marks whatever costs
   the reader time or money, and the two are never swapped about, but every called reading also
   carries its own caption in words and nothing decorative is ever set in the carmine.
   ============================================================================================= */

/* ---- One timer ------------------------------------------------------------------------------ */

.tmr-timer {
  background-color: var(--cl-paper, #F4F5F7);
  border-block: var(--cl-line, 1px) solid var(--cl-hair, #D5DBE1);
  border-inline-start: var(--cl-edge, 2px) solid var(--cl-ink, #15191F);
  list-style: none;
  padding-block: var(--cl-gap, 1rem);
  padding-inline: var(--cl-gap, 1rem);
}

/* The small capitals this plugin speaks in. Four places want them, so they are written once. */
.tmr-timer__index,
.tmr-reading__name,
.tmr-stage,
.tmr-timer__mark {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: var(--cl-t-cap, 0.8125rem);
}

/* ---- The head of a timer --------------------------------------------------------------------- */

.tmr-timer__index {
  align-items: baseline;
  color: var(--cl-ink-2, #4A525C);
  display: flex;
  font-family: var(--cl-figurine, ui-monospace, monospace);
  gap: 0.6em;
  margin: 0;
}

.tmr-timer__no {
  color: var(--cl-ink, #15191F);
  font-variant-numeric: tabular-nums;
}

.tmr-timer__name {
  color: var(--cl-ink, #15191F);
  font-family: var(--cl-letter, Georgia, serif);
  font-size: var(--cl-t-h3, 1.375rem);
  line-height: 1.2;
  margin-block: 0.15em 0;
}

.tmr-timer__strap {
  color: var(--cl-ink-2, #4A525C);
  font-size: var(--cl-t-cap, 0.8125rem);
  margin-block: 0 var(--cl-gap, 1rem);
}

/* ---- The three readings ----------------------------------------------------------------------
   Stacked here, put abreast further down. The hairline between any two of them is the ruled ground
   showing through a one-pixel gap, which keeps exactly one rule between neighbours however many
   there are and however they happen to fall. */

.tmr-timer__reads {
  background-color: var(--cl-rule, #687481);
  border: var(--cl-line, 1px) solid var(--cl-rule, #687481);
  display: grid;
  gap: var(--cl-line, 1px);
  margin-block-end: var(--cl-step, 0.5rem);
}

.tmr-reading {
  background-color: var(--cl-panel, #E7EAEE);
  padding-block: var(--cl-step, 0.5rem);
  padding-inline: var(--cl-gap, 1rem);
}

.tmr-reading--called { background-color: var(--cl-panel-2, #D9DEE4); }

.tmr-reading__name,
.tmr-reading__fig,
.tmr-reading__note { display: block; }

.tmr-reading__name { color: var(--cl-ink-2, #4A525C); }

.tmr-reading__fig {
  color: var(--cl-read, #1F3A6E);
  font-size: var(--cl-t-fig, 1.75rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  font-family: var(--cl-figurine, ui-monospace, monospace);
}

.tmr-reading--called .tmr-reading__fig { color: var(--cl-cost, #A8324E); }

.tmr-reading__note {
  color: var(--cl-ink-2, #4A525C);
  font-size: var(--cl-t-cap, 0.8125rem);
}

.tmr-timer__basis {
  color: var(--cl-ink-2, #4A525C);
  font-size: var(--cl-t-cap, 0.8125rem);
  margin-block: 0 var(--cl-gap, 1rem);
}

/* ---- The rows beneath the readings ------------------------------------------------------------
   Named areas rather than counted columns, because the row changes shape between the two widths
   and an area name says what the shape is for. Narrow, the label and the number share a line with
   the detail running under both. Wide, label, detail and number take three columns, which is how
   anybody reads a timetable. */

.tmr-stage {
  border-block-end: var(--cl-line, 1px) solid var(--cl-rule, #687481);
  color: var(--cl-ink-2, #4A525C);
  margin-block: var(--cl-gap, 1rem) var(--cl-step, 0.5rem);
  padding-block-end: 2px;
}

/* The run is the reading this whole site is for, so its stage heading is the one in the carmine
   and under the heavier rule. */
.tmr-stage--run {
  border-block-end-color: var(--cl-cost, #A8324E);
  border-block-end-width: var(--cl-edge, 2px);
  color: var(--cl-cost, #A8324E);
}

.tmr-item {
  border-block-start: var(--cl-line, 1px) solid var(--cl-hair, #D5DBE1);
  column-gap: var(--cl-step, 0.5rem);
  display: grid;
  font-size: var(--cl-t-cap, 0.8125rem);
  grid-template-areas: "label figure" "detail detail";
  grid-template-columns: minmax(0, 1fr) 6rem;
  padding-block: var(--cl-step, 0.5rem);
}

.tmr-item:first-of-type { border-block-start: 0; }

.tmr-item__name {
  font-weight: 600;
  grid-area: label;
}

.tmr-item__fig {
  font-family: var(--cl-figurine, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  grid-area: figure;
  text-align: end;
}

.tmr-item__word {
  color: var(--cl-ink-2, #4A525C);
  font-family: var(--cl-prose, system-ui, sans-serif);
  text-transform: lowercase;
}

.tmr-item__detail {
  color: var(--cl-ink-2, #4A525C);
  grid-area: detail;
}

.tmr-item--total {
  background-color: var(--cl-panel-2, #D9DEE4);
  border-block-start: var(--cl-edge, 2px) solid var(--cl-ink, #15191F);
  margin-block-start: var(--cl-step, 0.5rem);
  padding-inline-start: var(--cl-step, 0.5rem);
}

.tmr-item--total .tmr-item__name,
.tmr-item--total .tmr-item__fig {
  color: var(--cl-cost, #A8324E);
  font-weight: 700;
}

/* ---- The foot of a timer ---------------------------------------------------------------------- */

.tmr-timer__foot {
  border-block-start: var(--cl-line, 1px) solid var(--cl-rule, #687481);
  margin-block-start: var(--cl-gap, 1rem);
  padding-block-start: var(--cl-gap, 1rem);
}

.tmr-timer__mark {
  border: var(--cl-line, 1px) solid var(--cl-cost, #A8324E);
  color: var(--cl-cost, #A8324E);
  display: inline-block;
  font-family: var(--cl-figurine, ui-monospace, monospace);
  margin-block: 0 var(--cl-step, 0.5rem);
  padding-inline: 0.4em;
}

.tmr-timer__mark--gb {
  border-color: var(--cl-read, #1F3A6E);
  color: var(--cl-read, #1F3A6E);
}

.tmr-timer__licence,
.tmr-timer__dated {
  color: var(--cl-ink-2, #4A525C);
  font-size: var(--cl-t-cap, 0.8125rem);
  margin-block: 0 var(--cl-step, 0.5rem);
}

.tmr-timer__go {
  background-color: var(--cl-read, #1F3A6E);
  border: var(--cl-line, 1px) solid var(--cl-read-d, #15284D);
  color: #FFFFFF;
  display: block;
  font-family: var(--cl-letter, Georgia, serif);
  font-weight: 600;
  font-size: var(--cl-t-base, 1.0625rem);
  margin-block-start: var(--cl-step, 0.5rem);
  padding-block: 0.75rem;
  padding-inline: 1rem;
  text-align: center;
  text-decoration: none;
}

.tmr-timer__go:hover,
.tmr-timer__go:focus {
  background-color: var(--cl-read-d, #15284D);
  color: #FFFFFF;
}

/* Where no destination has been typed in, a reader gets nothing at all and an editor gets the
   dashed outline. Both the outline and the empty span it replaces are handled here, so even a
   substitution that failed to run leaves a reader looking at blank space. */
.tmr-nogo { display: none; }

.tmr-timer__go--none {
  background-color: transparent;
  border: var(--cl-line, 1px) dashed var(--cl-cost, #A8324E);
  color: var(--cl-cost, #A8324E);
}

.tmr-editor-only {
  color: var(--cl-ink-2, #4A525C);
  display: block;
  font-size: var(--cl-t-cap, 0.8125rem);
  margin-block-start: var(--cl-step, 0.5rem);
}

/* Reaches a screen reader and no eye: the button says where it goes and in what window. */
.tmr-hidden {
  position: absolute;
  margin: -1px;
  border: 0;
  padding: 0;
  inline-size: 1px;
  block-size: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
  overflow: hidden;
}

/* ---- The schedule the timers stand on ---------------------------------------------------------
   The section keeps whatever measure the prose around it keeps and takes no inset of its own. An
   inset belongs to a timer, which has an edge a reader can see. A schedule has no edge. */

.tmr-schedule {
  color: var(--cl-ink, #15191F);
  display: block;
  font-family: var(--cl-prose, system-ui, sans-serif);
  font-size: var(--cl-t-base, 1.0625rem);
  line-height: 1.6;
  margin-block: var(--cl-gap-2, 1.75rem) var(--cl-gap-3, 2.75rem);
}

.tmr-schedule__head {
  color: var(--cl-ink, #15191F);
  font-family: var(--cl-letter, Georgia, serif);
  line-height: 1.22;
  margin-block: 0 var(--cl-step, 0.5rem);
  font-size: var(--cl-t-h2, 1.75rem);
}

.tmr-schedule__lines {
  display: flex;
  flex-direction: column;
  gap: var(--cl-gap, 1rem);
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

/* Each of these says something a reader is entitled to, so not one of them drops below the caption
   size or into an ink weaker than the captions themselves. */
.tmr-schedule__paid,
.tmr-schedule__working,
.tmr-schedule__licence,
.tmr-schedule__dated {
  color: var(--cl-ink-2, #4A525C);
  font-size: var(--cl-t-cap, 0.8125rem);
  margin-block: 0 var(--cl-step, 0.5rem);
}

.tmr-schedule__paid {
  border-block: var(--cl-line, 1px) solid var(--cl-rule, #687481);
  margin-block-end: var(--cl-gap, 1rem);
  padding-block: var(--cl-step, 0.5rem);
}

.tmr-schedule__working:first-of-type { margin-block-start: var(--cl-gap, 1rem); }

.tmr-schedule__licence {
  background-color: var(--cl-panel, #E7EAEE);
  border-inline-start: 3px solid var(--cl-cost, #A8324E);
  margin-block-start: var(--cl-gap, 1rem);
  padding-block: var(--cl-step, 0.5rem);
  padding-inline: var(--cl-gap, 1rem);
}

/* =================================================================================================
   Bigger screens, where two things are added and nothing is taken back. The readings take a row,
   and the rows beneath them take three columns. Neither query goes anywhere near the measure of
   the section, which holds whatever the surrounding prose holds at any width at all.
   ============================================================================================= */

@media (min-width: 46em) {
  .tmr-timer__reads { display: flex; }

  .tmr-reading {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .tmr-item {
    grid-template-areas: "label detail figure";
    grid-template-columns: 13rem minmax(0, 1fr) 6rem;
  }

  .tmr-timer__go {
    display: inline-block;
    min-inline-size: 16rem;
  }
}

@media (min-width: 62em) {
  .tmr-timer { padding-inline: var(--cl-gap-2, 1.75rem); }

  .tmr-item { grid-template-columns: 16rem minmax(0, 1fr) 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tmr-schedule * {
    animation: none !important;
    transition: none !important;
  }
}