/* =============================================================================
   FACTORY - FIG. 03 in the rail: the workbench as a production line.
   Drawn by js/factory.js; see the comment at the top of that file.

   Only under `html.rail.fac`, which js/factory.js sets when the desktop rail
   runs and the scene was built. Anywhere else the block is `display: none`
   and the page keeps the printer station and its nomenclature.

   The approved mockup (folio-audit/maq-usine) is the reference for every
   value here; the class names carry a `fac-` prefix so none of them can meet
   a rule of the site (`.rail`, `.grid`, `.card`, `.step` all exist or could).
   ============================================================================= */

.factory { display: none; }

html.rail.fac .factory {
  /* X-ray inspection: the only non-DNA colour, confined to the radiograph
     plate, the beam and the LEDs */
  --xr-plate: #0f1c26;
  --xr-line: #8fd3e2;
  --xr-hi: #dff8ff;
  --xr-beam: #3fb8cc;
  --red: #b3241f;

  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-body);
  /* the mockup's body line-height: the stage label and the cartouche are
     measured against it (every block that needs its own sets it) */
  line-height: normal;
  pointer-events: none;
}

/* Painted only while the rail is inside the factory's steps. */
html.rail.fac .factory:not(.is-on) { visibility: hidden; }
html.rail.fac .factory:not(.is-on) * { animation-play-state: paused; }

/* The nomenclature is on the line now (Felix, 27/09): out of the page on
   desktop. On a phone the rail does not run and it stays exactly as it was. */
html.rail.fac .rail-out[data-out="nomen"] { display: none; }

/* ---------- paper, grid, vignette ----------

   The paper comes in with the arrival, over the giant number of the panel,
   which js/factory.js fades out at the same time. Every layer that fades
   during the arrival is promoted for its length only (`is-arriving`), so the
   fades are compositor work and the only thing re-rasterised per frame is
   the drawing tracing itself. */
.factory .fac-paper {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}
.factory.is-arriving .fac-paper,
.factory.is-arriving .fac-vig,
.factory.is-arriving .fac-foot,
.factory.is-arriving .fac-head-bg,
.factory.is-arriving .fac-head-in,
.factory.is-arriving .fac-cart { will-change: opacity; }
html.rail.fac .rail-panel[data-panel="workbench"].fac-arriving > .poste-header.is-scene { will-change: opacity; }

.factory .fac-grid {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--line) 35%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 35%, transparent) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
}
/* promoted only while the scene is painted */
.factory.is-on .fac-grid { will-change: transform; }

/* The grid fades into the paper at the bottom of the stage: when the rail
   scrolls away, the stage leaves on paper and not on a cut grid line. Under
   the drawing (the SVG is z-index 1), over the grid; it comes in with the
   paper. */
.factory .fac-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16vh;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 85%);
}

.factory .fac-vig {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 52%, transparent 55%, var(--paper) 100%);
}

/* ---------- the drawing ---------- */

.factory svg.fac-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--brass);
  z-index: 1;
  mix-blend-mode: multiply;
  overflow: hidden;
  /* nothing in the drawing is interactive (the cards and the nav are HTML):
     no hit test of the SVG under the wheel on every scroll frame */
  pointer-events: none;
}
.factory svg.fac-world * { vector-effect: non-scaling-stroke; }
/* macro hatches: tiles are rasterised in pattern space, so their strokes are in user units */
.factory svg.fac-world pattern[id$="M"] *,
.factory svg.fac-world pattern[id$="B"] *,
.factory svg.fac-world pattern[id$="P"] *,
.factory svg.fac-world marker[id$="M"] * { vector-effect: none; }
.factory svg.fac-world text { vector-effect: none; font-family: var(--font-mono); fill: currentColor; stroke: none; }
.factory .fac-ann text { font-size: 10px; letter-spacing: .12em; }

/* ---------- opening head: the station's cartouche, compact ---------- */

/* Compact: the tooling added under the lede must stay clear of the macro's
   nozzle and melt (left of the frame's centre), so the block starts a little
   higher than the mockup's two lines did and the lede keeps to two lines. */
.factory .fac-head {
  position: absolute;
  left: 5vw;
  top: 5.5vh;
  z-index: 4;
  width: min(31vw, 600px);
}
.factory .fac-head-in { opacity: 0; }
/* paper backing: whatever part of the drawing passes under the head fades
   out like the vignette. Its own layer with its own fade (js/factory.js): it
   washes the macro before the text comes in over it. */
