/*
 * Shared page furniture: the title block every page opens with, prose blocks,
 * numbered workflow lists, feature lists and the module/sector link rows.
 */

/* ---- The module accent -------------------------------------------------- */

/*
 * One system, four operational realities.
 *
 * The modules already differ in substance: each names its own unit of work,
 * and each carries a structure sheet drawn from its own world, so Nexys Caffe
 * opens on a table map and Nexys Finance on a ledger. What these rules add is
 * the family resemblance — the same four colours that mark the four modules in
 * the run on the home page, reappearing on the module's own page.
 *
 * It is deliberately three touches and no more: the spine above the title, the
 * module code in the eyebrow, and the rule under the unit triad. The ink, the
 * paper, the rules and the type are identical on all four pages. A module is
 * not a theme — it is a member of a family, and a family resemblance is a
 * detail you notice, not a costume.
 */
.module {
  --accent: var(--rule-strong);
}

.module[data-module="financa"] {
  --accent: var(--m-financa);
}

.module[data-module="materiale"] {
  --accent: var(--m-materiale);
}

.module[data-module="paga"] {
  --accent: var(--m-paga);
}

.module[data-module="bar-restorant"] {
  --accent: var(--m-bar-restorant);
}

/*
 * The spine. The site header carries a 3 px Sulsys blue bar across the top of
 * every page; this is its counterpart one level down — the page still belongs
 * to Sulsys, and this part of it belongs to this module.
 */
.module .title {
  border-top: 3px solid var(--accent);
}

.module .eyebrow span:first-child {
  color: var(--accent);
}

/*
 * The unit row is the module's signature, so it gets the accent rule — the
 * row's own border rather than a second one under the text, which would read
 * as two rules a hair apart.
 */
.module .specRow:first-child {
  border-bottom: 2px solid var(--accent);
}

.module .specUnitSep {
  color: var(--accent);
}

/* ---- Title block -------------------------------------------------------- */

.title {
  padding-block: var(--s8) var(--s7);
}

/* The company's own pages open on the company's surface. */
.titleNavy {
  background: var(--navy);
  color: #fff;
  padding-block: var(--s8);
}

.titleNavy .h1 {
  color: #fff;
}

.titleNavy .eyebrow {
  color: var(--blue-2);
}

.titleNavy .oneLiner,
.titleNavy .subtitle {
  color: var(--mat);
}

.titleGrid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s8);
  align-items: start;
}

/* ---- The spec block beside a title -------------------------------------- */

/*
 * What the right half of a product or module title block is for.
 *
 * Four module pages built from one template used to differ only in the words
 * inside them, which is how a page about a restaurant till ends up looking
 * identical to a page about a general ledger. The spec block is the fix: each
 * module states its own unit of work — Finance counts accounts and vouchers,
 * Caffe counts tables and orders — then who it is for, then what it connects
 * to. Three facts the module already owns, none of them invented, and no two
 * modules fill them the same way.
 */
.spec {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: var(--hairline) solid var(--rule);
}

.specRow {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) 0;
  border-bottom: var(--hairline) solid var(--rule);
}

.specLabel {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.specValue {
  font-size: var(--step-small);
  color: var(--ink);
}

/* The unit triad is the module's signature, so it is set like one. */
.specUnit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.specUnitSep {
  color: var(--green-ink);
  padding-inline: var(--s3);
}

.titleNavy .spec,
.titleNavy .specRow {
  border-color: var(--rule-navy);
}

.titleNavy .specLabel {
  color: var(--blue-2);
}

.titleNavy .specValue,
.titleNavy .specUnit {
  color: #fff;
}

.specLink {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--rule);
}

