/* ==========================================================================
   Lock In AI, landing page. Direction C: SYSTEMBLATT.
   A technical data sheet. Rules of this language:
     monospace for every label, number and time, sans for running text
     dotted leaders between parameter and value
     a margin number per section, like a document
     large figures instead of claims
     the two real assets framed as numbered figures
     no rounded corners, no shadows, no glow, no cards
   Structural device: the 5 x 8 lattice, 40 hours, is the progress rail for the
   week; the week itself is a real timetable, 4 time bands across 5 days.

   Type floor, decided with the client in round three: 14px is the smallest
   size anywhere on the page, at any width. On desktop the times, fine print
   and spec values step to 15/16px and the timetable cells to 17px, which is
   the scale the client signed off after "font on desktop is too small". The
   desktop block is the last thing in this file on purpose: every value in it
   overrides a rule above.
   ========================================================================== */

:root {
  --paper: #FFFFFF;
  --band: #F4F5F6;
  --ink: #101012;
  --soft: #4A4C52;
  --dot: #A8AAAE;
  --rule: #101012;
  --accent: #1854B4;
  --ok: #157347;
  --err: #B3261E;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --col: 76rem;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem / 1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: var(--gut); }
.mono, .m { font-family: var(--mono); }

.cap {
  font: 500 0.875rem / 1.5 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--soft);
  display: inline-block;
}
.cap--ink { color: var(--ink); }
.cap--accent { color: var(--accent); }
.cap--ok { color: var(--ok); }