.factory .fac-head-bg {
  position: absolute;
  z-index: -1;
  left: -5vw;
  top: -8vh;
  right: -110px;
  bottom: -26px;
  pointer-events: none;
  background: var(--paper);
  opacity: 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 140px), transparent), linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 calc(100% - 140px), transparent), linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  mask-composite: intersect;
}
.factory .fac-eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--poste-accent, var(--atelier));
}
.factory .fac-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 4.8vw, 84px);
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--ink);
  white-space: nowrap;
}
.factory .fac-lede {
  margin: 1rem 0 0;
  font-size: clamp(15px, 0.95vw, 17px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.factory .fac-tools {
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}
.factory .fac-tools-label {
  margin: 0 0 .45rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--poste-accent, var(--atelier));
}
.factory .fac-tools ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .28rem .36rem;
}
.factory .fac-tools li {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--poste-accent, var(--atelier)) 22%, var(--line));
  border-radius: 999px;
  padding: .16rem .52rem;
  background: color-mix(in srgb, var(--poste-accent, var(--atelier)) 4%, var(--card));
  white-space: nowrap;
}
/* A wide screen: the five tools on one row, clear of the nozzle below. */
@media (min-width: 1700px) {
  .factory .fac-tools ul { flex-wrap: nowrap; }
}

/* ---------- stage label ---------- */

.factory .fac-step {
  position: absolute;
  left: 5vw;
  top: 8vh;
  z-index: 4;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--atelier);
  opacity: 0;
}
.factory .fac-step::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5vw;
  top: -8vh;
  right: -130px;
  bottom: -44px;
  pointer-events: none;
  background: var(--paper);
  opacity: .97;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 100px), transparent), linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 calc(100% - 100px), transparent), linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  mask-composite: intersect;
}
.factory .fac-step .n { display: block; font-size: 12px; letter-spacing: .18em; color: var(--brass); margin-bottom: .5rem; }
.factory .fac-step .t { display: block; font-family: var(--font-display); font-weight: 800; text-transform: none; font-size: clamp(28px, 2.6vw, 42px); letter-spacing: -.015em; color: var(--ink); }
.factory .fac-bars { display: flex; gap: 6px; margin-top: .9rem; }
.factory .fac-bars i {
  width: 26px;
  height: 2px;
  background: var(--line);
  transform-origin: left center;
  transition: background-color .35s ease, transform .35s ease;
  transform: scaleX(.55);
}
.factory .fac-bars i.on { background: var(--brass); transform: scaleX(1); }

/* ---------- cartouche ---------- */

.factory .fac-cart {
  position: absolute;
  right: 4vw;
  bottom: 6vh;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--brass);
  border: 1px solid currentColor;
  display: grid;
  grid-template-columns: auto auto auto;
  opacity: 0;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
}
.factory .fac-cart b { grid-column: 1 / -1; padding: 6px 10px; border-bottom: 1px solid currentColor; font-weight: 500; }
.factory .fac-cart span { padding: 5px 10px; border-right: 1px solid currentColor; }
.factory .fac-cart span:last-child { border-right: 0; }

/* ---------- datasheet card ---------- */

.factory .fac-card {
  position: absolute;
  right: 5vw;
  top: 50%;
  width: min(30vw, 500px);
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
}
/* shown by a class, never by an inline `visible`: a hidden scene or an away
   panel always wins over its cards */
.factory .fac-card.shown { visibility: inherit; }
.factory .fac-card.on { pointer-events: auto; }
.factory .fac-card-ref {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--atelier);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--brass);
  padding-bottom: .6rem;
}
.factory .fac-card-ref b { color: var(--brass); font-weight: 500; }
.factory .fac-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 5.6vw, 96px);
  line-height: .9;
  letter-spacing: -.03em;
  margin: 1.1rem 0 .4rem;
  color: var(--ink);
}
.factory .fac-card-sub { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--brass); margin: 0 0 1.1rem; }
.factory .fac-card-lede { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 1.4rem; max-width: 44ch; text-wrap: pretty; }
.factory .fac-card dl { display: grid; grid-template-columns: 7.5rem 1fr; margin: 0 0 1.5rem; border-top: 1px solid var(--line); font-size: 14px; }
.factory .fac-card dt,
.factory .fac-card dd { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.factory .fac-card dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding-top: .7rem; }
.factory .fac-card dd { color: var(--ink); }
.factory .fac-card dd.ok::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: .5em; vertical-align: 1px; }
.factory .fac-card button {
  font: 500 14px var(--font-body);
  padding: 13px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.factory .fac-card button:hover { background: var(--paper); color: var(--ink); }
.factory .fac-card button:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; }
.factory .fac-card button span { font-family: var(--font-mono); margin-left: 10px; }

