/* ========================================
   LIVE THUMBNAILS - homepage project chapters
   Rebuilt product UIs that play a small interaction on hover / keyboard focus.
   Each chapter <a> carries one of: .reorder-demo, .tabslide-demo, .tooltip-demo
   ======================================== */

:root { --demo-h: 412px; --intent: 0.12s; }

/* ============ OPTION 3: live star-to-top reorder ============ */
.reorder-demo .chapter-media-inner {
    height: var(--demo-h);
    aspect-ratio: auto;
    background: #ffffff;
    display: block;
}

.carrier-panel {
    font-family: 'Open Sans', sans-serif;
    background: #ffffff;
    padding: 4px 2px 2px;
}

.carrier-panel-head {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.carrier-panel-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dfe2e6;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 11px;
    color: #9aa1a8;
    margin-bottom: 8px;
}

.carrier-panel-search svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.carrier-panel-total {
    font-size: 10px;
    color: #8a919a;
    margin-bottom: 10px;
}

.carrier-rows {
    position: relative;
    height: 308px;
}

.carrier-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    height: 74px;
    padding: 8px;
    border-radius: 6px;
    background: transparent;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s ease, box-shadow 0.4s ease;
}

.carrier-row .row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.carrier-row .row-name {
    font-size: clamp(9.5px, 8px + 0.3vw, 12px);
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carrier-row .row-icons {
    display: flex;
    gap: 6px;
    margin: 5px 0 4px;
}

.carrier-row .row-icons .ic {
    width: 13px;
    height: 13px;
    display: block;
}

.carrier-row .row-links {
    font-size: 10px;
    display: flex;
    gap: 10px;
}

.carrier-row .row-links span {
    color: #3f6fd1;
}

.star-btn {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #1f3a93;
    transition: color 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.star-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

.star-btn .star-fill {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.carrier-row.starred .star-fill {
    opacity: 1;
}

/* Rest (favorites first): ABC(starred), LLC(starred), Inc, Goods(target).
   Hover: Goods gets starred and moves to the top, favorites stay together, Inc drops to the bottom. */
.row-1 { transform: translateY(0); z-index: 1; }
.row-3 { transform: translateY(78px); z-index: 1; }
.row-2 { transform: translateY(156px); z-index: 1; }
.row-4 { transform: translateY(234px); z-index: 1; }





/* ============ OPTION 4: tab slide (Echo Profile) ============ */
.tabslide-demo .chapter-media-inner {
    height: var(--demo-h);
    aspect-ratio: auto;
    background: #ffffff;
    display: block;
    container: tabslide / inline-size;
}

.carrier-app {
    font-family: 'Open Sans', sans-serif;
    background: #ffffff;
}

.app-topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 7px 14px;
    background: #ffffff;
    border-bottom: 1px solid #e3e7ec;
    /* elevation so the white bar reads as chrome above the page, not the same surface as the white cards below it */
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
    font-size: 11px;
    font-weight: 700;
    color: #b7bcc4;
    /* hard clip, not a fade: a fade on a solid white bar just fades white into the grey page behind it */
    overflow: hidden;
}

.app-topbar span {
    white-space: nowrap;
    flex: 0 0 auto;
}

.app-topbar .brand {
    color: #1a1a1a;
    font-weight: 800;
    margin-right: 4px;
}

.app-topbar .brand span { color: #2f6fed; }
.app-topbar .active-link { color: #2f6fed; }

.app-breadcrumb {
    padding: 10px 14px 6px;
    font-size: 10px;
    color: #9aa1a8;
}

.app-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 6px;
}

.app-title-row h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

/* Badge colors from the design tokens: G50 bg, G800 dot, N800 label */
.app-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    color: #3a4053;
    background: #e6f0e8;
    padding: 4px 9px;
    border-radius: 8px;
}

.app-status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2c622c;
    flex: 0 0 auto;
}

.tabslide-demo .chapter-media,
.tabslide-demo .chapter-media-inner,
.tabslide-demo .carrier-app { min-width: 0; }

.app-tabs {
    display: flex;
    gap: 18px;
    padding: 0 14px;
    border-bottom: 1px solid #eef0f2;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.app-tab {
    font-size: 12px;
    font-weight: 600;
    color: #9aa1a8;
    padding: 7px 0;
    transition: color 0.4s ease;
    white-space: nowrap;
}

.app-tab.active {
    color: #1a1a1a;
}

.tab-underline {
    position: absolute;
    bottom: 0;
    left: 14px;
    height: 2px;
    width: 54px;
    background: #2f6fed;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The card's height comes from its content, not a hand-picked pixel value: both panels stack
   in the same grid cell (sized to the taller one), so the card is never force-fit or stretched.
   Anything past the frame's own fixed height is cropped by chapter-media-inner's overflow:hidden
   below, a clean "peek" of the next card rather than a cramped layout that fits everything. */
.app-card {
    margin: 14px;
    display: grid;
}

/* Each panel is its own N-column grid (4 for Summary, 3 for Compliance), and every field-card
   inside it is a subgrid spanning those same columns. That's what makes "Carrier Owner" and
   "Docket #" line up: both cards' columns are sized together, as one shared set of tracks,
   instead of each card sizing its own columns independently off its own content. */
.app-card-panel {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(4, auto);
    column-gap: 24px;
    row-gap: 16px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.app-card-panel.compliance {
    grid-template-columns: repeat(3, auto);
}

.app-card-panel.visible {
    opacity: 1;
}

.field-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    background: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 16px 18px;
}

.app-card-panel h5 {
    font-family: 'Open Sans', sans-serif;
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px;
}

.app-field-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 14px;
}

/* A grid cell stretches to the height of its row's tallest label (CSS Grid's default), so when
   one field's label wraps to 2 lines, every field in that row grows to match. Anchoring the
   value to the bottom of its own cell keeps all the values on one line across the row, whatever
   wraps and at whatever card width, instead of hardcoding which labels are "long enough" to wrap. */
.app-field {
    display: flex;
    flex-direction: column;
}

.app-field label {
    display: block;
    font-size: 10px;
    color: #9aa1a8;
    margin-bottom: 3px;
}

.app-field div {
    margin-top: auto;
    font-size: 12px;
    color: #1a1a1a;
    font-weight: 500;
}

/* Below this card width, more labels wrap to 2 lines (adding row height), so the roomier
   padding/gaps above would push Certifications past the fixed card height. Tighten them back
   up here rather than removing the breathing room everywhere. */
@container tabslide (max-width: 420px) {
    .field-card { padding: 12px 14px; }
    .app-card-panel { gap: 10px; }
    .app-field-grid { gap: 10px 14px; }
}


/* ============ OPTION 5: tooltip reveal (Groupon) ============ */
.tooltip-demo .chapter-media-inner {
    height: var(--demo-h);
    container: demo / inline-size;
    aspect-ratio: auto;
    background: #ffffff;
    display: block;
}

.groupon-app {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    background: #ffffff;
    padding: 26px;
}

.groupon-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-bottom: 24px;
}

