/* Stage, Construction: the drawing sheet behind the stylised Construction screen.
   Shared stage geometry: a 6 px panel behind the screen, no border, no shadow of its own; the screen keeps its
   frame and shadow. The figure gains padding so the sheet runs past the screen on every side, and the sheet sits
   behind the figure's content inside the figure's own isolation. Only transform and opacity move continuously. */

.st-construction-fig {
  --st-ground: #E2E6E4;   /* drafting paper: the cool blue-grey the owner chose back (15 Oct) */
  --st-ink: #191D1E;      /* text: the site's own ink */
  --st-mid: #474A49;      /* secondary text: the site's own, 6.4 to 1 on the ground */
  --st-line: #2B3236;     /* the drawing: cool drafting ink */
  --st-bl: 20px;   /* how far the sheet runs past the figure, left and right */
  --st-br: 20px;
  --st-pt: 84px;   /* the screen's distance from the sheet's edges */
  --st-pr: 0px;
  --st-pb: 232px;
  --st-pl: 0px;
  --st-mt: 32px;   /* the mark's top */
  --st-radius: 6px;
  position: relative;
  isolation: isolate;
  padding: var(--st-pt) var(--st-pr) var(--st-pb) var(--st-pl) !important;
}
@media (max-width: 719px) { .st-construction-fig { --st-radius: 0px; } }
/* Text column and screen side by side, screen narrow: the sheet takes the gap on the left and a little of the screen. */
@media (min-width: 720px) and (max-width: 1099px) {
  .ni-proof-grid > .st-construction-fig { --st-br: 0px; --st-pr: 16px; }
}

/* ---------------------------------------------------------------- Wide: the sheet spans the whole column */
/* From 1100 px the sheet runs under the copy as well as the screen. The copy and the chapter list stand on it as the
   drawing's notes, in dark ink on the paper; the plan fills the column below them and the title block sits at the
   bottom left. The grid row is as tall as the taller of the two, and the sheet is the whole row, so there is no
   empty column on either side. The script sets how far left the sheet reaches (to the grid's edge); without it the sheet covers the figure. */