h1, h2, h3 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.12; }
p { margin: 0; max-width: 62ch; }
p + p { margin-top: 1rem; }
a { color: inherit; }
img { max-width: 100%; }
strong, b { font-weight: 600; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0; top: 0; background: var(--accent); color: #fff; padding: 0.8rem 1rem; z-index: 40; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* document head, like the head of a spec sheet ---------------------------- */
.doc {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
  padding-block: 1.5rem 1rem;
  border-bottom: 2px solid var(--rule);
}
.doc__title { font: 600 1.25rem / 1 var(--mono); letter-spacing: -0.01em; }
.doc__meta { text-align: right; display: grid; gap: 0.3rem; }
/* the language switch is a control, so it carries a real target even though it
   sits in a mono meta row */
.doc__meta a { text-decoration: underline; text-underline-offset: 0.2em; display: inline-block; padding: 0.55rem 0.35rem; }

/* every section is a numbered row: margin number, then content ------------ */
.page { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.marg {
  font: 600 0.875rem / 1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--soft);
  padding-top: 0.55rem;
}
.marg--accent { color: var(--accent); }
.sec { padding-block: clamp(3rem, 6vw, 5rem); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

h2 {
  margin: 0 0 1.25rem;
  font: 600 clamp(1.5rem, 2.6vw, 2.05rem) / 1.18 var(--mono);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede { margin-bottom: 2rem; max-width: 68ch; }

/* hero: title block ------------------------------------------------------- */
.hero { padding-block: clamp(1.5rem, 5vw, 4rem) 0; }
.hero h1 {
  margin: 1rem 0 1.75rem;
  font: 600 clamp(2.05rem, 4.6vw, 3.4rem) / 1.08 var(--mono);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero h1 span { color: var(--soft); }
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero__act { display: flex; flex-direction: column; }

/* figures row: the numbers carry the claim -------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
.figures div { padding: 1.5rem 1.25rem 1.35rem; border-left: 1px dotted var(--dot); }
.figures div:first-child { border-left: 0; padding-left: 0; }
.figures b {
  display: block;
  font: 600 clamp(2.1rem, 4vw, 3.2rem) / 1 var(--mono);
  letter-spacing: -0.04em;
  margin-bottom: 0.6rem;
}
.figures .cap { letter-spacing: 0.1em; }

/* dotted leader rows: label, dots, value --------------------------------- */
dl.spec { margin: 0; display: grid; }
dl.spec div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px dotted var(--dot);
}
dl.spec dt {
  flex: none;
  min-width: 9rem;
  font: 500 0.875rem / 1.6 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}
.lead {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--dot);
  transform: translateY(-0.26em);
  min-width: 1.5rem;
  align-self: flex-end;
}
dl.spec dd { flex: 0 1 auto; margin: 0; font: 400 0.9375rem / 1.6 var(--mono); text-align: right; }
dl.spec dd b { font-weight: 600; }
dl.spec div:last-child { border-bottom: 2px solid var(--rule); }

.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.spec-grid dl.spec { border-bottom: 2px solid var(--rule); }
.spec-grid dl.spec div:last-child { border-bottom: 1px dotted var(--dot); }

/* section 01: the measured numbers as bars ------------------------------ *
   The bar layout is the one the client preferred in the earlier build, kept
   and dressed in this page's language: mono scale and values, hairlines, square
   ends, the brand blue. The bars grow once when the figure arrives. */
.chart { margin: 0; display: grid; gap: 0.85rem; border-top: 2px solid var(--rule); padding-top: 1.5rem; }
.chart__group { margin: 0.85rem 0 0.1rem; font: 600 0.875rem / 1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.chart__group:first-of-type { margin-top: 0; }
.chart__scale {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr) 5rem;
  gap: 0.9rem;
  font: 500 0.875rem / 1 var(--mono);
  color: var(--soft);
  padding-bottom: 0.4rem;
  border-bottom: 1px dotted var(--dot);
}
.chart__scale span:last-child { text-align: right; }
.chart__row { display: grid; grid-template-columns: 20rem minmax(0, 1fr) 5rem; gap: 0.9rem; align-items: center; }
.chart__label { font: 400 1rem / 1.45 var(--sans); }
.chart__label b { font-weight: 600; }
.chart__track { height: 0.85rem; background: var(--band); border: 1px solid var(--dot); }
.chart__bar { height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); }
.is-in .chart__bar { transform: scaleX(1); transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.24, 1); }
.chart__row--flag .chart__bar { background: #2565CC; }
.chart__val { font: 600 1rem / 1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.chart figcaption {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dotted var(--dot);
  font: 400 0.875rem / 1.65 var(--mono);
  color: var(--soft);
  max-width: 78ch;
}

/* the week's measure: five vertical day bars, eight hours each ----------- *
   The client read the horizontal 5 x 8 grid as not working: it scrolled out of
   view before it filled, so the movement happened where nobody was looking.
   Same 40 hours, transposed to vertical bars that stay pinned (position:
   sticky) while the five day blocks scroll under them, and the fill runs down
   the bars, day by day, so it tracks the reader the whole way. */
.railbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 2px solid var(--rule);
  margin: 1.75rem 0 0;
  padding: 1rem 0 0.75rem;
}
.railbar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.railbar__total { font: 600 0.9375rem / 1 var(--mono); }
.railbar__grid { display: grid; grid-template-columns: 1.7rem repeat(5, minmax(0, 1fr)); gap: 0 0.5rem; }
.railbar__col { display: grid; grid-template-rows: auto repeat(8, 0.6rem); gap: 0.25rem; }
.railbar__col:first-child { grid-template-columns: minmax(0, 1fr); }
.railbar__label,
.railbar__scale {
  font: 500 0.875rem / 1.4 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--soft);
  align-self: end;
}
.railbar__label { color: var(--accent); font-weight: 600; }
.railbar__scale { text-align: right; padding-right: 0.1rem; }
.railbar__cell {
  border: 1px solid var(--dot);
  background: var(--band);
  transition: background-color 0.45s ease-out, border-color 0.45s ease-out;
}
.railbar__cell.is-lit { background: var(--accent); border-color: var(--accent); }
.railbar__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* the week, day by day: a topic breakdown, no time bands --------------- *
   The times are not decided yet, so the page shows the sequence, not a
   schedule. Each day: its theme, its topics, and what exists at the end. */