.groupon-header h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.groupon-cta-btn {
    background: #2e8b3d;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 16px;
    white-space: nowrap;
}

.groupon-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 26px;
    border-bottom: 1px solid #eef0f2;
}

.groupon-tab {
    font-size: 12px;
    font-weight: 700;
    padding: 0 0 8px;
    color: #9aa1a8;
    border-bottom: 2px solid transparent;
}

.groupon-tab.active {
    color: #2e8b3d;
    border-color: #2e8b3d;
}

.groupon-balance-card {
    container-type: inline-size;
    display: flex;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 16px;
    gap: 20px;
    position: relative;
}

.groupon-balance-main {
    flex: 0 0 auto;
    padding-right: 20px;
    border-right: 1px solid #eef0f2;
}

.groupon-balance-amount {
    font-size: 25px;
    font-weight: 700;
    color: #1a1a1a;
}

.groupon-balance-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #1a1a1a;
    margin-top: 2px;
}

.info-dot {
    width: 14px;
    height: 14px;
    color: #6b7178;
    display: inline-flex;
}

.info-dot svg {
    width: 100%;
    height: 100%;
    display: block;
}

.groupon-addfunds-btn {
    margin-top: 12px;
    border: 1px solid #d7dbe0;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
    display: inline-block;
}

.groupon-balance-details {
    font-size: 11.5px;
    color: #1a1a1a;
    line-height: 2.1;
}

