/* ===========================================
   Same week, twice

   A before/after slider: the inbox as it arrives on the left, what Exhale hands
   back on the right, clipped in by a draggable divider.

   This replaced a 460vh scroll-driven film. Everything the film's eight beats
   delivered is either in the box or in the line under it; what it cost was four
   viewports of scrolling to reach a point that fits on one screen.

   Loaded after chat.css.
   =========================================== */
.compare-section {
    padding: var(--section-padding) 0;
    background-color: var(--bg-primary);
    position: relative;
    z-index: 1;
}

body.light-mode .compare-section { background-color: var(--gray-50); }

.compare-head {
    max-width: 44rem;
    margin: 0 auto 2.75rem;
    text-align: center;
}

.compare-head h2 {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.compare-sub {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* --- the box --------------------------------------------------------------- */
.compare-box {
    --pos: 50%;
    position: relative;
    /* The inbox needs the room, so the box takes what it can get. */
    width: min(76rem, 96%);
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
    user-select: none;
}

body.light-mode .compare-box { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12); }

.compare-pane { position: relative; }

/* Wraps both panes so a phone can turn them over together. Inert at every other
   width: it is position:relative only so .compare-answer's inset:0 keeps
   resolving against the same rectangle it always did. */
.compare-flip { position: relative; }

/* The overlay. inset(0 0 0 X%) keeps everything to the RIGHT of the divider,
   so dragging left uncovers more of the answer. */
.compare-answer {
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    background-image: linear-gradient(var(--glass-bg), var(--glass-bg));
    clip-path: inset(0 0 0 var(--pos));
    padding: 1.35rem 1.5rem 1.5rem;
}

body.light-mode .compare-answer { background: var(--white); }

.compare-label {
    display: inline-block;
    margin-bottom: 0.9rem;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.compare-answer .compare-label { color: var(--cyan-glow); }
body.light-mode .compare-answer .compare-label { color: var(--cyan-deep); }

/* --- left: the inbox, as it arrives ---------------------------------------- */
.cmp-win { background: #1c1c1f; }

.cmp-win-bar {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(180deg, #2a2a2e 0%, #232327 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.cmp-lights { display: flex; gap: 0.5rem; flex: none; }

.cmp-lights i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3);
}

.cmp-lights i:nth-child(1) { background: #ff5f57; }
.cmp-lights i:nth-child(2) { background: #febc2e; }
.cmp-lights i:nth-child(3) { background: #28c840; }

.cmp-tabs { display: flex; gap: 0.25rem; min-width: 0; flex: 1; }

.cmp-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.375rem 0.9rem;
    border-radius: 8px 8px 0 0;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.75rem;
    color: #8a8a8a;
    white-space: nowrap;
}

.cmp-tab.is-active {
    background: #1c1c1f;
    color: #e0e0e0;
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                inset 1px 0 0 rgba(255, 255, 255, 0.05),
                inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

.cmp-tab span { overflow: hidden; text-overflow: ellipsis; }

.cmp-favicon { flex: none; width: 13px; height: 13px; border-radius: 3px; }
.cmp-favicon.is-mail { background: linear-gradient(135deg, #ea4335, #c5221f); }
.cmp-favicon.is-cal { background: #4285f4; }
.cmp-favicon.is-chat { background: #7b5bbf; }

.cmp-win-body { padding: 1.15rem 1.35rem 1.35rem; }

.cmp-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    /* The only red on the page. */
    color: rgba(255, 80, 60, 0.75);
}

.cmp-rows { list-style: none; margin: 0; padding: 0; }

.cmp-row {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    line-height: 1.35;
}

.cmp-row.is-fresh { background: rgba(255, 80, 60, 0.09); }
.cmp-row.is-read { opacity: 0.55; }

.cmp-dot {
    flex: none;
    align-self: flex-start;
    width: 7px;
    height: 7px;
    margin-top: 0.34rem;
    border-radius: 50%;
    background: rgba(255, 80, 60, 0.7);
}

.cmp-row.is-read .cmp-dot { background: transparent; }

.cmp-row.is-fresh .cmp-dot {
    background: rgba(255, 80, 60, 0.9);
    box-shadow: 0 0 6px rgba(255, 80, 60, 0.7);
}

.cmp-from { flex: none; width: 9.5rem; color: #fff; font-weight: 500; }
.cmp-row.is-read .cmp-from { color: rgba(255, 255, 255, 0.55); }

.cmp-subj {
    flex: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmp-row.is-fresh .cmp-subj { color: rgba(255, 255, 255, 0.85); }

/* Which system each one came from. Never rendered: there is no width for it
   beside the sender at any size, and the line under the box names all eleven
   senders in full. Kept in the markup so the data stays whole if the layout
   ever finds room for it. */
.cmp-src { display: none; }

/* Seven rows used to carry a DATE chip here. It was an annotation, not part of
   the mail client — and the line under the box says "nothing on the outside
   says which seven", which the chips were quietly contradicting. Without them
   the inbox is what a real one is: a wall with no idea what matters in it, and
   the answer card is the only thing that sorts it. */

/* --- right: what came back -------------------------------------------------- */
.cmp-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.cmp-mark {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: 0.18em;
    padding-left: 0.18em;
    color: var(--cyan-light);
    text-shadow: 0 0 12px rgba(173, 251, 246, 0.6);
}

body.light-mode .cmp-mark { color: var(--cyan-deep); text-shadow: none; }

.cmp-q {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: right;
}

.cmp-actions { list-style: none; margin: 0; padding: 0; }

.cmp-action {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--glass-border);
}

.cmp-action:last-child { border-bottom: 0; padding-bottom: 0; }

.cmp-when {
    flex: none;
    width: 8rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cyan-glow);
}

body.light-mode .cmp-when { color: var(--cyan-deep); }

.cmp-what {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.cmp-tag {
    flex: none;
    align-self: center;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(173, 251, 246, 0.4);
    border-radius: 999px;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--cyan-glow);
}

body.light-mode .cmp-tag {
    border-color: rgba(13, 115, 119, 0.35);
    color: var(--cyan-deep);
}

/* The answer is four rows against the inbox twelve, so it always leaves room
   below it. Better to say something in that space than to leave it empty. */
.cmp-note {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--text-secondary);
}

/* --- the divider ----------------------------------------------------------- */
.compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2.75rem;
    translate: -50% 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: ew-resize;
    /* The drag must not be read as a page scroll. */
    touch-action: none;
    z-index: 3;
}

.compare-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--cyan-light);
    opacity: 0.85;
    box-shadow: 0 0 12px rgba(173, 251, 246, 0.5);
}

body.light-mode .compare-handle::before {
    background: var(--cyan-deep);
    box-shadow: none;
}

.compare-grip {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: transform 160ms var(--ease-out);
}

body.light-mode .compare-grip { background: var(--white); }

.compare-grip svg { width: 15px; height: 15px; }

.compare-box.is-dragging .compare-grip { transform: scale(1.12); }

@media (hover: hover) and (pointer: fine) {
    .compare-handle:hover .compare-grip { transform: scale(1.08); }
}

.compare-handle:focus-visible .compare-grip {
    outline: 2px solid var(--cyan-glow);
    outline-offset: 3px;
}

/* Where the scroll drives the divider there is nothing to grab, so the grip
   stops advertising a grab. */
.compare-box.is-scrolled .compare-handle { cursor: default; }
.compare-box.is-scrolled .compare-grip,
.compare-box.is-static .compare-handle { display: none; }

/* --- the line under the box -------------------------------------------------- */
.compare-note {
    max-width: 46rem;
    margin: 2rem auto 0;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.compare-note b {
    font-weight: 500;
    color: var(--text-primary);
}

/* Both contents sit against the same left edge, full width, and stay there.

   They used to track the divider so neither side ever showed empty space. That
   kept the middle tidy but meant neither end was ever a clean view of one
   thing: the pane you were revealing kept resizing under you. Anchored, the
   two extremes are the point — all the way right is the inbox exactly as it
   arrives, all the way left is the answer, whole. The middle is a transition
   between them rather than a state to read. */
@media (min-width: 901px) {
    .compare-problem { padding-right: 1.5rem; }
    .compare-answer { padding-left: 1.5rem; }
}

/* Small laptops: the left pane is under 540px there, which starts eating the
   dates out of the subjects. Buy the width back from the type rather than from
   the content. */
@media (min-width: 901px) and (max-width: 1150px) {
    .cmp-row { font-size: 0.72rem; gap: 0.55rem; }
    .cmp-from { width: 8.25rem; }
    .cmp-what { font-size: 0.875rem; }
    .cmp-when { width: 7rem; }
}

/* --- smaller screens -------------------------------------------------------- */
@media (max-width: 900px) {
    /* Simple, and deliberately so. The inbox whole, the answer under it, then
       the three reasons — nothing pinned, nothing wiped, nothing capped.

       Every version that tried to keep the comparison on a phone had to make
       both panes share one frame, and the frame had to be capped to fit, and
       the cap cut a row in half. The comparison is the divider, and the divider
       needs a pointer. */
    .compare-stage { display: block; }
    .compare-pin { position: static; pointer-events: auto; }
    .compare-box { position: static; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }

    .compare-answer {
        position: static;
        clip-path: none;
        border-top: 1px solid var(--glass-border);
    }

    .compare-handle { display: none; }

    /* The section ends on the card. The three lines that used to close it here
       said what the card has just shown, and a phone had to scroll past the
       whole flip to reach them. What they said still runs under the box on a
       desktop, where there is room for it beside nothing else. */
    .compare-note { display: none; }

    .compare-head { margin-bottom: 2rem; }
    .cmp-win-body { padding: 0.9rem 1rem 1.05rem; }
    .cmp-row { font-size: 0.72rem; gap: 0.5rem; }
    .cmp-from { width: 7rem; }
    .compare-answer { padding: 1rem 1.1rem 1.15rem; }
    .cmp-when { width: 6.5rem; }
}

@media (max-width: 640px) {
    .compare-section { padding: 4rem 0; }
    .compare-sub { font-size: 0.9375rem; }
    .compare-box { width: 100%; border-radius: 12px; }

    /* A 992px window does not survive a 390px screen by scaling — it survives
       by giving up what was never load-bearing. The chrome goes first. */
    .cmp-win-bar { padding: 0.5rem 0.65rem; gap: 0.5rem; }
    .cmp-lights i { width: 9px; height: 9px; }
    .cmp-tab { display: none; }
    .cmp-tab.is-active { display: flex; padding: 0.28rem 0.55rem; font-size: 0.5875rem; }

    .cmp-win-body { padding: 0.7rem 0.8rem 0.75rem; }
    .cmp-head { font-size: 0.5rem; letter-spacing: 0.12em; margin-bottom: 0.4rem; }

    /* Two lines, never three: the sender takes the first, the subject the
       second. */
    .cmp-row {
        flex-wrap: wrap;
        gap: 0 0.45rem;
        /* Tight on purpose. The flip is only offered to screens that can hold
           the card whole underneath the sticky heading, and every 0.01rem here
           is 2.4px off the card across twelve rows. A real inbox is dense. */
        padding: 0.18rem 0;
        font-size: 0.65rem;
    }

    .cmp-dot { order: 0; margin-top: 0.22rem; }
    .cmp-from { order: 1; width: auto; }
    .cmp-subj { order: 4; flex: 1 0 100%; padding-left: 1.15rem; }

    .cmp-card-head { padding-bottom: 0.7rem; margin-bottom: 0.8rem; gap: 0.5rem; }
    .cmp-mark { font-size: 1.05rem; }
    .cmp-q { font-size: 0.7rem; }

    .cmp-action { flex-wrap: wrap; gap: 0.15rem 0.6rem; padding: 0.55rem 0; }
    .cmp-when { width: auto; font-size: 0.625rem; }
    .cmp-what { flex: 1 0 100%; font-size: 0.8125rem; }
    .cmp-tag { align-self: baseline; }

    .compare-note { font-size: 0.875rem; margin-top: 1.5rem; }

    /* --- the flip ---------------------------------------------------------

       Phone widths only. Above 640px the rows go back to one line and the
       card goes back to full-bleed width, and a 787px-wide card 490px tall
       sweeps half the screen when it turns — a tablet is better served by the
       plain sequence it had before.

       The plain sequence is the floor: no JS, reduced motion, or a screen
       too short to hold the card all get it. Everything below only applies once
       compare.js has confirmed the inbox fits on screen whole, and it turns the
       two panes into the two faces of one card.

       A flip is what a wipe could never be here. A wipe has to show both panes
       at once, so both have to fit one frame, so the frame gets capped and the
       cap cuts a row in half — that failure was structural, not a bug. A card
       only ever shows one face, so the frame only has to be as tall as the
       taller of the two. Nothing is capped because nothing is shared. */
    .compare-stage.is-flip {
        height: calc(var(--card-h) + 190vh);
        position: relative;
    }

    /* --- the heading, while the card turns -------------------------------

       It sticks for the length of the stage and collapses to a title bar as
       soon as the stage starts moving. The eyebrow is decoration and the sub
       line is an instruction that has already been followed by then; the name
       of the thing you are looking at is what is worth keeping on screen.

       The bar is a fixed 3rem rather than a measured height, so the pin below
       it has a number to sit against without JS having to reflow the head to
       find one. */
    .compare-stage.is-flip .compare-head {
        /* Not sticky itself — the pin around it is. Two sticky elements in one
           container release at different points, and the heading, being the
           shorter of the two, went on hanging there for another 500px after
           the card had let go and scrolled away. Positioned only so it paints
           over the card's near edge rather than under it. */
        position: relative;
        z-index: 4;
        margin-bottom: 0.75rem;
        /* Opaque: the card's near edge swings above its own pin at the midpoint
           and has to pass behind this, not over it. */
        background: var(--bg-primary);
        /* .reveal owns transform, and a transformed ancestor is a containing
           block — the sticky would stop being sticky. */
        animation: none;
        opacity: 1;
        transform: none;
    }

    body.light-mode .compare-stage.is-flip .compare-head { background: var(--gray-50); }

    .compare-stage.is-flip .compare-head h2 {
        transition: font-size 260ms var(--ease-out), margin-bottom 260ms var(--ease-out);
    }

    .compare-stage.is-flip .section-eyebrow,
    .compare-stage.is-flip .compare-sub {
        overflow: hidden;
        max-height: 4rem;
        transition: opacity 200ms var(--ease-out),
                    max-height 260ms var(--ease-out),
                    margin 260ms var(--ease-out);
    }

    .compare-stage.is-flip.is-lead .compare-head {
        height: 3rem;
        display: flex;
        /* Column, not row: as a row the collapsed eyebrow and sub still hold
           horizontal space and squeeze the title into wrapping. */
        flex-direction: column;
        justify-content: center;
    }

    .compare-stage.is-flip.is-lead .compare-head h2 {
        font-size: 1.375rem;
        margin-bottom: 0;
    }

    .compare-stage.is-flip.is-lead .section-eyebrow,
    .compare-stage.is-flip.is-lead .compare-sub {
        opacity: 0;
        max-height: 0;
        margin: 0;
    }

    /* One sticky element holding both: the heading bar on top, the card below
       it, released together at the end of the runway. Height stays auto so the
       heading can collapse from its full self to the bar and take the card up
       with it. */
    .compare-stage.is-flip .compare-pin {
        position: sticky;
        top: var(--head-top, 4rem);
    }

    .compare-stage.is-flip .compare-box {
        position: relative;
        height: var(--card-h);
        /* overflow:hidden would flatten the 3D, so the rounding and the shadow
           move onto the faces. */
        overflow: visible;
        box-shadow: none;
        /* Enough depth to read as an object, shallow enough that the near edge
           does not swing up under the fixed nav at the midpoint. */
        perspective: 1900px;
        /* .reveal owns transform and the flip needs it. The card is well on
           screen before it turns, so there is nothing left for a reveal to do. */
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* The slot the card turns inside.

       A plane with no thickness projects to a line at exactly 90 degrees, so
       for a few pixels of scroll there is nothing on screen at all. The eased
       turn crosses that window in about 16px and no card can avoid it — what it
       can avoid is turning into nothing. This sits on .compare-box, which does
       not rotate, so the card's own footprint stays lit the whole way round. */
    .compare-stage.is-flip .compare-box::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    }

    .compare-stage.is-flip .compare-flip {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        transform: rotateY(var(--flip, 0deg)) scale(var(--flip-scale, 1));
        will-change: transform;
    }

    .compare-stage.is-flip .compare-pane {
        position: absolute;
        inset: 0;
        border-radius: 12px;
        overflow: hidden;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    }

    body.light-mode .compare-stage.is-flip .compare-pane {
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
    }

    /* The back. Centred rather than top-aligned: it is four rows against the
       inbox twelve, so it never fills the card, and floating in the middle
       reads as deliberate where hanging from the top reads as short. */
    .compare-stage.is-flip .compare-answer {
        clip-path: none;
        border-top: 0;
        transform: rotateY(180deg);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}