.days { border-top: 2px solid var(--rule); margin-top: 1.25rem; }
.day {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.5rem 0;
  border-bottom: 1px dotted var(--dot);
}
.day:last-child { border-bottom: 2px solid var(--rule); }
.day__label { font: 600 0.875rem / 1.4 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.day__t { display: block; margin-top: 0.5rem; font: 600 1.0625rem / 1.35 var(--mono); letter-spacing: -0.01em; }
.day ul { list-style: none; margin: 0; padding: 0; }
.day ul li { padding: 0.6rem 0; border-bottom: 1px dotted var(--dot); max-width: 62ch; }
.day ul li:first-child { padding-top: 0; }
.day ul li:last-child { border-bottom: 0; }
.day__out { margin-top: 0.6rem; font: 500 0.9375rem / 1.55 var(--mono); }
.day__out .cap { margin-right: 0.6rem; }

/* the timetable, kept ready for the day the times are fixed. The markup that
   used it (four time bands across five day columns) is in git on the previous
   commit; nothing on the page references these rules today. -------------- */
.scroll { overflow-x: auto; padding-bottom: 0.5rem; }
table.tt { width: 100%; min-width: 58rem; border-collapse: collapse; }
table.tt th, table.tt td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.1rem 1rem 0;
  border-bottom: 1px dotted var(--dot);
}
table.tt thead th { border-bottom: 2px solid var(--rule); padding-bottom: 0.85rem; }
table.tt thead .time { font: 500 0.875rem / 1.5 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--soft); }
table.tt thead .day { display: block; font: 600 1rem / 1.3 var(--mono); }
table.tt thead .day span { display: block; margin-top: 0.35rem; font: 400 0.875rem / 1.4 var(--sans); color: var(--soft); letter-spacing: 0; text-transform: none; }
table.tt tbody th { font: 600 0.9375rem / 1.5 var(--mono); white-space: nowrap; padding-right: 1.25rem; }
table.tt td { font-size: 0.9375rem; max-width: 15rem; }
table.tt tr.result th, table.tt tr.result td { border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); font-weight: 500; }
table.tt tbody tr:nth-child(4) th, table.tt tbody tr:nth-child(4) td { border-bottom: 0; }
table.tt tr.result .cap { color: var(--accent); }

