/* ==========================================================================
   DEMO stamp — shown only when Demo:Stamp is true in configuration.

   One rule, three apps: this file is byte-identical in Vm.Pms.WebPublic,
   Vm.Pms.AppWeb and Vm.Pms.Adm.AppWeb, and DemoStampGuardTests fails the build
   when the three copies drift. The three apps have three different chromes
   (plain CSS header, MudBlazor AppBar, MudBlazor AppBar with a custom header),
   so a shared component would have to fight three layout systems; a shared
   stylesheet plus four lines of markup does not.

   Deliberately NOT a raster asset: a stamp that is text stays crisp at any DPI,
   costs no request, and can be read by a screen reader.

   Why the visibility decision is not here: CSS cannot know the environment.
   The markup itself is absent when the flag is off (see Vm.Pms.Core Hosting
   DemoStamp) — hiding it with display:none would ship the word "DEMO" inside
   production HTML, where a crawler and a "view source" both still find it.
   ========================================================================== */

.demo-stamp {
    /* Ink is a single custom property so the login variant can override it in
       one place instead of restating every rule below. */
    --demo-stamp-ink: #C62828;
    --demo-stamp-plate: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Shrink-to-fit in every container the three headers use. flex:0 0 auto covers flexbox;
       width:max-content covers CSS grid, where a stretched item once turned the mark into a
       banner across the whole public header. align-self/justify-self keep it off the cross axis. */
    flex: 0 0 auto;
    width: max-content;
    align-self: center;
    justify-self: start;

    padding: 1px 10px 2px;
    border: 2.5px solid var(--demo-stamp-ink);
    border-radius: 3px;
    background: var(--demo-stamp-plate);

    color: var(--demo-stamp-ink);
    font-family: "Archivo Black", "Alexandria", "Arial Black", Impact, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.13em;
    /* The trailing letter-spacing pushes the word off-centre inside the box.
       Half of it back as padding restores the optical centre. */
    text-indent: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;

    /* Rotation and the inner rule are what read as "rubber stamp" rather than
       "badge". The inset shadow is the second ruled line; a second element would
       be one more thing for each of the three layouts to position. */
    transform: rotate(-7deg);
    box-shadow: inset 0 0 0 1.5px var(--demo-stamp-plate), inset 0 0 0 3px var(--demo-stamp-ink);
    opacity: 0.9;

    /* Never a target and never a layout participant beyond its own box: the
       stamp must not steal a click from the header underneath it. */
    pointer-events: none;
    user-select: none;
}

/* The public site's header is the tightest of the three: 80px tall, with the brand and a
   13-link nav competing for one row. Less ink, same mark. */
.demo-stamp--compact {
    font-size: 13px;
    padding: 0 7px 1px;
    border-width: 2px;
    box-shadow: inset 0 0 0 1px var(--demo-stamp-plate), inset 0 0 0 2px var(--demo-stamp-ink);
}

/* Ink on the brand gradient of the login screens fails contrast badly. The plate
   restores it without inventing a second colour. */
.demo-stamp--on-dark {
    --demo-stamp-plate: rgba(255, 255, 255, 0.94);
    opacity: 1;
}

/* Login and approval screens have no top bar to sit in. Anchored to the top of
   the viewport, above the card, out of the tab order and off the click path. */
.demo-stamp--floating {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) rotate(-7deg);
    z-index: 1400;
}

/* Under 900px the three headers all fight for width. The stamp shrinks rather
   than pushing the brand or the actions off screen. */
@media (max-width: 900px) {
    .demo-stamp {
        font-size: 12px;
        padding: 0 6px 1px;
        border-width: 2px;
        box-shadow: inset 0 0 0 1px var(--demo-stamp-plate), inset 0 0 0 2px var(--demo-stamp-ink);
    }
}

/* WCAG 2.3.3 / users who asked for less motion get the same mark, unrotated —
   the tilt is decoration, the word is the information. */
@media (prefers-reduced-motion: reduce) {
    .demo-stamp {
        transform: none;
    }

    .demo-stamp--floating {
        transform: translateX(-50%);
    }
}

/* Printing an invoice or a quote from a demo host must not produce a document
   that looks real on paper. */
@media print {
    .demo-stamp {
        opacity: 1;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}