/* /abordagens' OWN COMPOSITION: THE DESK BEHIND EACH STAGE, THE SIGN THAT TITLES IT, THE MAIL THREAD ON THE DEVICES' SCREENS AND HOW ITS MESSAGES ARE
   WRITTEN AND ARRIVE. THE STAGE AND THE DEVICES COME FROM demo-shell.css; THE THREAD'S SKIN COMES FROM conversas-reais-home.css. */

/* FOUR DESKS TAKE TURNS BEHIND THE STAGES, SO NO TWO NEIGHBORS ARE THE SAME ROOM */

.demo-page main > section.demo-stage.ab-stage.ab-stage--mesa-1 {
    --demo-stage-photo: url("/img/abordagens/mesa-1.webp");
}

.demo-page main > section.demo-stage.ab-stage.ab-stage--mesa-2 {
    --demo-stage-photo: url("/img/abordagens/mesa-2.webp");
}

.demo-page main > section.demo-stage.ab-stage.ab-stage--mesa-3 {
    --demo-stage-photo: url("/img/abordagens/mesa-3.webp");
}

.demo-page main > section.demo-stage.ab-stage.ab-stage--mesa-4 {
    --demo-stage-photo: url("/img/abordagens/mesa-4.webp");
}

/* THE SCREEN GIVES UP THE HEIGHT THE SIGN TAKES ABOVE THE DEVICE, AND THE PLATE'S ON THE FIRST STAGE */

.demo-page .demo-stage.ab-stage .demo-stage__layout {
    --demo-stage-chrome: calc(var(--space-large) * 10);
    --demo-phone-width: calc(var(--space-large) * 6);
    --demo-desk-gap: var(--space-large);
}

.demo-page .demo-stage.ab-stage .demo-stage__layout:has(> .demo-intro) {
    --demo-stage-chrome: calc(var(--space-large) * 14);
}

.demo-page .demo-stage.ab-stage [hidden] {
    display: none !important;
}

/* THE PLATE'S SENTENCE RUNS WIDE, IN TWO LINES, AND A LIGHT EDGE ALONG THE TOP GIVES THE ACRYLIC ITS THICKNESS */

.demo-page .demo-stage.ab-stage .demo-stage__layout > .demo-intro > .demo-intro__layout {
    box-shadow: inset 0 1px 0 var(--color-surface);
}

.demo-page .demo-stage.ab-stage .demo-stage__layout > .demo-intro > .demo-intro__layout::before {
    background-size: var(--space-tight) var(--space-tight);
}

.demo-page .demo-stage.ab-stage .demo-stage__layout > .demo-intro > .demo-intro__layout .demo-intro__lead {
    max-width: 880px;
    text-wrap: pretty;
}

/* THE LAPTOP'S BASE OVERHANGS THE LID BY A FINGER, SO IT NEVER RUNS OFF THE WINDOW'S EDGE */

.demo-page .demo-stage.ab-stage .demo-laptop .demo-laptop__base {
    width: 108%;
}

/* A PHONE WITH A SIGN STACKS THE SIGN OVER ITS BODY */

.demo-page .demo-stage.ab-stage .demo-phone.ab-device {
    flex-direction: column;
}


/* THE SIGN — A PLASTIC CARD HELD BY TWO METAL CLIPS ONTO THE MIDDLE OF THE DEVICE'S TOP EDGE, ITS BAND IN THE CATEGORY'S COLOR (--ab-sign-color, SET BY
   THE VIEW). IT IS THE STAGE'S TITLE. MARGIN EXCEPTION: THE CLIPS BITE THE DEVICE AND THE CARD, AND gap CANNOT EXPRESS AN OVERLAP */

.demo-page .demo-stage.ab-stage .ab-device .ab-sign {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    box-sizing: border-box;
    max-width: min(100%, calc(var(--space-large) * 13));
    margin: 0 0 calc(var(--space-small) * -1);
    color: var(--color-text-dark);
    line-height: 1.2;
}