.groupon-balance-details .link-like { color: #2f6fed; margin-left: 4px; }

.groupon-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
    border: 1px solid #eef0f2;
    border-radius: 8px;
}

.groupon-stat-tile {
    position: relative;
    padding: 16px;
}

.groupon-stat-tile + .groupon-stat-tile::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: #eef0f2;
}

.groupon-stat-tile .stat-num {
    font-size: 21px;
    font-weight: 700;
    color: #1a1a1a;
}

.groupon-stat-tile .stat-label {
    font-size: 11px;
    color: #6b7178;
    margin-top: 4px;
}

@container (max-width: 360px) {
    .groupon-balance-details { display: none; }
    .groupon-balance-main { border-right: 0; padding-right: 0; }
}

@container demo (max-width: 430px) {
    .groupon-app { padding: 16px; }
    .groupon-header { margin-bottom: 14px; }
    .groupon-tabs { margin-bottom: 16px; }
    .groupon-stats-row { margin-top: 14px; }
    .groupon-stat-tile { padding: 12px; }
    .groupon-stat-tile + .groupon-stat-tile::before { top: 12px; bottom: 12px; }
}

.balance-dialog-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 22, 24, 0.62);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

.balance-dialog {
    position: relative;
    width: 100%;
    max-width: 290px;
    background: #ffffff;
    border-radius: 4px;
    padding: 16px 18px 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    transform: translateY(10px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s;
}

.balance-dialog-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 24px 8px 0;
}

.balance-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 12px;
    height: 12px;
    color: #1a1a1a;
}

.balance-dialog-text {
    font-size: 11px;
    line-height: 1.5;
    color: #1a1a1a;
    margin: 0 0 14px;
}

.balance-dialog-btn {
    display: block;
    width: fit-content;
    margin-left: auto;
    background: #2e8b3d;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 16px;
}



/* Echo Profile sits on a white section, so give the app a light grey ground like the real screenshot */
.tabslide-demo .chapter-media-inner { background: #f1f2f7; }
.tabslide-demo .carrier-app { background: transparent; }
/* app-card is now just a positioning container; the light grey chapter background shows between the field-cards, like the real page */
/* c2's media mat has a 1px border each side, so trim 2px to keep all three sections the same height */
.tabslide-demo .chapter-media-inner { height: calc(var(--demo-h) - 2px); }

/* Star pops up, then settles back to its normal size */
@keyframes star-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ========================================
   INTERACTION STATES
   Focus works everywhere (keyboard). Hover only on devices that really hover, so a tap on
   a phone doesn't leave a sticky hover state. --intent is a short hover-intent delay so a
   quick pass over a card doesn't trigger it; leaving is instant.
   ======================================== */

/* Keyboard focus */
.chapter.reorder-demo:focus-visible .row-1 {
    transform: translateY(78px);
    transition-delay: var(--intent);
}
.chapter.reorder-demo:focus-visible .row-3 {
    transform: translateY(156px);
    transition-delay: var(--intent);
}
.chapter.reorder-demo:focus-visible .row-2 {
    transform: translateY(234px);
    transition-delay: var(--intent);
}
.chapter.reorder-demo:focus-visible .row-4 {
    transform: translateY(0);
    z-index: 2;
    background: #f3f6fb;
    box-shadow: 0 10px 22px rgba(44, 95, 93, 0.18);
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) var(--intent), background 0.25s ease calc(var(--intent) + 0.35s), box-shadow 0.25s ease calc(var(--intent) + 0.35s);
}
.chapter.reorder-demo:focus-visible .row-4 .star-btn {
    animation: star-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--intent);
}
.chapter.reorder-demo:focus-visible .row-4 .star-fill {
    opacity: 1;
    transition-delay: var(--intent);
}
.chapter.tabslide-demo:focus-visible .app-tab.active {
    color: #9aa1a8;
    transition-delay: var(--intent);
}
.chapter.tabslide-demo:focus-visible .app-tab.target {
    color: #1a1a1a;
    transition-delay: var(--intent);
}
.chapter.tabslide-demo:focus-visible .tab-underline {
    transform: translateX(286px);
    width: 69px;
    transition-delay: var(--intent);
}
.chapter.tabslide-demo:focus-visible .app-card-panel.summary {
    opacity: 0;
    transition-delay: var(--intent);
}
.chapter.tabslide-demo:focus-visible .app-card-panel.compliance {
    opacity: 1;
    transition-delay: var(--intent);
}
.chapter.tooltip-demo:focus-visible .balance-dialog-overlay {
    opacity: 1;
    transition-delay: var(--intent);
}
.chapter.tooltip-demo:focus-visible .balance-dialog {
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--intent) + 0.05s);
}