.specLink:hover {
  border-bottom-color: var(--green-ink);
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.h1 {
  margin: 0;
  max-width: 24ch;
}

.subtitle {
  display: block;
  margin-top: var(--s2);
  font-family: var(--font-body);
  font-size: var(--step-h3);
  font-weight: 400;
  color: var(--ink-2);
}

.oneLiner {
  margin: var(--s5) 0 0;
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 54ch;
}

.partOf {
  margin: var(--s5) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
}

.legacy {
  margin: var(--s3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---- Prose -------------------------------------------------------------- */

.prose {
  display: grid;
  gap: var(--s4);
  max-width: 68ch;
}

.prose p {
  color: var(--ink-2);
}

.proseWide {
  max-width: none;
}

/* Markdown rendered from MDX (the privacy notices). */
.mdx {
  max-width: 68ch;
}

.mdx h2 {
  margin-top: var(--s7);
  margin-bottom: var(--s3);
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--rule);
  font-size: var(--step-h3);
}

.mdx h2:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.mdx p {
  margin-bottom: var(--s4);
  color: var(--ink-2);
}

.mdx ul {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
  color: var(--ink-2);
  display: grid;
  gap: var(--s2);
}

.mdx code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 1px 4px;
}

.mdx a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 2px;
}

.mdx strong {
  font-weight: 500;
  color: var(--ink);
}

/* ---- Two-column section layout ------------------------------------------ */

/*
 * `.split` is for sections that genuinely have two things to show. A section
 * with only one must use `.measure` instead: a grid with an empty cell reads
 * as an image that failed to load, which is exactly the wrong impression on a
 * site that is deliberately holding image slots open.
 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s8);
  align-items: start;
}

/* For a split whose left side is a dense table and right side a sheet. */
.splitTable {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

/* A single column of content, set to a comfortable document measure. */
.measure {
  max-width: 48rem;
}

/* ---- Numbered workflow -------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  border-top: var(--hairline) solid var(--rule);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s3);
  border-bottom: var(--hairline) solid var(--rule);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
}

.stepModule {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- Feature list ------------------------------------------------------- */

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s7);
  border-top: var(--hairline) solid var(--rule);
}

.feature {
  display: grid;
  grid-template-columns: 1.5ch minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: var(--hairline) solid var(--rule);
  font-size: var(--step-small);
}

.featureMark {
  color: var(--green-ink);
  font-family: var(--font-mono);
}

/* ---- Link rows (modules, sectors, products) ----------------------------- */

.linkRows {
  border-top: var(--hairline) solid var(--rule);
}

.linkRow {
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s3);
  border-bottom: var(--hairline) solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-colour) linear;
}

a.linkRow:hover {
  background: var(--paper-2);
}

/* The row for the page you are already on: held, not linked. */
.linkRow[data-current] {
  background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--green-ink);
}

.linkRow[data-current] .linkCode {
  color: var(--green-ink);
}

.linkCode {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
}

.linkName {
  font-size: 1.0625rem;
  font-weight: 500;
}

.linkSub {
  display: block;
  font-size: var(--step-mono);
  font-weight: 400;
  color: var(--ink-2);
}

.linkLine {
  font-size: var(--step-small);
  color: var(--ink-2);
}

.linkArrow {
  font-family: var(--font-mono);
  color: var(--muted);
}

/* A block that follows another inside the same section. */
.stacked {
  margin-top: var(--s7);
}

/* ---- Address ------------------------------------------------------------ */

.chainBelow {
  margin-top: var(--s7);
}

/* The line the run illustrates, set immediately above it. */
.chainSentence {
  margin: 0 0 var(--s5);
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  max-width: 44ch;
  text-wrap: balance;
}

.address {
  font-style: normal;
  display: grid;
  gap: 2px;
  font-size: 1.0625rem;
}

.addressActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

/* ---- Notes -------------------------------------------------------------- */

.note {
  margin: var(--s5) 0 0;
  font-size: var(--step-small);
  color: var(--ink-2);
  max-width: 68ch;
}

.monoNote {
  margin: var(--s4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.02em;
  color: var(--muted);
  max-width: 72ch;
}

/* ---- 404 ---------------------------------------------------------------- */

.notFound {
  padding-block: var(--s9) var(--s10);
}

.notFoundCode {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.2em;
  color: var(--muted);
  margin: 0 0 var(--s4);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1023px) {
  .titleGrid,
  .split,
  .splitWide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }

  .features {
    grid-template-columns: minmax(0, 1fr);
  }

  .linkRow {
    grid-template-columns: 3.5ch minmax(0, 1fr) auto;
    row-gap: var(--s2);
  }

  .linkLine {
    grid-column: 2 / -1;
  }
}

@media (max-width: 767px) {
  .title {
    padding-block: var(--s6);
  }

  .step {
    grid-template-columns: 3.5ch minmax(0, 1fr);
    row-gap: var(--s2);
  }

  .stepModule {
    grid-column: 2;
  }
}