@media (min-width: 1100px) {
  .lx-scene-inner.co-builders:has(> .st-construction-fig) { row-gap: 56px !important; }
  .lx-scene-inner > .st-construction-fig, .ni-proof-grid > .st-construction-fig {
    --st-wide: 1;
    --st-bl: 0px; --st-br: 0px; --st-pt: 72px; --st-pr: 40px; --st-pb: 72px; --st-pl: 0px;
    align-self: stretch !important;
  }
  :is(.lx-scene-inner, .ni-proof-grid) > .st-construction-fig > .st-construction .st-mark { left: 44px; top: 66px; }
  :is(.lx-scene-inner, .ni-proof-grid) > .st-construction-fig > .st-construction .st-construction-tb { left: 24px; right: auto; bottom: 16px; }

  /* The notes. Above the sheet (the sheet sits behind the figure, which is later in the page). */
  .st-construction-notes {
    position: relative;
    z-index: 1;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 110px 0 172px 44px !important;
  }
  :is(.st-construction-notes, #st-construction-specific).st-construction-notes,
  :is(.st-construction-notes, #st-construction-specific).st-construction-notes :is(h2, h3, p, a, span, svg) {
    color: var(--st-ink, #191D1E) !important;
    -webkit-text-fill-color: currentColor;
    text-decoration-color: currentColor !important;
    border-color: currentColor !important;
  }
  :is(.st-construction-notes, #st-construction-specific).st-construction-notes :is(.lx-copy, .lx-status, .ni-status) { color: #474A49 !important; }
  :is(.st-construction-notes, #st-construction-specific).st-construction-notes .co-chapters {
    --co-ink: #191D1E;
    --co-mid: #474A49;
    --co-line: rgb(43 50 54 / .26);
    margin-top: 32px;
  }
  :is(.st-construction-notes, #st-construction-specific).st-construction-notes .co-chapters :is(button, .co-chapters-head, span) { color: var(--co-mid) !important; }
  :is(.st-construction-notes, #st-construction-specific).st-construction-notes .co-chapters button:is([aria-pressed="true"], :not(:disabled):hover),
  :is(.st-construction-notes, #st-construction-specific).st-construction-notes .co-chapters button:is([aria-pressed="true"], :not(:disabled):hover) span { color: var(--co-ink) !important; }

  /* The window, shorter: every view is trimmed to the same height, so the cycling never changes it. */
  .st-construction-fig .cd-rail ol > li:nth-child(n + 7) { display: none !important; }
  .st-construction-fig .cd-rail ol::after { content: "+ 10 more folders"; display: block; padding: 6px 0 0 1px; font: 500 11px/1.3 Manrope, Arial, sans-serif; color: #5d6b79; }
  .st-construction-fig .cd-sheet dl > div:nth-child(n + 5):nth-child(-n + 6) { display: none !important; }
  .st-construction-fig .cd-person > div:last-child { display: none !important; }
  .st-construction-fig .cd-stage > p { display: none !important; }
  .st-construction-fig .cd-person header > span::after { content: " tasks"; }
  .st-construction-fig .cd-file:nth-of-type(n + 3) { display: none !important; }
}

/* The screen's own caption and time line now sit on the sheet, on light and dark pages alike. */
.st-construction-fig.co-screen, .ni-dark .st-construction-fig.co-screen {
  --co-ink: #191D1E;
  --co-mid: #474A49;
  --co-line: rgb(43 50 54 / .22);
}
.st-construction-fig > figcaption, body :is(.st-construction-fig, #st-construction-specific).st-construction-fig.st-construction-fig.st-construction-fig > figcaption > span, .st-construction-fig > figcaption .ar-pause { color: #474A49 !important; opacity: 1 !important; }

/* ---------------------------------------------------------------- Round 10: the stylised screen in ink */
/* Colour theory asked twice: no teal on the screen. The selected tab and its underline in ink, the selected rail
   row in carbon with chalk text. "WORKSPACE" sits on the carbon top bar, where ink would vanish, so it takes the
   chalk the stages use (#CBD0CC, 9.2 to 1 on the bar). The screen's styles reach in with an id-weight selector, so
   these do too (:is with an id that never exists). */
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-top > strong > span { color: #CBD0CC !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-select button[aria-pressed="true"] { color: #191D1E !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig):not(.co-live) .cd-select button[aria-pressed="true"] { box-shadow: inset 0 -2px #191D1E !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-select button:focus-visible { outline-color: #191D1E !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .co-tabink { background: #191D1E !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) :is(.cd-workspace[data-cd-view="job"] [data-cd-rail="job"], .cd-workspace[data-cd-view="tasks"] [data-cd-rail="tasks"]) { background: #191D1E !important; color: #F5F2EC !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-workspace[data-cd-view="tasks"] [data-cd-rail="tasks"] em { color: #F5F2EC !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-workspace[data-cd-view="documents"] [data-cd-rail="documents"] { background: rgb(25 29 30 / .07) !important; color: #191D1E !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-workspace[data-cd-view="folders"] .cd-rail > p { color: #191D1E !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-person header > b { color: #191D1E !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) :is(.cd-file svg, .co-folder-grid svg) { color: #474A49 !important; }

/* Contrast: the rail's job name and the team view's footnote, 12 px and AA on their own grounds, and the footnote
   no longer fades in with the wake (a measurement caught it at 1.57 mid-fade). */
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-job-label strong { font-size: 12px !important; color: #191D1E !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-task-foot { font-size: 12px !important; color: #535956 !important; }
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-task-foot.wk-key { opacity: 1 !important; translate: none !important; }

/* Round 11: the "901" job badge in carbon with chalk figures; rust read as the ember kept for actions. */
:is(#st-construction-a #st-construction-b, .st-construction-fig) .cd-job-label > b { background: #191D1E !important; color: #F5F2EC !important; }
/* The site boundary label: full ink on its own paper backing (14.5 to 1 on the worst pixel). */
.st-construction .st-tx.st-construction-site { fill: var(--st-ink); }
/* Round 12: the label and its paper backing sit above every plan line at all times. The layer that holds them
   (the base drawing) stacks over the highlight layers, the label never fades in with the rest, and the people stay
   on top. Highlights still show through the base layer, which is transparent apart from its lines and backings. */
.st-construction-plan > svg.st-construction-base { z-index: 1; }
.st-construction-plan > .st-construction-who { z-index: 2; }
.st-construction .st-tx.st-construction-site { opacity: 1 !important; transition: none !important; }

/* The caption sits on paper, so the walls on the 20 px edge pass under it rather than through its first letter. */
.st-construction-fig > figcaption { background: var(--st-ground); }

/* Phone: the title block on the same 20 px edge as the walls. */
@container st-construction (max-width: 639px) {
  .st-stage.st-construction .st-construction-tb { left: 20px; right: 20px; }
}

/* ---------------------------------------------------------------- The sheet */
/* .st-stage too, so another stage file's shared .st-stage rule can never out-rank this layer. */
.st-stage.st-construction {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--st-bl));
  right: calc(-1 * var(--st-br));
  z-index: -1;
  container: st-construction / inline-size;
  overflow: hidden;
  border-radius: var(--st-radius);
  background-color: var(--st-ground);
  color: var(--st-ink);
  pointer-events: none;
  user-select: none;
}
.st-construction::before {
  /* A faint drafting grid, 8 mm and 40 mm. On its own layer, so it is drawn once and never again while the
     plan draws itself in or the views change. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(43 50 54 / .075) 1px, transparent 1px),
    linear-gradient(90deg, rgb(43 50 54 / .075) 1px, transparent 1px),
    linear-gradient(rgb(43 50 54 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(43 50 54 / .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  will-change: transform;
}
/* The grid breathes, very slightly: one slow opacity swing on its own layer, so the sheet is never quite still.
   It rests off screen, with the site paused and under reduced motion. */
.st-construction.st-construction-done::before { animation: st-construction-breathe 9s cubic-bezier(.16, 1, .3, 1) infinite alternate; }
.st-construction.st-construction-off::before { animation-play-state: paused; }
.st-construction.st-construction-still::before { animation: none; }
@keyframes st-construction-breathe { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .st-construction::before { animation: none !important; } }
/* The plan is its own paint region too: its draw-in and highlights never repaint the screen in front of it. */
.st-construction-plan { position: absolute; inset: 0; contain: strict; will-change: transform; }
.st-construction-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* The mark: product name in Manrope 600 and "by SOLVA" as on every stage, quiet, part of the sheet. */
.st-construction .st-mark {
  position: absolute;
  left: max(20px, calc(var(--st-bl) + var(--st-pl) - 32px));
  top: var(--st-mt);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}
.st-construction .st-mark-name { font: 600 20px/1 Manrope, Arial, sans-serif !important; letter-spacing: -.01em; color: var(--st-ink); }
.st-construction .st-mark-by {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 12px/1 Manrope, Arial, sans-serif !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--st-mid);
}
.st-construction .st-mark-wm { display: block; width: auto !important; height: 9px !important; max-width: none !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; }

/* The title block, as on a construction drawing. Its text is real text: 11 px and over, AA on the ground. */
.st-construction-tb {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 248px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border: 1px solid rgb(43 50 54 / .5);
  background: var(--st-ground);
  color: var(--st-ink);
}
.st-construction-tb > div { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 7px 10px 8px; }
.st-construction-tb-project { grid-column: 1 / -1; border-bottom: 1px solid rgb(43 50 54 / .5); }
.st-construction-tb-cell + .st-construction-tb-cell { border-left: 1px solid rgb(43 50 54 / .5); }
.st-construction-tb small { font: 600 12px/1.2 Manrope, Arial, sans-serif !important; letter-spacing: .06em; text-transform: uppercase; color: var(--st-mid) !important; margin: 0 !important; }
.st-construction-tb b { color: var(--st-ink) !important; font: 600 12px/1.3 Manrope, Arial, sans-serif !important; color: var(--st-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-construction-tb-project b { font: 600 16px/1.25 Manrope, Arial, sans-serif !important; letter-spacing: -.005em; }
.st-construction-tb-project span { font: 400 12px/1.3 Manrope, Arial, sans-serif !important; color: var(--st-mid) !important; }
.st-construction-tb [data-st-construction-name], .st-construction-tb [data-st-construction-sheet] { font-variant-numeric: tabular-nums; }
@container st-construction (max-width: 639px) {
  .st-construction-tb { left: 14px; right: 14px; bottom: 14px; width: auto; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr); }
  .st-construction-tb-project { grid-column: auto; border-bottom: 0; }
  .st-construction-tb-cell { border-left: 1px solid rgb(43 50 54 / .5); }
  .st-construction-tb > div { padding: 6px 8px 7px; }
  .st-construction-tb-project b { font-size: 14px !important; }
  .st-construction-tb-project span { display: none; }
}

/* ---------------------------------------------------------------- The drawing */
.st-construction svg { shape-rendering: geometricPrecision; }
.st-construction .st-ln { fill: none; stroke: var(--st-line); stroke-width: 1; }
.st-construction .st-tx { fill: var(--st-line); font-family: Manrope, Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.st-construction .st-tx.st-num { font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.st-construction .st-cut { fill: var(--st-ground); stroke: none; }

/* Draws itself in once, when the sheet enters. */
.st-construction .st-d { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.st-construction .st-f { opacity: 0; }
.st-construction.st-construction-in .st-d { animation: st-construction-draw 1200ms cubic-bezier(.16, 1, .3, 1) var(--d, 0ms) both; }
.st-construction.st-construction-in .st-f { opacity: 1; transition: opacity 700ms cubic-bezier(.16, 1, .3, 1) var(--d, 600ms); }
.st-construction.st-construction-done .st-d { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.st-construction.st-construction-done .st-f { opacity: 1; transition: none; }
@keyframes st-construction-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* What each view of the screen points to on the plan. Each is its own layer, so only its opacity changes. */
.st-construction .st-construction-hl { opacity: 0; transition: opacity 450ms cubic-bezier(.16, 1, .3, 1); }
.st-construction.st-construction-done[data-st-construction-view="job"] .st-construction-hl-job,
.st-construction.st-construction-done[data-st-construction-view="documents"] .st-construction-hl-documents,
.st-construction.st-construction-done[data-st-construction-view="folders"] .st-construction-hl-folders { opacity: 1; }

/* The team: three people walk from the corridor under the screen to their rooms. */
.st-construction-who {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(43 50 54 / .72);
  border-radius: 50%;
  background: var(--st-ground);
  font: 600 12px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0;
  color: var(--st-line);
  opacity: 0;
  transform: translate(var(--x2), var(--y2));
  transition: opacity 400ms cubic-bezier(.16, 1, .3, 1);
}
.st-construction.st-construction-done[data-st-construction-view="tasks"] .st-construction-who {
  opacity: 1;
  animation: st-construction-walk 2600ms cubic-bezier(.45, 0, .25, 1) var(--d, 0ms) both;
}
@keyframes st-construction-walk {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)); }
  12% { opacity: 1; transform: translate(var(--x0), var(--y0)); }
  55% { transform: translate(var(--x1), var(--y1)); }
  100% { opacity: 1; transform: translate(var(--x2), var(--y2)); }
}
.st-construction.st-construction-off .st-construction-who { animation-play-state: paused; }
.st-construction.st-construction-still .st-construction-who { animation: none !important; }
.st-construction.st-construction-still .st-construction-hl, .st-construction.st-construction-still .st-construction-who { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .st-construction .st-d { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; }
  .st-construction .st-f { opacity: 1; transition: none !important; }
  .st-construction .st-construction-hl, .st-construction-who { transition: none !important; animation: none !important; }
}