/*
 * The demo-deployment ribbon, painted on all four surfaces. Their tokens are context
 * scoped (`--ap-*`, `--adm-*`, `--hb-*`), so a piece shared by all carries its own
 * `--demo-*` set and reads the same whatever theme is underneath.
 */
:root {
    --demo-surface: #ffcf33;
    --demo-ink: #2a2200;
    --demo-shadow: rgb(23 23 15 / 26%);
}

/* Above every chrome layer this codebase sets (1030 sticky nav, 1040 flashes) and
   above Bootstrap's modal, so the notice never disappears behind a dialog. It is
   inert: `pointer-events: none` keeps the navbar controls it overlaps clickable. */
.demo-ribbon {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1090;
    width: 110px;
    height: 110px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: var(--demo-surface);
    color: var(--demo-ink);
    filter: drop-shadow(-1px 2px 6px var(--demo-shadow));
    pointer-events: none;
}

/* Centered on the triangle's centroid and turned onto its hypotenuse, which is the
   one placement where both lines clear the two short sides. Moving it costs the
   longer line its room: measure before nudging. */
.demo-ribbon__band {
    position: absolute;
    top: 19px;
    left: 28px;
    width: 90px;
    margin: 0;
    transform: rotate(45deg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
}

.demo-ribbon__title {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.25;
    text-indent: 0.2em;
    text-transform: uppercase;
}

.demo-ribbon__note {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-indent: 0.06em;
    text-transform: uppercase;
}

/* The flag holds three short lines; the sentence that says what "temporary" means is
   read out instead of shown, so the ribbon stays small enough to dodge the chrome. */
.demo-ribbon__full {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .demo-ribbon {
        width: 100px;
        height: 100px;
    }

    .demo-ribbon__band {
        top: 13px;
        left: 40px;
        width: 62px;
    }

    .demo-ribbon__title {
        font-size: 0.58rem;
    }

    .demo-ribbon__note {
        font-size: 0.42rem;
    }
}