/* /demo showcase host. Sign views keep their live styling; everything here is the stage around them. */

.demo-stage {
    outline: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    background: #0b0d10;
    color: #e8ecf2;
    font-family: "Inter", system-ui, sans-serif;
}

/* --vw / --vh are the viewport's content size in px, written as unitless numbers by demo.js, so the scale
   is a plain division. CSS alone cannot do it: dividing one length by another is not allowed in calc(), and
   container-query units inside tan(atan2()) resolve wrongly in Chromium. */
.demo-viewport {
    --vw: 0;
    --vh: 0;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 4vmin;
}

/* Fit the sign's physical size inside the viewport; hidden until demo.js has measured it. */
.demo-frame {
    --scale: min(calc(var(--vw) / var(--sign-w)), calc(var(--vh) / var(--sign-h)));
    visibility: hidden;
    position: relative;
    width: calc(var(--sign-w) * 1px * var(--scale));
    height: calc(var(--sign-h) * 1px * var(--scale));
    overflow: hidden;
    border-radius: 0.4vmin;
    box-shadow:
        0 0 0 1.2vmin #1e2229,
        0 0 0 1.5vmin #0a0c0f,
        0 2vmin 6vmin rgba(0, 0, 0, 0.7);
}

.demo-fitted .demo-frame {
    visibility: visible;
}

/* The transform also makes this the containing block for the view's position: fixed container. White like
   the live page body, so a blank contract sign looks blank rather than showing the stage through it. */
.demo-glass {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--sign-w) * 1px);
    height: calc(var(--sign-h) * 1px);
    background: #ffffff;
    transform-origin: 0 0;
    transform: scale(var(--scale));
    container-type: size;
}

/* On a live sign the browser viewport is the glass, so app.css sizes the contract sign in vw/vh. Inside the
   demo the viewport is the whole screen, so the same rules are repeated here in container units, which
   measure the glass. Keep in step with app.css when those rules change. */
.demo-glass .shorttime-restricted-message {
    font-size: clamp(3cqw, 6rem, 7cqw);
}

.demo-glass .monitor-container .large-text {
    font-size: clamp(7cqw, 8rem, 6cqw);
}

.demo-glass .monitor-container .medium-text {
    font-size: clamp(5.3cqw, 6rem, 4.44cqw);
    margin-bottom: min(20px, 4cqh);
}

.demo-glass .monitor-container .bilskilt {
    margin-top: min(150px, 13cqh);
    border-width: 0.2cqw;
    height: min(205px, 11cqw);
    width: min(880px, 47cqw);
    font-size: clamp(4cqw, 144px, 7.5cqw);
    border-radius: min(16px, 1cqw);
}

.demo-glass .monitor-container .bilskilt.long-number {
    font-size: clamp(4cqw, 144px, 7.3cqw);
}

.demo-glass .parkly-logo {
    width: min(20cqw, 300px);
}

.demo-glass .content-left img {
    margin-top: 15cqh;
}

.demo-glass .content-right {
    padding-top: 15cqh;
}

.demo-caption {
    padding: 2vmin 4vmin 3vmin;
    background: #12161c;
    border-top: 1px solid #2c3541;
}

.demo-caption-text {
    display: flex;
    align-items: baseline;
    gap: 2.5vmin;
}

.demo-caption-title {
    flex: none;
    font-size: 2vmin;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8fa8ff;
}

.demo-caption-beat {
    font-size: 3.2vmin;
    font-weight: 500;
    line-height: 1.3;
}

.demo-empty {
    place-self: center;
    font-size: 3vmin;
    color: #7f8a99;
}