/* figures: the real assets, framed and numbered --------------------------- */
figure.fig { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 0.9rem; border-top: 2px solid var(--rule); }
figure.fig img { width: 100%; height: auto; display: block; border: 1px solid var(--dot); }
figure.fig figcaption { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; padding-top: 0.75rem; }
figure.fig figcaption span:last-child { max-width: 70ch; letter-spacing: 0.03em; text-transform: none; }
.fig--flush { margin: 0; padding-top: 0; border-top: 0; }
.fig--wide { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* the room band ----------------------------------------------------------- */
.band { background: var(--band); padding-block: clamp(2.5rem, 5vw, 4rem); }
.band__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.band img { width: 100%; height: auto; display: block; border: 1px solid var(--dot); }
/* Abb. 2 is a portrait frame; at 4:3 it stops driving the height of the split and
   the text beside it is not left hanging over half an empty column. */
.band .fig--flush img { aspect-ratio: 4 / 3; object-fit: cover; }

/* for whom --------------------------------------------------------------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
h3.spec-head {
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--rule);
  font: 600 0.875rem / 1.4 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
h3.spec-head--ok { border-color: var(--ok); color: var(--ok); }
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2rem;
  border-bottom: 1px dotted var(--dot);
}
ul.rows li:last-child { border-bottom: 0; }
ul.rows li::before {
  position: absolute;
  left: 0;
  font: 600 0.9375rem / 1.6 var(--mono);
  color: var(--accent);
}
ul.rows--yes li::before { content: "\2713"; color: var(--ok); }
ul.rows--no li::before { content: "\00D7"; color: var(--soft); }

/* actions ----------------------------------------------------------------- */
.cta { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.75rem; }
.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font: 600 0.9375rem / 1 var(--mono);
  letter-spacing: 0.04em;
  padding: 1.05rem 1.35rem;
  text-decoration: none;
  border: 1px solid var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.link {
  font: 500 0.875rem / 1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.3rem;
}
.link:hover { color: var(--accent); border-color: var(--accent); }

/* questions ------------------------------------------------------------- */
.faq { border-top: 2px solid var(--rule); }
.faq details { border-bottom: 1px dotted var(--dot); }
.faq summary {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 2rem;
  gap: 1rem;
  align-items: baseline;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .n { font: 500 0.875rem / 1.6 var(--mono); color: var(--soft); }
.faq summary .q { font: 600 1.0625rem / 1.5 var(--mono); }
.faq summary .ic { font: 400 1.25rem / 1 var(--mono); color: var(--accent); text-align: right; }
.faq summary .ic::before { content: "+"; }
.faq details[open] summary .ic::before { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px dotted var(--dot); }
.faq__a { padding: 1rem 0 1.35rem 4rem; max-width: 70ch; }

/* booking + the one field ------------------------------------------------ */
.book__split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
ol.steps { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: s; }
ol.steps li {
  counter-increment: s;
  position: relative;
  padding: 0.8rem 0 0.8rem 2.4rem;
  border-bottom: 1px dotted var(--dot);
}
ol.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  font: 600 0.875rem / 1.7 var(--mono);
  color: var(--soft);
}
.ask { background: var(--band); border: 1px solid var(--ink); padding: 1.5rem; }
.ask h3 { margin: 0 0 0.65rem; font: 600 1.0625rem / 1.4 var(--mono); }
.ask p { margin-bottom: 1.25rem; }
.ask form { display: grid; gap: 0.6rem; }
.ask label { font: 500 0.875rem / 1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.ask input[type="email"] {
  font: 400 1rem / 1 var(--mono);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 1rem;
  min-height: 3.2rem;
  width: 100%;
}
.ask input[type="email"]::placeholder { color: var(--soft); }
.ask input[type="email"]:focus { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: 1px; }
.ask .btn { width: 100%; text-align: center; }
.form__status { font: 500 0.875rem / 1.5 var(--mono); color: var(--soft); min-height: 1.2rem; }
.form__status[data-state="ok"] { color: var(--ok); }
.form__status[data-state="err"] { color: var(--err); }
.fine { font: 400 0.875rem / 1.5 var(--mono); color: var(--soft); }
/* Honeypot: in the markup for a bot to fill, out of sight and out of the tab
   order for a person. The function answers a filled one like a success. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* footer ----------------------------------------------------------------- */
footer { padding-block: 2rem 4rem; }
.foot { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; padding-top: 1.5rem; }
.foot nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.foot a { text-underline-offset: 0.22em; text-decoration: underline; }
.foot a:hover { color: var(--accent); }

/* mobile action bar: the same block, where a thumb reaches it, but only once the
   hero has passed the viewport (app.js toggles is-visible). Shown from the top of
   the page it would sit on the hero's own button and hide it. */
.sticky { display: none; }
@media (max-width: 62rem) {
  .sticky.is-visible {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    background: var(--paper);
    border-top: 2px solid var(--rule);
    padding: 0.7rem var(--gut);
  }
  .sticky .btn { display: block; width: 100%; text-align: center; }
  body { padding-bottom: 5.5rem; }
  .hero__split, .band__split, .book__split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 52rem) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding-block: 0.9rem 0.7rem; }
  /* the three meta lines read as two rows on a phone: the date and the language
     switch share one, so the fold is not spent on the masthead */
  .doc__meta { text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.1rem; }
  .page { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .marg { padding-top: 0; }
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.spec dt { min-width: 0; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures div:nth-child(3) { border-left: 0; padding-left: 0; }
  .figures div:nth-child(3), .figures div:nth-child(4) { border-top: 1px dotted var(--dot); }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .faq summary { grid-template-columns: 2.4rem minmax(0, 1fr) 1.5rem; gap: 0.6rem; }
  .faq__a { padding-left: 0; }
  dl.spec div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .lead { display: none; }
  dl.spec dd { text-align: left; }
  table.tt { min-width: 52rem; }
  .day { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .railbar { padding: 0.8rem 0 0.6rem; margin-top: 1.25rem; }
  .railbar__head { margin-bottom: 0.45rem; }
  .railbar__head .cap { display: none; }
  .railbar__grid { grid-template-columns: 1.35rem repeat(5, minmax(0, 1fr)); gap: 0 0.3rem; }
  .railbar__col { grid-template-rows: auto repeat(8, 0.45rem); gap: 0.2rem; }
  .railbar__label,
  .railbar__scale { font-size: 0.875rem; letter-spacing: 0.04em; }
  .chart__scale { display: none; }
  .chart__row { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .chart__label { grid-column: 1 / -1; }
  .chart { gap: 0.6rem; }
}

/* desktop scale, the one the client signed off ---------------------------- *
   Same design, one step up where the page is read at 1440: the timetable
   cells and the spec values grow, the mono floor stays 14px. Everything here
   overrides a rule above, so the block stays last. */
@media (min-width: 64rem) {
  table.tt td { font-size: 1.0625rem; line-height: 1.55; max-width: 16rem; }
  table.tt tbody th { font-size: 1rem; }
  table.tt thead .day { font-size: 1.0625rem; }
  table.tt thead .time,
  table.tt thead .day span,
  .form__status,
  .fine { font-size: 0.9375rem; }
  dl.spec dd { font-size: 1rem; }
  .day ul li { font-size: 1.0625rem; line-height: 1.55; }
  .chart__label,
  .chart__val { font-size: 1.0625rem; }
  .railbar__total,
  .day__out { font-size: 1rem; }
  .figures .cap { font-size: 0.875rem; }
  .btn { font-size: 1rem; }
  .faq summary .q { font-size: 1.125rem; }
  .ask input[type="email"] { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .chart__bar { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   The system figure (Abb. 1 / Fig. 1): the page's main figure, drawn as page
   code rather than photographed. It shows the system the week builds, with the
   workflow tool as one layer of seven. Same language as the rest of the sheet:
   hairline rules, mono labels, the accent on the path that is live. Nothing in
   here is below the 14px floor.
   -------------------------------------------------------------------------- */
.fig--sys { margin: 2.5rem 0 0; }
.sys { border-top: 2px solid var(--rule); }
.sys__head {
  display: flex; gap: 1.25rem; align-items: baseline; flex-wrap: wrap;
  padding: .75rem 0; border-bottom: 1px solid var(--rule);
}
.sys__headnote { margin-left: auto; }
.sys__flow {
  display: grid;
  grid-template-columns: minmax(0, .9fr) 1.5rem minmax(0, 1.5fr) 1.5rem minmax(0, 1fr) 1.5rem minmax(0, .9fr);
  align-items: start;
  padding: 1.5rem 0 1.25rem;
  border-bottom: 1px solid var(--dot);
}
.sys__colhead {
  font: 500 .875rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); padding-bottom: .625rem; margin-bottom: .625rem;
  border-bottom: 1px solid var(--dot);
}
.sys__item { padding: .4375rem 0; border-bottom: 1px dotted var(--dot); font-size: .9375rem; }
.sys__item:last-child { border-bottom: 0; }
.sys__item b { font-weight: 600; }
.sys__tag {
  display: inline-block; font: 500 .875rem/1 var(--mono); letter-spacing: .1em;
  color: var(--soft); border: 1px solid var(--dot); padding: .1875rem .3125rem;
  margin-left: .375rem; vertical-align: .125rem;
}
.sys__arrow { display: grid; place-items: center; align-self: start; padding-top: 2.4rem; font: 400 1rem/1 var(--mono); color: var(--dot); }

/* the subject: the agent, and the four facts that keep it controllable */
.sys__agent { border: 2px solid var(--ink); background: var(--band); padding: 1rem 1.125rem 1.125rem; }
.sys__agentname {
  font: 600 1rem/1.3 var(--mono); padding-bottom: .75rem; margin-bottom: .75rem;
  border-bottom: 1px solid var(--dot);
}
.sys__agentname span { color: var(--soft); font-weight: 400; }
.sys__rows { margin: 0; }
.sys__row {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px dotted var(--dot);
}
.sys__row:last-child { border-bottom: 0; }
.sys__row dt {
  font: 500 .875rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft);
}
.sys__row dd { margin: 0; font-size: .9375rem; }
.sys__tools { display: flex; flex-wrap: wrap; gap: .375rem; }
.sys__tool {
  font: 500 .875rem/1 var(--mono); border: 1px solid var(--ink); background: var(--paper);
  padding: .3125rem .4375rem;
}
.sys__neg { color: var(--soft); }
.sys__rail { border-left: 2px solid var(--accent); padding-left: .875rem; }

.sys__chain {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .75rem; align-items: center;
  padding: .875rem 0; border-bottom: 1px solid var(--dot);
}
.sys__nodes { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sys__node { border: 1px solid var(--ink); padding: .5rem .625rem; font: 600 .875rem/1.3 var(--mono); }
.sys__node--human { border-style: dotted; color: var(--soft); font-weight: 500; }

.sys__layers { padding: 1.125rem 0 .25rem; }
.sys__layers > .cap { display: block; margin-bottom: .625rem; }
.sys__layer {
  display: grid; grid-template-columns: 2rem 12rem minmax(0, 1fr); gap: .75rem; align-items: baseline;
  padding: .5625rem 0; border-bottom: 1px dotted var(--dot);
}
.sys__layer:last-child { border-bottom: 2px solid var(--rule); }
.sys__layer .n { font: 500 .875rem/1.5 var(--mono); color: var(--soft); }
.sys__layer .l { font: 600 .9375rem/1.4 var(--mono); }
.sys__layer .d { font-size: .9375rem; }
.sys__layer--here .l { color: var(--accent); }
.sys__foot { padding-top: .75rem; }

/* the demoted real capture: one layer of the figure, kept real, sized like evidence */
.fig--canvas { margin-top: 2.25rem; }
.fig--canvas img { max-width: 48rem; }

/* --------------------------------------------------------------------------
   Title-block figure, second pass: the picture carries the system, the detail
   sits behind one control. The image is a drawn schematic (no lettering), and
   the reading order - inputs, agent, controls, outputs, layers - lives in the
   modal below it, one segment per part.
   -------------------------------------------------------------------------- */
.fig--sysimg { margin: 2.5rem 0 0; }
.fig--sysimg img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--dot); background: var(--paper);
}
.sysbar { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; margin-top: .875rem; }
.sysbar .cap { flex: 1 1 20rem; }
.sys-open {
  font: 500 .9375rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 1px solid var(--ink);
  padding: .6875rem .875rem; cursor: pointer;
}
.sys-open:hover { background: var(--band); }
.sys-open::after { content: " +"; color: var(--accent); }

dialog.sysmodal {
  max-width: 54rem; width: calc(100% - 2rem); max-height: 88vh; margin: auto; padding: 0;
  border: 2px solid var(--rule); background: var(--paper); color: var(--ink);
}
dialog.sysmodal::backdrop { background: rgba(16, 16, 18, .45); }
.sysmodal__head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.125rem 1.25rem; border-bottom: 2px solid var(--rule);
}
.sysmodal__close {
  margin-left: auto; font: 500 .9375rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 1px solid var(--ink);
  padding: .5rem .625rem; cursor: pointer;
}
.sysmodal__close:hover { background: var(--band); }
.sysmodal__body { padding: 0 1.25rem 1.25rem; overflow: auto; max-height: calc(88vh - 5.5rem); }
.systabs { display: flex; flex-wrap: wrap; margin: 0 0 1.25rem; border-bottom: 1px solid var(--dot); }
.systab {
  font: 500 .9375rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .875rem .75rem .6875rem; color: var(--soft); cursor: pointer;
}
.systab:hover { color: var(--ink); }
.systab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.syspanel[hidden] { display: none; }
.syspanel > .sys__colhead { margin-top: 0; }

/* Without JavaScript the trigger disappears and the content simply reads inline. */
html:not(.js) .sys-open { display: none; }
html:not(.js) dialog.sysmodal {
  display: block; position: static; width: auto; max-width: none; max-height: none; border: 0;
}
html:not(.js) .sysmodal__body { max-height: none; overflow: visible; }
html:not(.js) .sysmodal__close { display: none; }
html:not(.js) .syspanel[hidden] { display: block; }
html:not(.js) .systabs { display: none; }

@media (max-width: 60rem) {
  .sys__flow { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .sys__arrow { display: none; }
  .sys__row { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
  .sys__chain { grid-template-columns: minmax(0, 1fr); }
  .sys__layer { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .sys__layer .d { grid-column: 1 / -1; }
  .fig--canvas img { max-width: 100%; }
  dialog.sysmodal { width: calc(100% - 1rem); }
  .sysmodal__body { padding: 0 .875rem .875rem; }
  .systab { padding: .75rem .5rem .625rem; }
}