/* THE CARD — THICK WHITE PLASTIC: A LIT TOP EDGE, A FAINT RIM, A CONTACT SHADOW AND A SOFT ONE FARTHER AWAY. IT LEANS ON ITS CLIPS, NEVER TWO NEIGHBORS THE SAME WAY */

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--space-small);
    background: linear-gradient(to bottom, var(--color-surface), color-mix(in srgb, var(--color-border) 48%, var(--color-surface)));
    box-shadow:
        inset 0 1px 0 var(--color-surface),
        inset 0 0 0 1px color-mix(in srgb, var(--color-canvas-dark) 10%, transparent),
        0 1px 1px color-mix(in srgb, var(--color-canvas-dark) 32%, transparent),
        0 var(--space-small) var(--space-medium) calc(var(--space-tight) * -1) color-mix(in srgb, var(--color-canvas-dark) 48%, transparent);
    overflow: hidden;
    transform-origin: 50% 100%;
    rotate: -0.8deg;
}

.demo-page main > section.demo-stage.ab-stage:nth-of-type(even) .ab-device .ab-sign .ab-sign__card,
.demo-page .demo-stage.ab-stage .demo-phone.ab-device .ab-sign .ab-sign__card {
    rotate: 0.8deg;
}

/* THE LAMINATE — THE ROOM'S LIGHT CROSSES THE CARD'S CORNER */

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, color-mix(in srgb, var(--color-surface) 40%, transparent), color-mix(in srgb, var(--color-surface) 8%, transparent) 28%, transparent 46%);
    pointer-events: none;
}

/* THE BAND — THE CATEGORY'S COLOR ACROSS THE TOP, WITH THE COMPANY'S NAME AND THE SLOT PUNCHED THROUGH THE CARD */

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card .ab-sign__band {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--space-tight) var(--space-small);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--ab-sign-color) 84%, var(--color-surface)), var(--ab-sign-color));
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-canvas-dark) 24%, transparent);
    color: var(--color-text-on-dark);
    font-size: var(--type-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card .ab-sign__band .ab-sign__slot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-medium);
    height: var(--space-tight);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-canvas-dark) 64%, var(--ab-sign-color));
    box-shadow:
        inset 0 1px 2px var(--color-canvas-dark),
        0 1px 0 color-mix(in srgb, var(--color-surface) 32%, transparent);
    translate: -50% -50%;
}

