/* ---------------------------------------------------------------------------
   BUILD HOURS AND BUILD PROGRESS — Part 33

   Loaded only by the pages that draw the tracker: a vessel's page when her
   builder has switched it on and there is something to show, her preview, and
   /dashboard/build-tracker.php. Nothing here is needed by any other page and
   nothing here is loaded by one.

   The stepper is BUILT VERTICALLY AND ALLOWED TO GO HORIZONTAL. The vertical
   arrangement is the honest one — a stage, its date and its note, one under
   another, readable at any width and complete without a script. Above 60rem the
   track becomes a row of marks along a rule, because at that width a build's
   shape is worth seeing at a glance. Neither arrangement hides anything the
   other shows.
   -------------------------------------------------------------------------- */

.vessel-section--tracker .tracker {
  display: grid;
  gap: var(--space-6);
}

/* --- Her hours ------------------------------------------------------------ */

.tracker-hours {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--cream);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
}

@media (min-width: 48rem) {
  .tracker-hours {
    grid-template-columns: minmax(9rem, auto) 1fr;
    align-items: center;
    column-gap: var(--space-6);
  }
  .tracker-hours__span { grid-column: 1 / -1; }
}

.tracker-hours__figure { text-align: center; }

.tracker-hours__value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.tracker-hours__unit,
.tracker-figures__label {
  margin: 0.3rem 0 0;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.tracker-hours__parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.tracker-hours__part dt {
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.tracker-hours__part dd {
  margin: 0.1rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.tracker-hours__span {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.tracker-private {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--brass-soft);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.tracker__empty,
.tracker__manage { margin: 0; }

/* --- The stepper ---------------------------------------------------------- */

.build-progress {
  display: grid;
  gap: var(--space-4);
}

.build-progress__gauge {
  display: grid;
  gap: 0.6rem;
}

.build-progress__meter {
  position: relative;
  height: 0.7rem;
  background: rgba(8, 42, 69, 0.09);
  border-radius: 999px;
  overflow: hidden;
}

.build-progress__fill {
  display: block;
  height: 100%;
  min-width: 0.7rem;
  background: linear-gradient(90deg, var(--brass) 0%, var(--gold) 100%);
  border-radius: 999px;
}

.build-progress__reading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
}

.build-progress__percent {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.build-progress__count { color: var(--gray-text); font-size: var(--text-sm); }
.build-progress__aside { color: var(--gray-text); }

.build-progress__next {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-weight: 600;
  color: var(--navy);
}

.build-progress__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.build-progress__step {
  position: relative;
  padding-left: 1.9rem;
  border-left: 2px solid var(--navy-hairline);
}

.build-progress__step:last-child { border-left-color: transparent; }

.build-progress__node {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  width: 100%;
  padding: 0.55rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

/* Without the script there is nothing to disclose, so the control does not
   pretend to be one. assets/js/build-tracker.js adds the hook class. */
.build-progress:not([data-progress-ready]) .build-progress__node { cursor: default; }

.build-progress__node:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.build-progress__mark {
  position: absolute;
  left: -0.56rem;
  top: 0.85rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--ivory);
  border: 2px solid var(--navy-hairline);
}

.build-progress__name { font-weight: 600; color: var(--navy); }

.build-progress__state {
  font-size: var(--text-sm);
  color: var(--gray-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.build-progress__panel {
  padding: 0 0 0.75rem;
  display: grid;
  gap: 0.4rem;
}

.build-progress__panel[hidden] { display: none; }

.build-progress__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--text-sm);
}

.build-progress__date { color: var(--navy); font-weight: 600; }
.build-progress__source { color: var(--gray-text); font-style: italic; }

.build-progress__note,
.build-progress__hint,
.build-progress__entry {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.build-progress__hint { color: var(--gray-text); }

/* The states the stepper draws. Colour is never the only signal: a completed
   stage also carries its date, and every stage says where it stands in words.

   A stage marked NOT APPLICABLE is not one of them — it is left out of the
   drawing entirely (see build_progress_stepper_render()), because it is not a
   stage of this boat. The rules for it stay, greyed and struck through, for the
   one place it can still appear: a page rendered by an installation running
   this stylesheet against older markup. */
.build-progress__step--complete { border-left-color: var(--brass); }
.build-progress__step--complete .build-progress__mark {
  background: var(--brass);
  border-color: var(--brass);
}

.build-progress__step--in-progress .build-progress__mark {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-soft);
}

.build-progress__step--skipped .build-progress__name {
  color: var(--gray-text);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.build-progress__step--skipped .build-progress__mark { opacity: 0.5; }

.build-progress__step.is-next .build-progress__name { color: var(--brass-text); }

/* THE TRACK RUNS DOWN THE PAGE AT EVERY WIDTH, and that is a decision rather
   than a limitation.

   A row of marks along a rule is the obvious drawing for fourteen stages, and
   it was tried. It cannot hold the detail: a stage's date, its note and the
   journal entry it points at have to open SOMEWHERE, and inside a row that
   somewhere is one narrow column — while spanning the full width from inside a
   list item is not something a grid item can do. Every arrangement that made
   the open panel readable made the track wrap into two rows with rules running
   off the ends of them.

   So the stepper is the same shape as the timeline it sits above, which is also
   the shape this site already uses for a sequence of events. What a wide screen
   gets is a measure worth reading and the stage's state set out beside its name
   rather than under it. */
@media (min-width: 52rem) {
  .build-progress__track { max-width: 46rem; }

  .build-progress__node {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--space-4);
  }

  .build-progress__state { text-align: right; }

  .build-progress__panel {
    max-width: 46rem;
    padding-left: 0;
  }
}

/* --- The builder's own screen --------------------------------------------- */

.tracker-figures {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--cream);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
}

@media (min-width: 44rem) {
  .tracker-figures {
    grid-template-columns: minmax(8rem, auto) 1fr;
    align-items: center;
    column-gap: var(--space-6);
  }
}

.tracker-figures__main { text-align: center; }

.tracker-figures__value {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.tracker-figures__parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.tracker-figures__parts dt {
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.tracker-figures__parts dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.ledger__row {
  padding: var(--space-4);
  background: var(--cream);
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
}

.ledger__row--journal { border-left: 3px solid var(--brass-hairline); }

.ledger__fields {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 40rem) {
  .ledger__fields { grid-template-columns: 6rem 11rem 1fr; align-items: end; }
}

.ledger__source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.ledger__actions,
.stage-list__actions,
.stage-list__nudge .cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-3);
}

.field--tight { margin-bottom: 0; }
.field--tight .field__label { margin-bottom: 0.25rem; }

.tracker-breakdown { margin: 0 0 var(--space-4); }

.tracker-breakdown__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--navy-hairline);
}

.tracker-breakdown__row dt { color: var(--navy); font-weight: 600; }
.tracker-breakdown__row dd { margin: 0; font-variant-numeric: tabular-nums; }

.stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.stage-list__item {
  padding: var(--space-4);
  background: var(--cream);
  border: 1px solid var(--navy-hairline);
  border-left: 3px solid var(--navy-hairline);
  border-radius: var(--radius);
}

.stage-list__item--complete    { border-left-color: var(--brass); }
.stage-list__item--in-progress { border-left-color: var(--gold); }
.stage-list__item--skipped     { opacity: 0.72; }

.stage-list__item.is-next { border-left-color: var(--brass); }

/* The heading is the disclosure's label; the button inside it carries the
   layout, so the heading itself is only a margin reset. */
.stage-list__head { margin: 0; font-size: inherit; font-weight: inherit; }

.stage-list__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--navy);
}