/* Mouse / trackpad */
@media (hover: hover) and (pointer: fine) {
    .chapter.reorder-demo:hover .row-1 {
        transform: translateY(78px);
        transition-delay: var(--intent);
    }
    .chapter.reorder-demo:hover .row-3 {
        transform: translateY(156px);
        transition-delay: var(--intent);
    }
    .chapter.reorder-demo:hover .row-2 {
        transform: translateY(234px);
        transition-delay: var(--intent);
    }
    .chapter.reorder-demo:hover .row-4 {
        transform: translateY(0);
        z-index: 2;
        background: #f3f6fb;
        box-shadow: 0 10px 22px rgba(44, 95, 93, 0.18);
        transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) var(--intent), background 0.25s ease calc(var(--intent) + 0.35s), box-shadow 0.25s ease calc(var(--intent) + 0.35s);
    }
    .chapter.reorder-demo:hover .row-4 .star-btn {
        animation: star-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--intent);
    }
    .chapter.reorder-demo:hover .row-4 .star-fill {
        opacity: 1;
        transition-delay: var(--intent);
    }
    .chapter.tabslide-demo:hover .app-tab.active {
        color: #9aa1a8;
        transition-delay: var(--intent);
    }
    .chapter.tabslide-demo:hover .app-tab.target {
        color: #1a1a1a;
        transition-delay: var(--intent);
    }
    .chapter.tabslide-demo:hover .tab-underline {
        transform: translateX(286px);
        width: 69px;
        transition-delay: var(--intent);
    }
    .chapter.tabslide-demo:hover .app-card-panel.summary {
        opacity: 0;
        transition-delay: var(--intent);
    }
    .chapter.tabslide-demo:hover .app-card-panel.compliance {
        opacity: 1;
        transition-delay: var(--intent);
    }
    .chapter.tooltip-demo:hover .balance-dialog-overlay {
        opacity: 1;
        transition-delay: var(--intent);
    }
    .chapter.tooltip-demo:hover .balance-dialog {
        transform: translateY(0) scale(1);
        transition-delay: calc(var(--intent) + 0.05s);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chapter.reorder-demo *,
    .chapter.tabslide-demo *,
    .chapter.tooltip-demo * { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* Only the real content responds to the pointer. The full-width colored band is one big link, so without this
   the empty background around the content also showed a pointer cursor and played the interaction. Clicks on
   any of the content below still follow the link, and hover on it still counts as hovering the chapter. */
#work .chapter {
    pointer-events: none;
}

#work .chapter-media,
#work .chapter-title,
#work .chapter-hook,
#work .chapter-desc,
#work .chapter-cta {
    pointer-events: auto;
}

/* Keep each text line's hit area to its own text rather than the whole column */
#work .chapter-title,
#work .chapter-hook,
#work .chapter-desc {
    width: fit-content;
}

/* Ignore the pointer while scrolling (see js/live-thumbnails.js), so cards sliding under a resting cursor don't play their interaction */
.is-scrolling #work .chapter,
.is-scrolling #work .chapter * {
    pointer-events: none;
}