/* THE ICON IN ITS WINDOW, THE TITLE AND THE SENTENCE */

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card .ab-sign__body {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    padding: var(--space-small) var(--space-medium) var(--space-small) var(--space-small);
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card .ab-sign__body .ab-sign__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--space-large);
    height: var(--space-large);
    border-radius: var(--space-tight);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--ab-sign-color) 10%, var(--color-surface)), color-mix(in srgb, var(--ab-sign-color) 28%, var(--color-surface)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ab-sign-color) 32%, transparent), inset 0 1px 2px color-mix(in srgb, var(--color-canvas-dark) 24%, transparent);
    color: var(--ab-sign-color);
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card .ab-sign__body .ab-sign__icon .eicon {
    width: var(--space-medium);
    height: var(--space-medium);
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card .ab-sign__body .ab-sign__words {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    min-width: 0;
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card .ab-sign__body .ab-sign__words .ab-sign__title {
    color: var(--color-text-dark);
    font-size: var(--type-size-heading);
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    text-wrap: balance;
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__card .ab-sign__body .ab-sign__words .ab-sign__text {
    color: var(--color-muted);
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    text-wrap: pretty;
    hyphens: manual;
}

/* A SIGN WITH ONLY ITS TITLE IS AS SMALL AS A BADGE AND HANGS FROM ONE CLIP */

.demo-page .demo-stage.ab-stage .ab-device .ab-sign.ab-sign--compact .ab-sign__card .ab-sign__body {
    padding: var(--space-small);
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign.ab-sign--compact .ab-sign__card .ab-sign__body .ab-sign__icon {
    width: calc(var(--space-medium) + var(--space-small));
    height: calc(var(--space-medium) + var(--space-small));
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign.ab-sign--compact .ab-sign__card .ab-sign__body .ab-sign__icon .eicon {
    width: calc(var(--space-small) + var(--space-tight));
    height: calc(var(--space-small) + var(--space-tight));
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign.ab-sign--compact .ab-sign__card .ab-sign__body .ab-sign__words .ab-sign__title {
    font-size: var(--type-size-base);
    line-height: 1.2;
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign.ab-sign--compact .ab-sign__clips .ab-sign__clip + .ab-sign__clip {
    display: none;
}

/* THE CLIPS — BRUSHED METAL WITH ONE RIVET EACH, BITING THE CARD'S BOTTOM EDGE AND THE DEVICE'S TOP EDGE */

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__clips {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: calc(var(--space-large) * 3);
    margin-top: calc(var(--space-tight) * -1);
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__clips .ab-sign__clip {
    position: relative;
    width: calc(var(--space-large) - var(--space-tight));
    height: calc(var(--space-small) + var(--space-tight));
    border-radius: calc(var(--space-tight) / 2);
    background: linear-gradient(to bottom, var(--color-surface), color-mix(in srgb, var(--color-canvas-dark) 40%, var(--color-surface)) 46%, var(--color-border) 54%, color-mix(in srgb, var(--color-canvas-dark) 56%, var(--color-surface)));
    box-shadow:
        inset 0 1px 0 var(--color-surface),
        inset 0 0 0 1px color-mix(in srgb, var(--color-canvas-dark) 32%, transparent),
        0 2px var(--space-tight) color-mix(in srgb, var(--color-canvas-dark) 40%, transparent);
}

.demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__clips .ab-sign__clip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-tight);
    height: var(--space-tight);
    border-radius: var(--radius-pill);
    background: radial-gradient(circle at 35% 30%, var(--color-surface), color-mix(in srgb, var(--color-canvas-dark) 48%, var(--color-surface)));
    box-shadow: 0 1px 1px color-mix(in srgb, var(--color-canvas-dark) 48%, transparent);
    translate: -50% -50%;
}


/* THE SCREEN — THE MAIL FILLS IT AND SCROLLS ITS OWN THREAD, SO THE SCREEN ITSELF NEVER SCROLLS; IT IS DRAWN AT ITS REAL SIZE */

.demo-page .demo-stage.ab-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen.ab-screen,
.demo-page .demo-stage.ab-stage .demo-phone .demo-phone__body .demo-phone__screen.ab-screen {
    background: var(--color-surface);
    overflow: hidden;
}

.demo-page .demo-stage.ab-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen.ab-screen > .cvr-gmail {
    zoom: 1;
}

/* ON THE PHONE THE MAIL STARTS UNDER THE CAMERA ISLAND */

.demo-page .demo-stage.ab-stage .demo-phone .demo-phone__body .demo-phone__screen.ab-screen > .cvr-gmail {
    box-sizing: border-box;
    padding-top: var(--space-large);
}

.demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail :is(h1, p) {
    text-align: left;
    hyphens: manual;
}

/* ONE OF THREE THINGS IS ON A SCREEN: THE WAIT, THE THREAD, OR WHY THERE IS NO THREAD */

.demo-page .demo-stage.ab-stage .ab-screen[data-ab-state="loading"] .cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-loading,
.demo-page .demo-stage.ab-stage .ab-screen[data-ab-state="loaded"] .cvr-gmail .cvr-gmail__thread .cvr-gmail__thread-content {
    display: flex;
}

.demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail .cvr-gmail__thread .ab-screen__error {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: var(--space-medium);
    color: var(--color-muted);
    font-size: var(--type-size-small);
    text-align: center;
}

.demo-page .demo-stage.ab-stage .ab-screen[data-ab-state="failed"] .cvr-gmail .cvr-gmail__thread .ab-screen__error {
    display: flex;
}

/* WHAT THE WRITING HAS NOT REACHED YET TAKES NO ROOM */

.demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail .ab-unwritten {
    display: none !important;
}

/* THE CARET AFTER THE LAST LETTER WRITTEN */

.demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail .ab-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    vertical-align: text-bottom;
    animation: ab-caret-blink 0.9s steps(2, jump-none) infinite;
}

@keyframes ab-caret-blink {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* THE NOTE BESIDE A MESSAGE'S TIME: THE AGENT IS WRITING IT, OR IT HAS JUST ARRIVED FROM THE LEAD */

.demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail .ab-note {
    flex-shrink: 0;
    padding: 0 var(--space-tight);
    border-radius: var(--radius-pill);
    font-size: var(--type-size-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail .ab-note.ab-note--typing {
    background: var(--color-palette-primary-surface);
    color: var(--color-palette-primary);
}

.demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail .ab-note.ab-note--arrived {
    background: var(--color-palette-accent);
    color: var(--color-text-on-dark);
}

/* A MESSAGE THAT ARRIVES IS LIT FOR A MOMENT, AS AN UNREAD ONE IS. TINT ONLY, NOTHING TRAVELS */

.demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail [data-cvr-msg].is-arriving {
    animation: ab-arrive 2.4s var(--ease-state);
}

@keyframes ab-arrive {
    from { background-color: color-mix(in srgb, var(--color-palette-accent) 16%, var(--color-surface)); }
    30% { background-color: color-mix(in srgb, var(--color-palette-accent) 16%, var(--color-surface)); }
}


/* WHAT THE VISITOR CAN DO WITH THE CONVERSATION — A FROSTED ACRYLIC PLATE, AS THE HEADING'S: UNDER THE OPENING PAIR, AND STANDING ON THE DESK BESIDE
   EACH LAPTOP BELOW IT, WHERE IT ALSO SAYS WHO THE LEAD IS AND WHEN THE CONVERSATION ENDED */

.demo-page .demo-stage.ab-stage .ab-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: var(--space-small);
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--space-small) var(--space-medium);
    border: 1px solid color-mix(in srgb, var(--color-surface) 85%, transparent);
    border-radius: var(--radius-standard);
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 82%, transparent), color-mix(in srgb, var(--color-surface) 58%, transparent));
    box-shadow: inset 0 1px 0 var(--color-surface);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.demo-page .demo-stage.ab-stage .demo-stage__devices .ab-actions.ab-actions--stand {
    flex: 0 1 calc(var(--space-large) * 6);
    align-self: flex-end;
    padding-block: var(--space-medium);
}

.demo-page .demo-stage.ab-stage .ab-actions .ab-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-small) var(--space-medium);
}

.demo-page .demo-stage.ab-stage .ab-actions .ab-actions__meta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-small);
    color: var(--color-text-dark);
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    hyphens: manual;
}

.demo-page .demo-stage.ab-stage .ab-actions .ab-actions__meta .eicon {
    margin-top: calc(var(--space-tight) / 2);
    color: var(--color-muted);
}

.demo-page .demo-stage.ab-stage .ab-actions .ab-actions__error {
    color: var(--color-danger);
    font-size: var(--type-size-small);
    font-weight: 600;
    text-align: left;
}


@media (prefers-reduced-motion: reduce) {

    .demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail .ab-caret,
    .demo-page .demo-stage.ab-stage .ab-screen .cvr-gmail [data-cvr-msg].is-arriving {
        animation: none;
    }

}


@media (max-width: 900px) {

    /* ON A PHONE THE DEVICE GIVES WAY AND THE MAIL IS A SHEET ON THE SCENE; IT KEEPS A HEIGHT OF ITS OWN SO THE THREAD STILL SCROLLS INSIDE IT
       WHILE ITS MESSAGES ARE WRITTEN */

    .demo-page .demo-stage.ab-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen.ab-screen,
    .demo-page .demo-stage.ab-stage .demo-phone .demo-phone__body .demo-phone__screen.ab-screen {
        height: 70dvh;
        overflow: hidden;
    }

    .demo-page .demo-stage.ab-stage .demo-phone .demo-phone__body .demo-phone__screen.ab-screen > .cvr-gmail {
        padding-top: 0;
    }

    .demo-page .demo-stage.ab-stage .ab-device .ab-sign .ab-sign__clips {
        gap: var(--space-large);
    }

    .demo-page .demo-stage.ab-stage .demo-stage__devices .ab-actions.ab-actions--stand {
        flex: 0 0 auto;
        align-self: stretch;
    }

}