/* THE WORDMARK ON THE FRONT PAGES — GENERATED. DO NOT EDIT HERE.
   ==============================================================
   Cut out of packages/components/stil.css, which is the one place these rules
   live. The front pages are a plain public/ folder with no build step and
   cannot import that file, so the rules come this way instead — copied in at
   build, the same way the fonts are.

   Edit packages/components/stil.css and run:
       node scripts/make-frontpage-css.mjs

   npm test runs it with --check and fails if the two have drifted apart. */

/* ONLY THE SUFFIX FALLS INTO PLACE — one letter at a time, once per page open.
   The movement is the owner's own example (ballDrop).
   The measurements are in em, not px: the wordmark is used both on the login
   card (30px) and in the top bar (18px), and with px the letters would fly five
   times further relative to their own size on the smaller of the two. */
.wordmark {
  display: inline-flex;
  /* The letters rotate, so they need room without the card clipping them */
  overflow: visible;
  /* THE NAME NEVER BREAKS. Every letter in the suffix is its own <span>, so
     they wrapped like ordinary text when space ran short: in nemadmin's top bar
     with seven tabs the name stood on several lines below roughly 900px
     (measured 96x50px at 835px against 103x25px at 1440px — "admi" above "n").
     With nowrap, .badge cannot become narrower than the whole wordmark, and the
     row of tabs gives way instead. The logo is the product's identity; it is
     the navigation that may scroll. */
  white-space: nowrap;
  /* THE LETTERS SIT A LITTLE CLOSER (1 August 2026, at the owner's word).
     A logotype is not running text: it is read as one shape, and at 800 weight
     the default spacing lets the word fall apart into letters. -0.02em is the
     same value .doc-fall in the design document has carried all along, so this
     brings the real name into line with what the document has been showing.
     ONE place, and every product follows: the top bar, the login card, the
     front pages. */
  letter-spacing: -0.02em;
}

/* === THE LOCKUP — shape D, chosen 2 August 2026 ==========================
   The family's mark stands, and the product says itself on a second line
   underneath, LEFT-aligned at the "n".

   Why the product moved out of the mark at all: the house is one brand. With
   one mark per product a customer met nembyg, nemkalkulation and nemfinans as
   three companies, and the portal showed all three without saying they were
   the same house. Now the mark is the same everywhere and only the small word
   changes.

   Shapes A and E were kept as candidates in documentation/design.html and are
   NOT in the code — the document is where they are compared, the stylesheet is
   where the chosen one lives.

   THE SIZES ARE IN em, NOT px. The same lockup is drawn at two sizes — 30px on
   the login card and 18px in the top bar — so a fixed size would be right in
   one of them and wrong in the other. */
.wordmark-lockup {
  /* THE TIMING CHAIN. The mark's suffix falls one letter at a time; the product
     word has to know when that is over, and it cannot be told by hand — change
     the fall and a typed number would go on describing the old one.

     --nt-step and --nt-fall are the SAME numbers as .nt-accent.animate .nt-tegn
     below and wordmark.tsx's animationDelay. They are not the definition, they
     are a reading of it, and scripts/test-lockup-timing.mjs fails if the two
     drift apart. The literals stay where they are because the front pages copy
     those blocks character for character and would lose the animation if a
     variable they never receive turned up inside them — which has happened
     once already, from a renamed class.

     --nt-lead is the only number that is genuinely new: how far BEFORE the mark
     lands the product word is fully in. */
  --nt-step: 0.08s;
  --nt-fall: 0.55s;
  --nt-lead: 0.3s;
  /* "family" is 6 letters, and it is 6 in every language — the mark does not
     translate. So the last letter starts at 5 steps and lands one fall later. */
  --nt-suffix: 6;
  display: inline-grid;
  /* Left, so the product word starts under the "n" and not under the middle of
     the name. Fitting it to the mark's width was tried and dropped: a long
     product then had to shrink, and the same word came out at two sizes in two
     products. */
  justify-items: start;
  line-height: 1.02;
}

