/* ==========================================================================
   majaco methodology components
   Used by the How we do it methodology sub-pages (/how-we-work/*) only,
   loaded with front matter `extraCss: /assets/css/methodology.css`.
   Tokens only. Motion: state changes use the token durations, which drop
   to zero under prefers-reduced-motion (tokens.css). Nothing autoplays.

   Components:
     .breadcrumb      trail back to How we do it
     .method-note     callout for a key principle or a worked example
     .ladder          static nested hierarchy (Calendar Time down to Potential Time)
     .time-cascade    the interactive Time Hierarchy diagram (js/time-hierarchy.js)
     .buffer-demo     the step-through buffer diagram (js/buffer-demo.js)
     .table__cell--key  highlighted cell in a .table
   ========================================================================== */

/* ---- Breadcrumb ---- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-soft); }
.breadcrumb li + li::before { content: "/"; color: var(--text-muted); }
.breadcrumb a { color: var(--link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-soft); }

/* ---- Callout ---- */
.method-note {
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--brand);
  background: var(--color-pine-tint);
  color: var(--text);
}
.method-note > * + * { margin-top: var(--space-3); }
.theme-dark .method-note { background: var(--surface); border-left-color: var(--accent); }

/* Two items side by side (production- vs sales-constrained, upstream vs downstream) */
.method-pair { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.method-pair > .card { gap: var(--space-3); }

/* ---- Ladder: static hierarchy ---- */
.ladder, .ladder ol { list-style: none; margin: 0; padding: 0; }
.prose .ladder { padding-left: 0; }
.ladder ol { padding-left: var(--space-5); border-left: 1px solid var(--line-strong); margin-left: var(--space-3); }
.ladder li + li { margin-top: 0; }
.ladder__level {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--color-pine-tint);
  color: var(--text);
  font-weight: var(--weight-regular);
}
.ladder__level span { color: var(--text-soft); font-weight: var(--weight-light); }
.ladder__level--end { border-left-color: var(--color-dark-green); background: var(--color-lime-tint); }
.ladder__step { display: block; padding: var(--space-2) 0; font-size: var(--text-small); color: var(--text-soft); }

/* ---- Highlighted table cell ---- */
.table .table__cell--key { background: var(--color-pine-tint); }

/* ==========================================================================
   Time Hierarchy cascade
   A 100-column grid. Each block is placed by its data-component. Blocks open
   in place to show a definition; the round buttons hide or show the levels
   below. Without JavaScript every level and definition is simply shown.
   ========================================================================== */
.time-cascade-panel { margin-top: var(--space-6); }
.time-cascade__controls { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.time-cascade__legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: var(--text-small); color: var(--text-soft); }
.time-cascade__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.time-cascade__swatch { inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); flex-shrink: 0; }
.time-cascade__swatch--remaining { background: var(--color-lime); }
.time-cascade__swatch--set-aside { background: var(--color-off-white); border: 2px dashed var(--color-grey); }
.time-cascade__swatch--loss { background: var(--color-grey-fill); }
.time-cascade__swatch--numerator { background: var(--color-lime); box-shadow: inset 0 0 0 3px var(--color-pine); }
.time-cascade__swatch--denominator { background: var(--color-lime); border: 2px dashed var(--color-dark-green); }
.time-cascade__hint { display: none; font-size: var(--text-small); color: var(--text-soft); margin: 0 0 var(--space-2); }