/* ---- The heritage lockup on the company page --------------------------- */

/*
 * The full identity, shown once, where the subject is the company itself.
 * Sized to sit under the one-line description without competing with the H1:
 * the page's largest statement is still the company's name set in type, and
 * this is the signature beneath it.
 */
.heritage {
  margin: var(--s6) 0 0;
  --lockup-w: 220px;
}

@media (min-width: 1024px) {
  /*
   * Beside the company's name rather than beneath it. The right half of this
   * title block was empty, and the H1 already says "Sulsys" — stacking the
   * wordmark directly under it would have been the company's name twice in
   * 300 px. Set in the second column it reads as what it is: the seal next to
   * the name, the way it sits on the office door.
   */
  .heritage {
    margin: 0;
    justify-self: end;
    --lockup-w: 300px;
  }
}

/* ======================================================================== */
/* V4 — product worlds                                                       */
/* ======================================================================== */

/* ---- A day: the six steps as one strip ---------------------------------- */

.strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--hairline) solid var(--rule);
}

.stripStep {
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: var(--hairline) solid var(--rule);
  font-size: var(--step-body);
}

.stripNr {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--accent, var(--muted));
}

@media (min-width: 768px) {
  .strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s6);
    border-top: 0;
  }

  .stripStep {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s3);
    padding: var(--s4) 0 var(--s5);
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    font-size: var(--step-small);
    align-content: start;
  }
}

@media (min-width: 1200px) {
  .strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s5);
  }
}

/* ---- Connects to: lanes converging on this module ----------------------- */

.connects {
  margin-top: var(--s8);
  display: grid;
  gap: var(--s4);
}

.connectsLabel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.connectsGrid {
  display: grid;
  gap: var(--s5);
  align-items: center;
}

.connectLanes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.connectLane {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--s4);
}

.connectLink {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  padding-block: var(--s2);
}

.connectLink:hover .connectName {
  color: var(--accent);
}

.connectCode {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
}

.connectName {
  font-weight: 600;
  font-size: 1.0625rem;
  transition: color var(--t-colour) linear;
}

.connectSub {
  display: block;
  font-size: var(--step-mono);
  font-weight: 400;
  color: var(--ink-2);
}

/* The lane: a rule running from the other module to this one. */
.connectBar {
  display: block;
  height: 2px;
  background: var(--rule-strong);
  transform-origin: left center;
}

.connectApex {
  margin: 0;
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s4) var(--s4);
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.connectApex .connectCode {
  color: var(--accent);
}

@media (min-width: 768px) {
  .connectsGrid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--s6);
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-enter="out"] .stripStep {
    visibility: hidden;
  }

  [data-enter="in"] .stripStep {
    animation: step-post 1ms linear calc(120ms + var(--i, 0) * 90ms) both;
  }

  [data-enter="out"] .connectBar {
    transform: scaleX(0);
  }

  [data-enter="in"] .connectBar {
    animation: lane-draw 320ms var(--ease) calc(700ms + var(--i, 0) * 120ms) both;
  }

  @keyframes step-post {
    from {
      visibility: hidden;
    }
    to {
      visibility: visible;
    }
  }

  @keyframes lane-draw {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

/* The eyebrow, on the system's surface. */
.eyebrowNavy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s4);
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-2);
}

/* ---- A document on the system's surface -------------------------------- */

/*
 * A record table inside a navy chapter keeps its own paper: the document is
 * the business's, the surface is the system's, and the two stay distinct at
 * every width — the stacked phone layout included.
 */
.onNavy {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s4);
}

/* The navy title block paints its module accents for its own surface. */
.titleNavy .eyebrow span:first-child,
.module .titleNavy .eyebrow span:first-child {
  color: var(--green);
}

.titleNavy .legacy,
.titleNavy .partOf {
  color: var(--mat);
}

.titleNavy .specUnitSep,
.module .titleNavy .specUnitSep {
  color: var(--green);
}

.titleNavy .specLink {
  border-bottom-color: var(--rule-navy);
}

.titleNavy .specLink:hover {
  border-bottom-color: var(--green);
}

.module .titleNavy .specRow:first-child {
  border-bottom-color: var(--green);
}