.wordmark-product {
  /* 0.64em: 11.52px in the top bar, 19.2px on the login card. */
  font-size: 0.64em;
  /* The mark is set TIGHT (-0.02em above) and this is set LOOSE. That is not a
     contradiction — a small word at 800 weight closes up on itself, and the
     two have to look equally dense, not carry the same number. */
  letter-spacing: 0.02em;
  /* -1px: two less than it started at, at the owner's word on 2 August 2026.
     It is NEGATIVE, and that is allowed because the air here is not what keeps
     the word off the "y" tail. That was the assumption, and measuring killed
     it: with the boxes already overlapping there were still 19.17px between the
     y's descender and the top of the product word. A box carries leading, and
     leading is not ink. The room is in the line box, so it can be taken back. */
  margin-top: -1px;
  font-weight: 800;
}

/* THE PRODUCT WORD'S COLOUR — the mark's own chalk, a third of the way to the
   umbra. It is the second thing said, so it sits a step behind without becoming
   a colour of its own; sand was tried in three strengths and read as a THIRD
   thing on a bar that already has two.

   currentColor and NOT the chalk written out: inside the `color` property
   currentColor is the INHERITED value, so this reads whatever the mark beside
   it is using. The chalk stays written in one place and this follows it.

   THE WEIGHT IS THE POINT. Every app paints every span in the badge lime — the
   rule is `.top .badge span` at (0,2,1) — and the product word is a span inside
   the badge, so it came out lime. (0,3,0) is what beats that chain. The login
   card does not need it: its lime rule is `.login-logo .nt-accent`, which names
   the suffix rather than every span. The third selector is the FRONT PAGES,
   which have neither chain and only need the colour.

   NO CURLY BRACES IN THIS COMMENT. scripts/make-frontpage-css.mjs finds the
   blocks to copy by counting braces, and it counts the ones inside comments
   too — a rule quoted with its declaration shifted every block after it, and
   this one vanished from the copy entirely. */
.top .badge .wordmark-product,
.login-logo .wordmark-product,
.wordmark-lockup .wordmark-product {
  color: color-mix(in srgb, currentColor 70%, var(--umbra, #33281c));
}

/* THE PRODUCT WORD FADES IN WHILE THE MARK IS STILL FALLING — it is there
   before the last letter lands, so the two read as one arrival and not as two
   events. It does not fall: the falling is the mark finding its name, and a
   second thing dropping in would compete with it.

   WHEN it starts is not typed anywhere. It is the mark's own timing read back:
   the last letter begins at (6 - 1) steps and takes one fall, so the mark lands
   at 5 x 0.08 + 0.55 = 0.95s, and the word starts its fade one lead earlier, at
   0.65s, finishing exactly as the last letter does. Change the fall and this
   moves with it. */
.wordmark-product.waiting {
  opacity: 0;
}

.wordmark-product.animate {
  opacity: 0;
  animation: wordmark-produkt-ind var(--nt-lead) ease-out forwards;
  animation-delay: calc((var(--nt-suffix) - 1) * var(--nt-step) + var(--nt-fall) - var(--nt-lead));
}

@keyframes wordmark-produkt-ind {
  100% {
    opacity: 1;
  }
}

.nt-tegn {
  display: inline-block;
  white-space: pre;
}

/* While waiting for the page to be in, the letters stand invisible. Otherwise
   they would stand there finished for a moment and then jump back to the
   starting point when the animation began. */
.nt-accent.waiting .nt-tegn {
  opacity: 0;
}

.nt-accent.animate .nt-tegn {
  opacity: 0;
  transform: translate(0.5em, -1.6em) scale(2);
  animation: nt-fald 0.55s forwards;
}

@keyframes nt-fald {
  60% {
    transform: translate(0, 0.3em) rotate(-180deg) scale(0.5);
  }
  100% {
    transform: translate(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

/* If you sit with "reduce motion" switched on, the name is simply there. It is
   not decoration you can do without — it is the house's name. */
@media (prefers-reduced-motion: reduce) {
  .nt-accent.waiting .nt-tegn,
  .nt-accent.animate .nt-tegn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Screen readers only. Without it the name would be read letter by letter,
   because every character stands in its own element. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}