.time-cascade__scroll {
  overflow-x: auto;
  padding: var(--space-6) var(--space-4);
  background: var(--color-off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.time-cascade__scroll:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.time-cascade {
  display: grid;
  grid-template-columns: repeat(100, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--space-2) 0.375rem;
  margin: 0;
  padding: 0;
}
.time-cascade [hidden] { display: none; }

.time-cascade__block {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  min-height: 3.25rem;
  color: var(--color-dark-green);
  transition: box-shadow var(--duration-fast) var(--ease-out), outline-color var(--duration-fast) var(--ease-out);
}
.time-cascade__block--root { background: linear-gradient(135deg, var(--color-pine-deep), var(--color-pine)); color: var(--color-white); }
.time-cascade__block--remaining { background: var(--color-lime); }
.time-cascade__block--set-aside { background: var(--color-off-white); border: 2px dashed var(--color-grey); }
.time-cascade__block--loss { background: var(--color-grey-fill); }

/* The block body: a plain div, or a button when the block has a definition */
.time-cascade__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: inherit;
  inline-size: 100%;
}
button.time-cascade__body { cursor: pointer; }
button.time-cascade__body:hover { box-shadow: var(--shadow-md); }
button.time-cascade__body:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.time-cascade__block--expandable .time-cascade__body { padding-inline: var(--space-7); }

/* Nothing in the graphic below 13px (Toby, 20 October 2026) */
.time-cascade__title { display: block; font-size: 0.9375rem; line-height: 1.25; font-weight: var(--weight-bold); }
.time-cascade__desc { display: block; font-size: var(--text-small); line-height: 1.35; }
.time-cascade__badge {
  display: inline-block;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}
.time-cascade__block--set-aside .time-cascade__badge { background: var(--color-white); border: 1px solid var(--color-dark-green); }
.time-cascade__block--loss .time-cascade__badge { background: var(--color-dark-green); color: var(--color-white); }
.time-cascade__more { display: none; font-size: var(--text-small); text-decoration: underline; text-underline-offset: 2px; }
.js .time-cascade__more { display: block; }
.time-cascade__detail {
  margin: 0 var(--space-2) var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line-strong);
  font-size: var(--text-small);
  line-height: 1.45;
  text-align: left;
}
.time-cascade__detail > * + * { margin-top: var(--space-2); }
.time-cascade__detail p { max-width: none; font-size: inherit; }
.time-cascade__detail ul { padding-left: 1.1em; margin-block: 0; }
.time-cascade__detail li + li { margin-top: 0; }
.time-cascade .nowrap { white-space: nowrap; }

/* Round button: hide or show the levels below a block */
.time-cascade__levels {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  inline-size: 1.75rem;
  block-size: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-pine);
  font: inherit;
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.time-cascade__levels:focus-visible { outline: 3px solid var(--color-dark-green); outline-offset: 2px; }
.time-cascade__block--root .time-cascade__levels:focus-visible { outline-color: var(--color-lime); }

/* "Show me": solid pine ring on the numerator, dashed dark outline on the denominator */
.time-cascade__block.is-numerator { box-shadow: inset 0 0 0 4px var(--color-pine); }
.time-cascade__block.is-denominator { outline: 3px dashed var(--color-dark-green); outline-offset: -8px; }

/* Placement on the 100-column grid, row by row */
.time-cascade__block[data-component="calendar"]      { grid-column: 1 / span 100; grid-row: 1; }
.time-cascade__block[data-component="non-working"]   { grid-column: 1 / span 15;  grid-row: 2 / span 6; }
.time-cascade__block[data-component="shift"]         { grid-column: 16 / span 85; grid-row: 2; }
.time-cascade__block[data-component="schedule-loss"] { grid-column: 16 / span 15; grid-row: 3 / span 5; }
.time-cascade__block[data-component="ppt"]           { grid-column: 31 / span 70; grid-row: 3; }
.time-cascade__block[data-component="planned-dt"]    { grid-column: 31 / span 14; grid-row: 4 / span 4; }
.time-cascade__block[data-component="run"]           { grid-column: 45 / span 56; grid-row: 4 / span 2; }
.time-cascade__block[data-component="updt"]          { grid-column: 45 / span 14; grid-row: 6 / span 2; }
.time-cascade__block[data-component="uptime"]        { grid-column: 59 / span 42; grid-row: 6; }
.time-cascade__block[data-component="ltsr"]          { grid-column: 59 / span 14; grid-row: 7; }
.time-cascade__block[data-component="ltmw"]          { grid-column: 73 / span 14; grid-row: 7; }
.time-cascade__block[data-component="potential"]     { grid-column: 87 / span 14; grid-row: 7; }

/* Below 1024px the diagram keeps its proportions and scrolls sideways */
@media (max-width: 63.99rem) {
  .time-cascade { min-width: 60rem; }
  .time-cascade__hint { display: block; }
}