/* A shorter desktop window: the head tightens so it stays above the macro's
   nozzle and melt (js/factory.js also lowers the nozzle a little if it has to,
   see `measureBox`), and the card so it never runs off the panel. */
@media (max-height: 860px) {
  .factory .fac-eyebrow { font-size: 11px; margin-bottom: .5rem; }
  .factory .fac-title { font-size: clamp(40px, 6.6vh, 72px); }
  .factory .fac-lede { font-size: 14px; line-height: 1.4; margin-top: .65rem; }
  .factory .fac-tools { margin-top: .6rem; padding-top: .5rem; }
  .factory .fac-tools-label { font-size: .6rem; margin-bottom: .35rem; }
  .factory .fac-tools li { font-size: .58rem; padding: .12rem .46rem; }
}
@media (max-height: 800px) {
  .factory .fac-head { top: 4vh; }
}
@media (max-height: 820px) {
  .factory .fac-card h3 { font-size: clamp(40px, 4.4vw, 72px); margin-top: .8rem; }
  .factory .fac-card-lede { font-size: 15px; margin-bottom: 1rem; }
  .factory .fac-card dl { margin-bottom: 1rem; }
  .factory .fac-card dt, .factory .fac-card dd { padding: .4rem 0; }
  .factory .fac-lede { margin-top: .8rem; }
}

/* ---------- the panel under the scene ----------

   The drawing is multiplied onto what lies under it, as in the mockup where
   it sat on the paper of its own stage: the white sheets of the detail views
   and of the macro's title plate vanish on paper and on the giant number
   alike. So the factory layer creates no stacking context of its own
   (no z-index, no opacity, no transform on `.factory` itself), and the
   station header under it is kept an isolated group at the same level, so
   its own layers (figure z-index 1) never climb over the factory. */
html.rail.fac .rail-panel[data-panel="workbench"] > .poste-header.is-scene { z-index: auto; isolation: isolate; }

/* A narrow desktop window (the rail runs from 761 px): the card keeps its
   column but tightens, so it never runs into the cartouche. */
@media (max-width: 1100px) {
  /* the head gets the width the card column does not need on the opening
     frame, so the tooling keeps to two rows above the nozzle */
  .factory .fac-head { width: 42vw; }
  .factory .fac-card { width: 38vw; right: 4vw; }
  .factory .fac-card-ref { font-size: 10px; letter-spacing: .1em; }
  .factory .fac-card h3 { font-size: clamp(34px, 4.6vw, 52px); margin: .7rem 0 .3rem; }
  .factory .fac-card-sub { font-size: 16px; margin-bottom: .7rem; }
  .factory .fac-card-lede { font-size: 13.5px; line-height: 1.45; margin-bottom: .8rem; }
  .factory .fac-card dl { grid-template-columns: 5.6rem 1fr; font-size: 12.5px; margin-bottom: .9rem; }
  .factory .fac-card dt, .factory .fac-card dd { padding: .35rem 0; }
  .factory .fac-card dt { font-size: 10px; }
  .factory .fac-card button { font-size: 13px; padding: 10px 14px; }
  /* the camera frames a 16:9 world, so on a narrow window the detail view
     slides under the card: the card carries its own paper, feathered */
  .factory .fac-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -24px -4vw -24px -40px;
    background: var(--paper);
    opacity: .94;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
    mask-image: linear-gradient(to right, transparent, #000 40px);
  }
}

/* ---------- the two sheets, for the keyboard and screen readers ----------

   After the rail (js/factory.js puts it right after the nomenclature's
   place): out of sight until it holds the focus, then a small card pinned to
   the bottom left of the window, so revealing it never moves the page. */
.fac-a11y { display: none; }
html.rail.fac .fac-a11y {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
html.rail.fac .fac-a11y:focus-within {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 14px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
}
.fac-a11y-t {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--atelier);
}
.fac-a11y ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.fac-a11y button {
  font: 500 14px var(--font-body);
  padding: 9px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}
.fac-a11y button:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; }