/**
 * SpendSnapper - Features page
 *
 * The diagrams reuse the front page's drawing style from site.css (.flow paper, ink, tracks and pills).
 * Without animation each diagram shows its finished state, so reduced motion still tells the story.
 */

/* -----------------------------
 * Glass bar: the jump links to each panel, on the app's frosted bar. It sticks beneath the nav bar.
 * ----------------------------- */
.features-bar {
    position: sticky;
    top: 65px;
    z-index: 900;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: color-mix(in srgb, var(--secondary-ultra-light) 70%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    backdrop-filter: blur(8px) saturate(180%);
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, #fff 40%, transparent);
    box-shadow: var(--card-shadow);
    transition: border-radius 0.25s ease;
}

/* Pinned beneath the nav bar, it squares off as the app's bar does */
.features-bar.is-stuck {
    border-radius: 0;
}

.features-bar-link {
    padding: 4px 14px;
    border-radius: var(--badge-radius);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.features-bar-link:hover {
    background-color: #fff;
    color: var(--primary);
}

/* The panel in view */
.features-bar-link.is-current {
    background-color: var(--secondary);
    color: #fff;
}

/* -----------------------------
 * Panels
 * ----------------------------- */
/* Jump links land with the panel clear of the sticky nav bar and glass bar */
.feature {
    scroll-margin-top: 140px;
}

.feature .section-lead {
    margin-bottom: 1.25rem;
}

/* The submit panel has no diagram beside it, so its lead can run across */
#submit .section-lead {
    max-width: none;
}

/* A lead with nothing beneath it sits level with its diagram */
.feature .section-lead:last-child {
    margin-bottom: 0;
}

/* The ticked points beside a diagram, one per line */
.feature .feature-list {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin: 0;
}

/* Each card puts its icon beside the heading and text rather than above them, which keeps the cards short */
#submit .step {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    column-gap: 1rem;
    padding: 1.1rem 1.25rem;
}

#submit .step-icon {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    font-size: 1rem;
}

