/* The principles page (fr/principes, en/principles): the top of the page speaks the graphic language of
   a management-by-affaire application — framed sheet, tabs, grey tables, small system type —,
   generic on purpose, clean, never a caricature nor a publisher's drawing. Through the hole,
   the page speaks cadänce: bands and rules, colour only where a state speaks.
   Without script or with reduced motion, both worlds simply follow each other. */

.erp-world {
  background-color: var(--map-grid);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.erp-world { padding: 8.5rem var(--gutter) 2.4rem; }
.passage-head { max-width: 46rem; margin: 0 auto; text-align: left; }
.passage-head .statement { font-size: clamp(1.9rem, 4.2vw, 3.3rem); }
.passage-head .voice { margin-left: 0; max-width: 60ch; }

/* ---------- the sheet ---------- */
.erp-sheet {
  width: min(920px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--map-bar);
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(11, 21, 38, .06);
  font: 12.5px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink-2);
  text-align: left;
}
.erp-sheet { will-change: transform; }
.erp-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 12px; background: var(--map-track); border-bottom: 1px solid var(--map-bar);
  color: var(--ink-3); font-size: 11.5px;
}
.erp-tools { display: flex; gap: 6px; }
.erp-tools span { padding: 2px 8px; border: 1px solid var(--map-bar); border-radius: 2px; background: var(--bg-elev); color: var(--ink-2); }
.erp-title { padding: 12px 14px 10px; font-size: 15px; color: var(--ink); }
.erp-title b { font-weight: 600; margin-right: 6px; }
.erp-status { margin-left: 8px; font-size: 11px; color: var(--ink-3); border: 1px solid var(--map-bar); border-radius: 2px; padding: 1px 6px; vertical-align: 2px; }
.erp-tabs { display: flex; flex-wrap: wrap; padding: 0 10px; border-bottom: 1px solid var(--map-bar); }
.erp-tabs span { padding: 6px 11px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; color: var(--ink-3); }
.erp-tabs span.on { border-color: var(--map-bar); background: var(--bg-elev); color: var(--ink); border-radius: 2px 2px 0 0; }
.erp-body { padding: 12px 14px 14px; }
.erp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; margin-bottom: 12px; }
.erp-fields span { display: block; padding: 4px 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--ink); }
.erp-fields i { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.erp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.erp-table th, .erp-table td { padding: 4px 8px; border: solid var(--line); border-width: 0 1px 1px 0; text-align: right; white-space: nowrap; background: var(--bg-elev); }
.erp-table th:first-child, .erp-table td:first-child { border-left-width: 1px; }
.erp-table thead th { border-top-width: 1px; }
.erp-table th:first-child, .erp-table td:first-child { text-align: left; }
.erp-table th { background: var(--map-track); color: var(--ink-3); font-weight: 600; font-size: 11px; }
.erp-table tbody tr:nth-child(even) td { background: var(--map-grid); }
.erp-total td { font-weight: 600; color: var(--ink); background: var(--map-track) !important; }
@media (max-width: 720px) {
  .erp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-table th:nth-child(3), .erp-table td:nth-child(3), .erp-table th:nth-child(4), .erp-table td:nth-child(4) { display: none; }
  .erp-tools span:not(:last-child) { display: none; }
  .erp-table td:first-child { white-space: normal; }
}

/* ---------- the story: one stage that stays, the text that scrolls beside it ----------
   Static (no script, or reduced motion): the stage is a picture above the text, every step
   fully legible. Live: the stage is sticky on the right, the step in reading drives it. */
.crystal { position: relative; max-width: 1320px; margin: 0 auto; padding: 2rem var(--gutter) 4rem; }
.story-stage { position: relative; aspect-ratio: 1200 / 720; max-width: 900px; margin: 0 auto 2rem; }
.story-svg, .story-grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-wash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.story-grid { pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.crystal:not(.story-live) .erp-sheet, .crystal:not(.story-live) .story-grid { display: none; }
.crystal:not(.story-live):not(.story-static) .story-stage { display: none; }
.story-steps { max-width: 40rem; margin: 0 auto; }
/* site.css gives .step (the home page's steps) the height of the screen: not here */
.crystal .step { height: auto; }
.crystal .step { margin: 0 0 2.6rem; font-family: var(--font-voice); font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.6; color: var(--ink-2); }
.crystal .step p { margin: 0 0 .9rem; }
.crystal .step .kicker { font-family: var(--font-mono); margin-bottom: .5rem; }
.crystal .step-title { margin: 0 0 .9rem; font-family: var(--font-brand); font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
/* the first two steps still speak the application's language */
.crystal .step-erp, .crystal .step-passage { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1rem; color: var(--ink-2); }
.crystal .step-erp .step-title, .crystal .step-passage .step-title { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 600; letter-spacing: 0; }

.story-live { display: grid; grid-template-columns: minmax(0, 27fr) minmax(0, 73fr); column-gap: 3vw; padding-top: 0; }
.story-live .story-steps { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding: 8vh 0 30vh; }
.story-live .story-stage { grid-column: 2; grid-row: 1; position: sticky; top: 56px; height: calc(100vh - 56px); aspect-ratio: auto; max-width: none; margin: 0; }
.story-live .story-stage .erp-sheet { position: absolute; left: 50%; top: 50%; width: min(760px, 100%); transform-origin: 50% 50%; margin: 0; font-size: 11.5px; }
/* the scroll is the clock: a step is as long as its plan, its words stay in view meanwhile */
.story-live .step { min-height: 70vh; margin: 0; opacity: .25; transition: opacity .5s var(--ease); }
.story-live .step-text { position: sticky; top: 30vh; padding-bottom: 6vh; }
.story-live .step.is-now { opacity: 1; }
.story-live .step-passage { min-height: 170vh; }
.story-live .step-erp { min-height: 60vh; }

@media (max-width: 860px) {
  .story-live { display: block; }
  .story-live .story-stage { position: sticky; top: 56px; height: 46vh; z-index: 2; background: var(--bg); margin: 0 calc(-1 * var(--gutter)); }
  .story-live .story-steps { padding: 4vh 0 30vh; }
  .story-live .step-text { top: calc(46vh + 72px); }
  .story-live .step-passage { min-height: 140vh; }
  .story-live .story-stage .erp-sheet { width: calc(100% - 24px); font-size: 10px; }
  .story-stage .story-map { height: 94%; }
  .story-live .story-stage .erp-fields span:nth-child(n+4), .story-live .story-stage .erp-table tbody tr:nth-child(n+4):not(.erp-total), .story-live .story-stage .erp-tabs span:nth-child(n+5) { display: none; }
}

/* the end of the story: the site's real map, mounted by site.js, shown on the last step */
.story-stage .story-map { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; max-width: none; height: min(62%, 460px); opacity: 0; visibility: hidden; transition: none; }
.crystal:not(.story-live) .story-map { display: none; }

/* ---------- two worlds, whatever the theme ----------
   The application's world is light: the header of the page and the story until the light of the
   passage. cadänce's world is dark, as in the application: from the deadline to the map. The
   rest of the site keeps the theme chosen. The story's background reaches the edges of the window. */
.erp-world, .crystal[data-world="erp"], html[data-story-world="erp"] .site-header {
  --bg: #fbfbfa; --bg-elev: #ffffff; --bg-veil: rgba(251, 251, 250, .78);
  --ink: #0b1526; --ink-2: #465163; --ink-3: #6f7888; --line: #e2e5ea;
  --map-bar: #c3c9d3; --map-bar-done: #dce0e6; --map-bar-strong: #8e97a6; --map-grid: #eceef1; --map-track: #e6e9ee;
  --action: #1d3a6b; --action-ink: #ffffff;
  --pin-bg: #ffffff; --pin-line: #c9ced6; --pin-icon: #4a5566; --map-band: #f1f2f4;
  color-scheme: light;
}
.crystal[data-world="cadance"], html[data-story-world="cadance"] .site-header {
  --bg: #06080c; --bg-elev: #10141b; --bg-veil: rgba(6, 8, 12, .72);
  --ink: #eef1f6; --ink-2: #a9b2c1; --ink-3: #7f8898; --line: #232a36;
  --map-bar: #3b4351; --map-bar-done: #272d38; --map-bar-strong: #667082; --map-grid: #141922; --map-track: #1c222c;
  --hot: #e0707f; --hot-ink: #1a0508; --hot-glow: rgba(224, 112, 127, .35);
  --action: #9dbcf0; --action-ink: #06080c;
  --lens-shoko-crit: #ff4d50; --lens-shoko-warn: #ff9d45; --lens-prop-crit: #a383ec; --lens-prop-warn: #bba4f3;
  --lvl-ok: #74b096; --lvl-watch: #d2a262; --lvl-over: #de93a6; --lvl-beyond: #f07a8c; --warn-text: #ff9d45; --money-out: #e5a24d;
  --pin-bg: #121720; --pin-line: #3a4250; --pin-icon: #b3bccb;
  --map-band: #0d1118; --phase: #3d4553; --phase-done: #262c36; --link: #5a6477;
  color-scheme: dark;
}
/* the text itself takes the world's ink: inherited from the page, it would keep the theme's */
.erp-world { color: var(--ink); }
.crystal { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
/* the bar at the top takes the colours of the world it lies over: the two token sets above */

/* ---------- enhanced contrast, in each world ----------
   The site's own values (site.css, data-contrast="high"), given to the world they belong to:
   darker inks and stronger lines in the application's light world, brighter ones in cadänce's. */
:root[data-contrast="high"] .erp-world, :root[data-contrast="high"] .crystal[data-world="erp"], :root[data-contrast="high"][data-story-world="erp"] .site-header {
  --ink: #000000; --ink-2: #1b2433; --ink-3: #343d4c; --line: #737c8c;
  --map-bar: #8f98a8; --map-bar-done: #b7bec9; --map-bar-strong: #4c5566; --map-grid: #d5d9df; --map-track: #cdd2da;
  --action: #102a55; --pin-line: #5d6676; --pin-icon: #1b2433;
}
:root[data-contrast="high"] .crystal[data-world="cadance"], :root[data-contrast="high"][data-story-world="cadance"] .site-header {
  --ink: #ffffff; --ink-2: #e3e8f0; --ink-3: #c1c9d6; --line: #6b7485;
  --map-bar: #7d8799; --map-bar-done: #4a5262; --map-bar-strong: #b8c0cc; --map-grid: #2a313d; --map-track: #2f3643;
  --action: #c4d8fa; --pin-line: #aab3c2; --pin-icon: #eef1f6; --phase: #9aa3b2; --phase-done: #5b6474; --link: #aab3c2;
}
/* the steps not being read stay readable */
:root[data-contrast="high"] .story-live .step { opacity: .55; }
:root[data-contrast="high"] .story-live .step.is-now { opacity: 1; }
/* the grid of the application's world is a backdrop, not a line that carries meaning: it stays light */
:root[data-contrast="high"] .erp-world { background-image: linear-gradient(#c3c9d3 1px, transparent 1px), linear-gradient(90deg, #c3c9d3 1px, transparent 1px); }

/* The Taïko page opens centred on what a taïko is, then the story starts right under it. */
.crystal-head { padding: 72px var(--gutter) 0; text-align: center; }
.crystal-head .statement .muted { display: block; }
.crystal .step-title .muted { display: block; color: var(--ink-3); }