.stage-list__hint {
  margin: 0.25rem 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.stage-list__fields {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 44rem) {
  .stage-list__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* NEXT UP, on the journal screen — one press for the commonest thing a builder
   has to say about their progress. Set apart from the stepper above it with
   the brass hairline the rest of the sheet uses for "and now something you can
   do", rather than as a panel of its own: it is the end of that drawing's
   sentence, not a second subject. */

.stage-next {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--brass-hairline);
  display: grid;
  gap: var(--space-3);
}

.stage-next__text { margin: 0; }

/* --- The stage list, as rows that open ------------------------------------

   It used to be fourteen open forms, one under the other: a state select, a
   date, a journal entry, a note, a save and up to two more buttons apiece,
   around a hundred controls on one screen, and a builder looking for the one
   stage they had come to change had to read all of them. It is now fourteen
   ROWS — the stage, where it stands, the date — and the form for one of them
   at a time.

   WITHOUT THE SCRIPT EVERY PANEL IS OPEN, which is what the old screen was.
   assets/js/build-tracker.js closes them and marks the list ready; a builder
   whose script never arrived gets the long form rather than fourteen headings
   that do nothing. */

.stage-list__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* The disclosure is a heading first and a control second, so it takes the
   pointer's cue rather than a button's chrome. */
.stage-list__toggle:hover .stage-list__name { color: var(--brass-text); }
.stage-list__toggle:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* Only where the script has closed the panels — a list nothing can open must
   not be drawn with a mark saying it opens. */
[data-stage-list-ready] .stage-list__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform 0.15s ease;
}
[data-stage-list-ready] .stage-list__toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
}

.stage-list__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.stage-list__when { font-variant-numeric: tabular-nums; }

.stage-list__state-hint { margin: var(--space-3) 0 var(--space-4); max-width: 44rem; }

.stage-list__panel { margin-top: var(--space-4); }
.stage-list__panel[hidden] { display: none; }

/* --- The tracker's own sub-navigation -------------------------------------

   Two subjects on one screen — her hours and her progress — and the progress
   half begins a long way down it. A builder who came to tick a stage was
   scrolling past a form, a baseline, a ledger and a breakdown to reach it.
   These are the same anchors the flashes and redirects already use. */

.tracker-jump {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-bottom: var(--space-5);
  padding: 0.6rem 0;
  background: var(--ivory);
  border-bottom: 1px solid var(--brass-hairline);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.tracker-jump a {
  color: var(--brass-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tracker-jump a:hover,
.tracker-jump a:focus-visible { border-bottom-color: var(--brass); }