/* The diagrams sit centred in their column */
.feature-diagram {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

/* -----------------------------
 * Snap: a phone and a computer feed the app's list of snaps
 * ----------------------------- */
.snap-demo {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 640px;
    margin: 0 auto;
}

.snap-demo-routes {
    flex: 0 0 30%;
    width: 30%;
    height: auto;
    margin: 0;
    overflow: visible;
}

/* The lists, drawn as the app's tables. The snap list's window shows the heading and five rows, so it
   keeps its size and older snaps slip out of view at the bottom as new ones arrive at the top. */
.snap-demo-window {
    /* Above the phone and computer beside it, so their chips slide in beneath its edge */
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    height: calc(2.3rem + 5 * 2.6rem);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #fff;
}

.snap-demo-list,
.share-demo-list {
    width: 100%;
    table-layout: fixed;
    font-size: 0.8rem;
    border-collapse: separate;
    border-spacing: 0;
}

.snap-demo-list th,
.share-demo-list th {
    height: 2.3rem;
    padding: 0 0.6rem;
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.snap-demo-list td,
.share-demo-list td {
    height: 2.6rem;
    padding: 0 0.6rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snap-demo-list th:not(:last-child),
.snap-demo-list td:not(:last-child),
.share-demo-list th:not(:last-child),
.share-demo-list td:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.snap-demo-list th:nth-child(1) { width: 34%; }
.snap-demo-list th:nth-child(2) { width: 21%; }
.snap-demo-list th:nth-child(3) { width: 17%; }
.snap-demo-list th:nth-child(4) { width: 28%; }

/* A new snap arrives at the top of the list when its document does, and the new snaps clear away at the end of
   the cycle, leaving the earlier ones */
.snap-demo-list tr[data-stage="hidden"] {
    display: none;
}

.snap-demo-list tr[data-start] {
    transition: opacity 0.3s ease;
}

.snap-demo-list.is-clearing tr[data-start] {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .snap-demo-list tr[data-start]:not([data-stage="hidden"]) {
        animation: snap-demo-arrive 0.3s ease both;
    }
}

@keyframes snap-demo-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* A value and its placeholder share one spot: the shimmer until the value is read, then the value */
.snap-demo-cell {
    display: grid;
    width: 100%;
}

.snap-demo-cell > * {
    grid-area: 1 / 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snap-demo-skeleton {
    width: 80%;
    max-width: 4.5rem;
    height: 0.8em;
    align-self: center;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 37%, var(--skeleton) 63%);
    background-size: 400% 100%;
}

.snap-demo-value {
    visibility: hidden;
}

.snap-demo-cell.is-shown .snap-demo-skeleton {
    visibility: hidden;
}

.snap-demo-cell.is-shown .snap-demo-value {
    visibility: visible;
}

/* The status badges, one showing at a time */
.snap-demo-badge {
    display: none;
    padding: 2px 8px;
    border-radius: var(--badge-radius);
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--secondary-ultra-light);
    color: var(--secondary);
}

.snap-demo-badge i {
    margin-right: 4px;
}

.snap-demo-badge.is-ready,
.snap-demo-badge.is-submitted {
    background-color: var(--success-light);
    color: var(--success);
}

/* The earlier snaps show their one badge. A new snap shows the badge for where it has got to. */
tr:not([data-start]) .snap-demo-badge,
tr[data-stage="queued"] .snap-demo-badge.is-queued,
tr[data-stage="reading"] .snap-demo-badge.is-reading,
tr[data-stage="processing"] .snap-demo-badge.is-processing,
tr[data-stage="ready"] .snap-demo-badge.is-ready {
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    .snap-demo-skeleton {
        animation: review-shimmer 1.4s ease infinite;
    }

    /* Each value writes in from the left as it is read, as it does in the app */
    .snap-demo-cell.is-shown .snap-demo-value {
        animation: snap-demo-wipe 0.45s ease both;
    }
}

@keyframes snap-demo-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* Narrower columns drop the reference first */
@media (max-width: 1199.98px) and (min-width: 992px), (max-width: 575.98px) {
    .snap-demo-wide {
        display: none;
    }

    .snap-demo-list th:nth-child(1) { width: 42%; }
    .snap-demo-list th:nth-child(3) { width: 22%; }
    .snap-demo-list th:nth-child(4) { width: 36%; }
}

/* -----------------------------
 * Collaborate: the app's Shared With list, in two scenes
 * ----------------------------- */
/* The two examples share one spot and take turns */
.share-demo {
    display: grid;
    max-width: 600px;
    margin: 0 auto;
}

.share-demo-scene {
    grid-area: 1 / 1;
    transition: opacity 0.6s ease;
    will-change: opacity;
}

.share-demo-scene:not(.is-current) {
    opacity: 0;
}

.share-demo-list {
    border: 1px solid var(--border-color);
    background: #fff;
}

.share-demo-list th,
.share-demo-list td {
    text-align: center;
}

.share-demo-list th:first-child,
.share-demo-list td:first-child {
    text-align: left;
}

.share-demo-list th:nth-child(1) { width: 40%; }
.share-demo-list th:nth-child(2) { width: 14%; }
.share-demo-list th:nth-child(3) { width: 14%; }
.share-demo-list th:nth-child(4) { width: 15%; }
.share-demo-list th:nth-child(5) { width: 17%; }

/* Staff or External beside each name, as the app shows it */
.share-demo-org {
    margin-left: 0.3rem;
    padding: 1px 7px;
    border-radius: var(--badge-radius);
    font-size: 0.7rem;
    font-weight: 600;
}

.share-demo-org.is-staff {
    background-color: var(--secondary-ultra-light);
    color: var(--secondary);
}

.share-demo-org.is-external {
    background-color: var(--muted-light);
    color: var(--muted);
}

/* The permission tick boxes, drawn as the app draws them */
.share-demo-check {
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    border: 2px solid var(--secondary);
    border-radius: 3px;
    background-color: #fff;
}

.share-demo-check.is-on {
    background-color: var(--secondary);
}

.share-demo-check.is-on::after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 0.5px;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Someone outside the organisation shows as Invited until they accept */
.share-demo-badge {
    padding: 2px 8px;
    border-radius: var(--badge-radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.share-demo-badge.is-invited {
    background-color: var(--secondary-ultra-light);
    color: var(--secondary);
}

.share-demo-badge.is-active {
    background-color: var(--success-light);
    color: var(--success);
}

/* -----------------------------
 * Small screens
 * ----------------------------- */
@media (max-width: 991.98px) {
    /* Stacked, each diagram follows its text with a little air */
    .feature-diagram {
        margin-top: 0.5rem;
    }
}


@media (max-width: 575.98px) {
    /* As in the app, a phone shows only the name, Submit and status in the Shared With list */
    .share-demo-wide {
        display: none;
    }

    .share-demo-list th:nth-child(1) { width: 52%; }
    .share-demo-list th:nth-child(3) { width: 20%; }
    .share-demo-list th:nth-child(5) { width: 28%; }

    /* On a phone the list stands alone, as the app's own list does */
    .snap-demo-routes {
        display: none;
    }

    /* On a phone the links sit closer together so they fit across at full size. If a very narrow screen can't
       fit them, they scroll sideways within the bar rather than wrapping (the auto margins centre them when they
       fit). */
    .features-bar {
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0.45rem 0.4rem;
    }

    .features-bar-link {
        padding: 4px 8px;
        font-size: 0.9375rem;
    }

    .features-bar-link:first-child {
        margin-left: auto;
    }

    .features-bar-link:last-child {
        margin-right: auto;
    }

    .features-bar::-webkit-scrollbar {
        display: none;
    }

    .feature .section-title,
    .feature .section-lead {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Once the diagrams have shrunk to phone size, their labels are enlarged to stay readable */
    .feature-diagram text {
        font-size: 22px;
    }

    /* Captions the text beside already covers step aside */
    .feature-diagram .wide-only {
        display: none;
    }
}