/* ==========================================================================
   Buffer diagram (Process Control Methodology)
   Three stages and two buffers. Each step is a snapshot the reader moves
   through with Previous and Next. It never plays on its own.
   ========================================================================== */
.buffer-demo {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--color-off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.buffer-demo__caption { font-size: var(--text-small); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--space-4); }
.buffer-demo__track {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}
.prose .buffer-demo__track { padding-left: 0; }
.buffer-demo__track > li + li { margin-top: 0; }
.buffer-demo__stage, .buffer-demo__buffer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1px solid var(--line-strong);
  text-align: center;
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.buffer-demo__name { font-weight: var(--weight-regular); }
.buffer-demo__role, .buffer-demo__status, .buffer-demo__readout { font-size: var(--text-small); color: var(--text-soft); }
.buffer-demo__stage--constraint { border: 2px solid var(--color-pine); }
.buffer-demo__stage[data-state="running"] { background: var(--color-lime-tint); }
.buffer-demo__stage[data-state="matched"] { background: var(--color-white); }
.buffer-demo__stage[data-state="stopped"] { background: var(--color-grey-fill); border-style: dashed; }
.buffer-demo__stage[data-state="stopped"] .buffer-demo__status { color: var(--color-dark-green); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; }

.buffer-demo__bar {
  position: relative;
  block-size: 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  overflow: hidden;
}
.buffer-demo__fill {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--color-pine);
  border-radius: inherit;
  transition: inline-size var(--duration-base) var(--ease-out);
}
.buffer-demo__target { position: absolute; top: 0; bottom: 0; inline-size: 2px; background: var(--color-dark-green); }
.buffer-demo__target--full { left: 80%; }
.buffer-demo__target--empty { left: 20%; }
/* Buffer level in tenths of the bar (one tenth = 5 units on a 50-unit bar) */
.buffer-demo__bar[data-level="0"]  .buffer-demo__fill { inline-size: 0%; }
.buffer-demo__bar[data-level="1"]  .buffer-demo__fill { inline-size: 10%; }
.buffer-demo__bar[data-level="2"]  .buffer-demo__fill { inline-size: 20%; }
.buffer-demo__bar[data-level="3"]  .buffer-demo__fill { inline-size: 30%; }
.buffer-demo__bar[data-level="4"]  .buffer-demo__fill { inline-size: 40%; }
.buffer-demo__bar[data-level="5"]  .buffer-demo__fill { inline-size: 50%; }
.buffer-demo__bar[data-level="6"]  .buffer-demo__fill { inline-size: 60%; }
.buffer-demo__bar[data-level="7"]  .buffer-demo__fill { inline-size: 70%; }
.buffer-demo__bar[data-level="8"]  .buffer-demo__fill { inline-size: 80%; }
.buffer-demo__bar[data-level="9"]  .buffer-demo__fill { inline-size: 90%; }
.buffer-demo__bar[data-level="10"] .buffer-demo__fill { inline-size: 100%; }

.buffer-demo__now { margin-top: var(--space-4); min-height: 3em; color: var(--text); }
.buffer-demo__now strong { font-weight: var(--weight-regular); color: var(--brand); }
.buffer-demo__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.buffer-demo__controls[hidden] { display: none; }
.buffer-demo__steps { margin-top: var(--space-5); padding-left: 1.25em; }
.buffer-demo__footnote { margin-top: var(--space-4); color: var(--text-soft); }
.buffer-demo__steps li { color: var(--text-soft); padding-left: var(--space-1); }
.buffer-demo__steps li[aria-current="step"] { color: var(--text); }
.buffer-demo__steps li[aria-current="step"]::marker { color: var(--brand); font-weight: var(--weight-bold); }
.buffer-demo__steps strong { color: var(--text); font-weight: var(--weight-regular); }

/* Phones: stack the line top to bottom */
@media (max-width: 47.99rem) {
  .buffer-demo__track { grid-template-columns: 1fr; }
}

/* Back link under the "More on how we work" cards */
.method-back { margin-top: var(--space-7); }