/* _content/MemoryGame.Web/Components/Layout/BuildStamp.razor.rz.scp.css */
/* Scoped to the component, like the other layout pieces here.

   Quiet on purpose: readable when you go looking for it, close to invisible the
   rest of the time. It sits above page content because it is fixed, so it stays
   small and low-contrast rather than competing with anything. */

.build-stamp[b-zc0uodtuuz] {
    position: fixed;
    right: .5rem;
    bottom: .35rem;
    z-index: 1030;
    font-size: .68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
    padding: .25rem .45rem;
    border-radius: 4px;
    color: #6c757d;
    background: rgba(127, 127, 127, .12);
    opacity: .45;
    transition: opacity .15s ease;
}

/* Hover only. It is text now, so there is nothing to focus. */
.build-stamp:hover[b-zc0uodtuuz] {
    opacity: 1;
    color: #495057;
}

.build-stamp-warn[b-zc0uodtuuz] {
    color: #b8860b;
    font-weight: 600;
}

/* Follows the viewer's theme rather than assuming the light one. */
@media (prefers-color-scheme: dark) {
    .build-stamp[b-zc0uodtuuz] {
        color: #adb5bd;
        background: rgba(255, 255, 255, .08);
    }

    .build-stamp:hover[b-zc0uodtuuz] {
        color: #dee2e6;
    }
}

/* On a narrow screen it would otherwise sit on whatever is in that corner. */
@media (max-width: 575.98px) {
    .build-stamp[b-zc0uodtuuz] {
        font-size: .62rem;
        opacity: .3;
    }
}
/* _content/MemoryGame.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* THE PAGE SCROLLS, NOT A BOX INSIDE IT.

   This used to pin .main-container to 100vh and give <main> its own overflow, so the document was
   exactly one viewport tall and everything scrolled inside it. Two things came of that, and both
   were reported as bugs before this was understood as one:

     * TWO SCROLLBARS. The document is exactly viewport height, so anything that adds a pixel - a
       zoom level, a horizontal scrollbar appearing, a dev-time script with a line box - gives the
       document a scrollbar of its own beside main's.
     * DEAD SPACE AT THE BOTTOM ON A PHONE. 100vh is the viewport WITHOUT the address bar, so the
       container is taller than what you can see, and the end of the page sits under the browser's
       own furniture.

   A page that scrolls normally has neither problem, and mobile browsers collapse their address bar
   on the way down, which the old version prevented. The bar stays put by being sticky. */
.main-container[b-9xuna8kxpr] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main[b-9xuna8kxpr] {
    flex: 1;
    background-color: var(--app-ground);
}

.page-content[b-9xuna8kxpr] {
    padding: 1.5rem;
}

/* --- Navigation Styling --- */
/* Sticky, now that the page itself scrolls: the bar stayed in view for free when it was inside a
   scrolling box, and this is what buys that back. */
[b-9xuna8kxpr] .top-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--app-bar);
    color: var(--app-surface);
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column; /* Stack brand on top of links on mobile */
    align-items: center;
    gap: 10px;
}

[b-9xuna8kxpr] .nav-brand {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 5px 0;
    /* On a phone the brand row holds the toggle at its far right; from 768px up the toggle is
       gone and this collapses back to just the logo. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

[b-9xuna8kxpr] .nav-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    color: var(--app-surface);
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
}

    [b-9xuna8kxpr] .nav-toggle:hover {
        border-color: var(--app-accent);
        color: var(--app-accent);
    }

/* Hidden on a phone until the toggle says otherwise. Not display:none on the container itself -
   .open has to be able to bring it back, and a row that was never laid out cannot animate. */
/* =========================================
   THE PHONE DRAWER

   Slides in from the left over a dimmed backdrop, items stacked, closing on
   selection, on the backdrop, or on Escape. It is what almost every app does,
   and the reason it suits this nav in particular is that this nav is not flat:
   Explore, Library and Admin have menus inside them. A drawer turns those into
   indented sections; the wrapped row it replaces had them opening as floating
   panels over the page, which is a menu inside a menu on the smallest screen
   in the world.

   Left rather than right, which is the convention. The argument for the right
   is thumb reach on a large phone, and it is a real argument - but the button
   that opens this sits top-left, and a panel that flies out from the opposite
   side of the screen from the control that summoned it is its own small
   confusion.
========================================= */
[b-9xuna8kxpr] .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 320px);
    background-color: var(--app-bar);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 0 1rem;
    overflow-y: auto;
    /* Off-screen rather than display:none, so it can slide - and so its
       contents are laid out and measurable before it is ever opened. */
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, .35);
}

    [b-9xuna8kxpr] .nav-links.open {
        transform: translateX(0);
    }

@media (prefers-reduced-motion: reduce) {
    [b-9xuna8kxpr] .nav-links {
        transition: none;
    }
}

/* The dimmed page behind it. A tap anywhere out there closes the drawer, which
   is the gesture people try first and the one a panel with no way out fails. */
[b-9xuna8kxpr] .nav-scrim {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1001;
    border: 0;
    padding: 0;
}

[b-9xuna8kxpr] .nav-drawer-close {
    align-self: flex-end;
    background: none;
    border: 0;
    color: var(--app-bar-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: .4rem .9rem 1rem;
    cursor: pointer;
}

    [b-9xuna8kxpr] .nav-drawer-close:hover {
        color: var(--app-surface);
    }

[b-9xuna8kxpr] .nav-item {
    color: var(--app-bar-muted);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    font-size: 1rem;
    padding: .8rem 1.25rem;
}

    [b-9xuna8kxpr] .nav-item i {
        font-size: 1.15rem;
        width: 1.4rem;
        text-align: center;
    }

    [b-9xuna8kxpr] .nav-item.active {
        color: var(--app-surface);
        border-bottom: 2px solid var(--app-accent);
    }

        /* The icon carries the accent; the label stays white so it reads as a label rather than
           as a link that has been visited. */
        [b-9xuna8kxpr] .nav-item.active i {
            color: var(--app-accent);
        }

/* --- Explore Dropdown (Study / Test / Memorials collapsed into one menu) --- */
[b-9xuna8kxpr] .dropdown-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: stretch;
}

/* In the drawer: part of the list, indented under the thing that opened it.
   The desktop rules below put it back to a floating panel. */
[b-9xuna8kxpr] .dropdown-nav-menu {
    background-color: rgba(0, 0, 0, .18);
    overflow: hidden;
    z-index: 1001;
}

[b-9xuna8kxpr] .dropdown-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 12px 2.6rem;
    color: var(--app-bar-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

    [b-9xuna8kxpr] .dropdown-nav-link:last-child {
        border-bottom: none;
    }

    [b-9xuna8kxpr] .dropdown-nav-link:hover {
        background-color: rgba(255, 255, 255, .06);
        color: var(--app-surface);
    }

    [b-9xuna8kxpr] .dropdown-nav-link.active {
        color: var(--app-accent);
        font-weight: 700;
    }

/* Group label inside a dropdown. Same shape as the home page's section headings,
   so "Remember" and "Browse" read as the same distinction in both places. */
[b-9xuna8kxpr] .dropdown-nav-heading {
    padding: 12px 16px 5px 2.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--app-bar-faint);
    background: none;
    border-bottom: 0;
}

[b-9xuna8kxpr] .dropdown-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

/* --- Desktop Layout --- */
@media (min-width: 768px) {
    [b-9xuna8kxpr] .top-nav {
        flex-direction: row; /* Side by side brand and links */
        justify-content: space-between;
        height: 60px;
        /* The bar stays full width - it is the app's edge - but its CONTENTS stop where the
           widest page stops, so the logo and the links line up with what is underneath them
           instead of hugging the window. On a wide screen they were pinned to the far right
           while the page sat in the middle.
           
           Done with padding rather than an inner wrapper because the bar has no spare element
           to centre, and max() keeps the 2rem gutter on anything narrower than the cap. This is
           what heaphomestead.com does too, at its own width. */
        padding-inline: max(2rem, calc((100% - var(--app-width-tool)) / 2));
    }

    [b-9xuna8kxpr] .nav-brand {
        width: auto;
    }

    /* The toggle is a phone control. Hiding it here rather than rendering it conditionally in C#
       means resizing a desktop window never leaves the markup disagreeing with the layout. */
    [b-9xuna8kxpr] .nav-toggle,
    [b-9xuna8kxpr] .nav-drawer-close {
        display: none;
    }

    [b-9xuna8kxpr] .nav-links {
        /* Back to a row in the bar: static, no drawer, no transform, whatever
           the phone toggle last said. */
        position: static;
        transform: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
        justify-content: flex-end;
        gap: 30px;
        padding: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    [b-9xuna8kxpr] .nav-scrim {
        display: none;
    }

    [b-9xuna8kxpr] .nav-item,
    [b-9xuna8kxpr] .nav-item-btn {
        flex-direction: column;
        gap: 0;
        width: auto;
        font-size: 0.75rem;
        padding: 5px;
    }

        [b-9xuna8kxpr] .nav-item-btn i {
            font-size: 1.3rem;
            width: auto;
        }

    [b-9xuna8kxpr] .dropdown-nav-item {
        flex-direction: row;
        align-items: center;
    }

    [b-9xuna8kxpr] .dropdown-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        min-width: 180px;
    }

    [b-9xuna8kxpr] .dropdown-nav-link {
        padding: 12px 16px;
        color: #212529;
        font-size: 0.9rem;
        border-bottom: 1px solid #f1f2f6;
    }

        [b-9xuna8kxpr] .dropdown-nav-link:hover {
            background-color: #f8f9fa;
            color: var(--app-accent);
        }

    [b-9xuna8kxpr] .dropdown-nav-heading {
        padding: 10px 16px 5px;
        background: #fbfcfd;
        border-bottom: 1px solid #f1f2f6;
    }

    [b-9xuna8kxpr] .nav-item i {
        display: block; /* Ensures it sits on its own line above the text */
        font-size: 1.4rem;
        margin-bottom: 2px;
        color: inherit; /* Inherits the blue color when active */
    }
}

[b-9xuna8kxpr] .nav-item-form {
    display: inline-block;
    margin: 0;
}

[b-9xuna8kxpr] .nav-item-btn {
    background: none;
    border: none;
    color: var(--app-bar-muted);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    padding: .8rem 1.25rem;
    cursor: pointer;
    transition: color 0.2s;
}

    [b-9xuna8kxpr] .nav-item-btn i {
        font-size: 1.15rem;
        width: 1.4rem;
        text-align: center;
    }

    /* Match the hover/active states of the NavLinks */
    [b-9xuna8kxpr] .nav-item-btn:hover {
        color: var(--app-surface);
    }

[b-9xuna8kxpr] .nav-item:hover {
    color: var(--app-surface);
}

@media (min-width: 768px) {
    [b-9xuna8kxpr] .nav-item-btn {
        flex-direction: row;
        font-size: 1rem;
        gap: 8px;
    }
}
/* _content/MemoryGame.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.sidebar-island[b-0cmymwtthv] {
    background-color: #212529;
    color: white;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header[b-0cmymwtthv] {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 15px;
}

.toggle-btn[b-0cmymwtthv] {
    color: white;
    font-size: 1.5rem;
    padding: 0;
    background: none;
    border: none;
}

.nav-links[b-0cmymwtthv] {
    display: flex;
    flex-direction: column;
}

.nav-link[b-0cmymwtthv] {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: #ced4da;
    text-decoration: none;
}

    .nav-link:hover[b-0cmymwtthv] {
        background-color: #343a40;
    }

    .nav-link.active[b-0cmymwtthv] {
        background-color: var(--app-accent);
        color: white;
    }

/* --- DESKTOP --- */
@media (min-width: 768.1px) {
    .sidebar-island.expanded[b-0cmymwtthv] {
        width: 250px;
    }

    .sidebar-island.collapsed[b-0cmymwtthv] {
        width: 65px;
    }

        .sidebar-island.collapsed .text[b-0cmymwtthv] {
            display: none;
        }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .sidebar-island[b-0cmymwtthv] {
        width: 100%;
    }

        .sidebar-island.collapsed .nav-links[b-0cmymwtthv] {
            display: none;
        }
}
/* _content/MemoryGame.Web/Components/Layout/Sidebar.razor.rz.scp.css */
/* --- The Backdrop --- */
.sidebar-backdrop[b-fj8x0j7605] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Dim the background */
    z-index: 1900; /* Just below the sidebar */
    backdrop-filter: blur(2px);
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .sidebar-container[b-fj8x0j7605] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 2000;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    }

        .sidebar-container.collapsed[b-fj8x0j7605] {
            transform: translateX(-100%);
        }

    /* Make sure the header has enough room for the close button */
    .sidebar-header[b-fj8x0j7605] {
        justify-content: space-between;
        padding-right: 1rem;
    }
}

/* Keep your existing .nav-link, .icon, etc. styles below */
/* _content/MemoryGame.Web/Components/Pages/Home.razor.rz.scp.css */
/* Existing Hero & Card Styles */
.hero-section[b-7boaeydxvp] {
	background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-ground) 100%);
}

.feature-card[b-7boaeydxvp] {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-radius: 16px;
}

	.feature-card:hover[b-7boaeydxvp] {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
	}

.feature-icon[b-7boaeydxvp] {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	border-radius: 12px;
	font-size: 2rem;
}

.bg-primary-subtle[b-7boaeydxvp] {
	background-color: var(--app-slate-tint);
}

h1[b-7boaeydxvp] {
	letter-spacing: -1px;
}

/* =========================================
   NEW: DYNAMIC HOOK CHAT STYLES
========================================= */

.hook-chat-wrapper[b-7boaeydxvp] {
	max-width: 650px;
	width: 100%;
	margin: 0 auto;
}

/* The sample exchange, sized to sit under the hero rather than to fill it. */
.hook-sample[b-7boaeydxvp] {
	max-width: 560px;
	width: 100%;
	margin: 2rem auto 0;
	background-color: var(--app-surface);
	border: 1px solid var(--app-rule);
	border-radius: 10px;
	padding: 1rem 1.15rem 1.15rem;
	text-align: center;
}

.hook-sample-who[b-7boaeydxvp] {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--app-muted);
	margin-bottom: 0.6rem;
	text-align: left;
}

.hook-bubble-incoming[b-7boaeydxvp] {
	background-color: var(--app-surface);
	color: var(--app-text);
	padding: 0.85rem 1.1rem;
	border-radius: 4px 14px 14px 14px;
	border: 1px solid var(--app-rule);
	font-size: 1rem;
	line-height: 1.55;
	position: relative;
	border-left: 4px solid var(--app-accent);
	/* --- NEW: Forces HTML to respect \n line breaks --- */
	white-space: pre-wrap;
}

.hook-btn-reply[b-7boaeydxvp] {
	background-color: var(--app-accent);
	color: white;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 0.5rem 1.1rem;
	border-radius: 14px 14px 4px 14px;
	font-weight: 600;
	font-size: 0.92rem;
	margin-top: 0.75rem;
	transition: all 0.2s ease-in-out;
	max-width: 550px;
	border: none;
}

	.hook-btn-reply:hover[b-7boaeydxvp] {
		background-color: var(--app-accent-dark);
		transform: translateY(-2px);
		color: white;
		box-shadow: 0 6px 15px rgba(var(--app-accent-rgb), 0.25) !important;
	}

.tracking-wider[b-7boaeydxvp] {
	letter-spacing: 0.05em;
}

.hover-underline:hover[b-7boaeydxvp] {
	text-decoration: underline !important;
}

.animate-fade-in[b-7boaeydxvp] {
	animation: fadeIn-b-7boaeydxvp 0.4s ease-out forwards;
}

@keyframes fadeIn-b-7boaeydxvp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* --- NEW: Avatar for the Home Page Hook --- */
.hook-avatar[b-7boaeydxvp] {
	width: 90px;
	height: 90px;
	object-fit: contain;
	background-color: var(--app-surface);
	border-radius: 50%;
	border: 3px solid var(--app-surface);
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	animation: fadeIn-b-7boaeydxvp 0.4s ease-out forwards;
}
/* _content/MemoryGame.Web/Components/Pages/Memory/Event.razor.rz.scp.css */
/* The fullscreen modal's styles live in wwwroot/app.css, and the overlay itself is rendered by
   MediaLightbox. The copy that used to sit here styled a modal this page owned; that modal is
   gone, because an overlay inside this page's .slide-fade-in wrapper has its stacking context
   capped by the animation and the app bar paints over it. */

/* =========================================
   ZOOM INDICATOR (Magnifying Glass)
========================================= */
.zoom-indicator[b-klai0o6sf9] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: var(--app-accent);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    border: 2px solid #ffffff;
    transition: transform 0.2s ease;
}

.position-relative:active .zoom-indicator[b-klai0o6sf9] {
    transform: scale(0.9);
}

/* =========================================
   HORIZONTAL TIMELINE LAYOUT
========================================= */
.timeline-horizontal-container[b-klai0o6sf9] {
    width: 100%;
    overflow-x: auto; /* Allows swiping left/right */
    padding: 20px 10px 40px 10px;
    /* Makes scrolling buttery smooth on iOS/touch devices */
    -webkit-overflow-scrolling: touch;
    /* Optional: Hides the ugly scrollbar for a cleaner look */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .timeline-horizontal-container[b-klai0o6sf9]::-webkit-scrollbar {
        display: none;
    }

.timeline-horizontal-grid[b-klai0o6sf9] {
    display: grid;
    /* 3 Rows: Top Content, The Line (4px), Bottom Content */
    grid-template-rows: 1fr 4px 1fr;
    /* Each memory card is exactly 350px wide */
    grid-auto-columns: 350px;
    grid-auto-flow: column;
    gap: 0 40px;
    position: relative;
    /* Ensures the grid expands horizontally as new items are added */
    min-width: max-content;
    align-items: center;
}

/* The Continuous Center Line */
.timeline-line[b-klai0o6sf9] {
    grid-row: 2; /* Forces it into the middle row */
    grid-column: 1 / -1; /* Spans from the first card to the very last card */
    background-color: var(--app-accent);
    height: 4px;
    border-radius: 2px;
    width: 100%;
}

.timeline-h-item[b-klai0o6sf9] {
    position: relative;
    width: 100%;
}

    /* Top items sit in the first row and anchor to the bottom (near the line) */
    .timeline-h-item.top-item[b-klai0o6sf9] {
        grid-row: 1;
        align-self: end;
        padding-bottom: 30px;
    }

    /* Bottom items sit in the third row and anchor to the top */
    .timeline-h-item.bottom-item[b-klai0o6sf9] {
        grid-row: 3;
        align-self: start;
        padding-top: 30px;
    }

    /* The Timeline Dots */
    .timeline-h-item[b-klai0o6sf9]::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: white;
        border: 4px solid var(--app-accent);
        border-radius: 50%;
        left: 50%;
        margin-left: -10px; /* Perfectly centers the dot horizontally */
        z-index: 2;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Top dots overlap the center line downward */
    .timeline-h-item.top-item[b-klai0o6sf9]::after {
        bottom: -8px;
    }

    /* Bottom dots overlap the center line upward */
    .timeline-h-item.bottom-item[b-klai0o6sf9]::after {
        top: -8px;
    }

.timeline-content[b-klai0o6sf9] {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

/* Smooth fade-in animation for new items.

   Opacity only. This had the same transform the memorial's copy had, and the same hazard: a
   persisted transform makes the element a containing block for any position:fixed descendant,
   which is how a full-screen overlay ends up anchored to a div halfway down the page. Nothing
   under this one is fixed today; it is changed because the trap does not announce itself and the
   next thing placed in here would simply be broken. See Memorial.razor.css for the full story. */
.slide-fade-in[b-klai0o6sf9] {
    animation: slideRightFade-b-klai0o6sf9 0.4s ease-out forwards;
}

@keyframes slideRightFade-b-klai0o6sf9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================
   THEIR STORIES - LANES THAT SHARE THEIR ROWS
   ========================================= */

/* One row per date across every lane, so the same day is at the same height in all of them and
   the columns end together. Grid rather than a row of independent lists, which is what they were:
   each lane closed up its own gaps, the day the couple met sat at two different heights, and the
   convergence curves below began under a column that had finished a screenful earlier. */
.story-grid[b-klai0o6sf9] {
    display: grid;
    column-gap: 1.5rem;
    /* No row-gap. The line down each lane is drawn by the cells themselves, and a gap between
       them would break it into dashes. Spacing lives inside the cell instead. */
    row-gap: 0;
    align-items: stretch;
}

.story-person[b-klai0o6sf9] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

/* The lane's line. On EVERY cell, including the empty ones - a stretched empty cell is what keeps
   somebody's timeline continuous through the years they have nothing written down for. */
.story-cell[b-klai0o6sf9] {
    border-left: 2px solid var(--app-rule);
    padding-left: 1.4rem;
    padding-bottom: 1.25rem;
}

.story-moment[b-klai0o6sf9] {
    position: relative;
}

    .story-moment + .story-moment[b-klai0o6sf9] {
        margin-top: 1rem;
    }

.story-dot[b-klai0o6sf9] {
    position: absolute;
    left: -1.72rem;
    top: .45rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--app-accent);
}

/* The lanes stay side by side on a phone, and that IS a change: they used to stack at this width.
   Two reasons. A shared-row grid cannot be collapsed to one column by CSS alone - the cells are
   laid out row by row, so one column would interleave both people's moments into a single
   nonsensical list. And stacking was already at odds with what sits underneath: the convergence
   curves were drawn whatever the width, so a narrow screen got two lives told one after the other
   and then a picture of them meeting.

   What gives instead is everything inside the cell. The pictures come down hardest, because they
   are what makes a 170px lane unreadable rather than merely narrow.

   !important only because RenderMedia writes its 180px cap as an inline style, which no ordinary
   rule can reach. */
@media (max-width: 767.98px) {
    .story-grid[b-klai0o6sf9] {
        column-gap: .75rem;
        font-size: .9rem;
    }

    .story-cell[b-klai0o6sf9] {
        padding-left: .9rem;
        padding-bottom: .9rem;
    }

    .story-dot[b-klai0o6sf9] {
        left: -1.2rem;
    }

    .story-person[b-klai0o6sf9] {
        gap: .5rem;
    }

        .story-person img[b-klai0o6sf9],
        .story-person > div[aria-hidden="true"][b-klai0o6sf9] {
            width: 40px !important;
            height: 40px !important;
        }

        .story-person .fs-5[b-klai0o6sf9] {
            font-size: 1rem !important;
        }

    .story-cell img[b-klai0o6sf9],
    .story-cell video[b-klai0o6sf9] {
        max-height: 110px !important;
    }
}

/* The frame around the whole figure: the lanes, the curves, and the occasion they arrive at.

   Without it the curves float - they leave the centre of each column while the spines run down the
   left edge of each, so the two never actually touch and the eye reads a join that did not quite
   happen. Boxed, they are lines drawn inside one object rather than lines that nearly meet.

   Surface rather than ground, and the same rule and radius as the other blocks on this page, so it
   reads as a panel the page already owns and not a new kind of thing. */
.story-panel[b-klai0o6sf9] {
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: 12px;
    padding: 1.5rem 1.5rem .75rem;
}

@media (max-width: 575.98px) {
    .story-panel[b-klai0o6sf9] {
        padding: 1rem .85rem .5rem;
    }
}

/* =========================================
   ADD TO CALENDAR
   ========================================= */

/* A small menu under the date, drawn the way Host tools is drawn: a quiet line that opens a panel
   over the page rather than pushing the invitation down. The header is centred, so this is too -
   and the panel is centred on its own summary rather than hung off one edge, which at this width
   is the only placement that cannot end up off the side of the screen. */
.add-to-calendar[b-klai0o6sf9] {
    position: relative;
    display: inline-block;
    margin-top: .25rem;
}

    .add-to-calendar > summary[b-klai0o6sf9] {
        list-style: none;
        cursor: pointer;
    }

        .add-to-calendar > summary[b-klai0o6sf9]::-webkit-details-marker {
            display: none;
        }

.add-to-calendar-chevron[b-klai0o6sf9] {
    font-size: .75rem;
    transition: transform .15s ease;
}

.add-to-calendar[open] .add-to-calendar-chevron[b-klai0o6sf9] {
    transform: rotate(180deg);
}

.add-to-calendar-panel[b-klai0o6sf9] {
    position: absolute;
    top: calc(100% + .35rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    min-width: 14rem;
    padding: .35rem 0;
    text-align: left;
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: .65rem;
    box-shadow: 0 .4rem 1.25rem rgba(var(--app-slate-rgb), .16);
}

.add-to-calendar-item[b-klai0o6sf9] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    color: var(--app-text);
    text-decoration: none;
    font-weight: 500;
}

/* One of the three is a button rather than a link - emailing yourself a copy is an action, not a
   destination - and a button brings its own background, border and centred text. Stripped back to
   the row the two anchors beside it draw, so the menu reads as three of the same thing. */
button.add-to-calendar-item[b-klai0o6sf9] {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

    button.add-to-calendar-item:disabled[b-klai0o6sf9] {
        cursor: default;
        opacity: .65;
    }

    .add-to-calendar-item:hover[b-klai0o6sf9],
    .add-to-calendar-item:focus-visible[b-klai0o6sf9] {
        background-color: var(--app-sunken);
        color: var(--app-accent);
    }

    .add-to-calendar-item i[b-klai0o6sf9] {
        color: var(--app-muted);
    }

    .add-to-calendar-item:hover i[b-klai0o6sf9],
    .add-to-calendar-item:focus-visible i[b-klai0o6sf9] {
        color: var(--app-accent);
    }

/* The line that keeps the host's pictures and the guests' apart when the gallery shows both.
   Quiet on purpose - it is a label, not a section heading; the page already has its headings and
   this sits inside the invitation's own picture area. */
.gallery-group[b-klai0o6sf9] {
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-muted);
}

/* =========================================
   THE TWO FACTS, AND WHAT ACTS ON THEM
   ========================================= */

/* The day with the way to put it in a calendar; the place with the way to get to it. Both
   pairings were already true and nothing said so - the controls sat under their facts by position
   alone, which is the weakest thing holding two elements together and the first to break when
   anything is added between them.

   Quiet borders, not cards in the Bootstrap sense: no shadow, no fill beyond the page's own
   surface. They are here to group, and a group that shouts competes with the invitation it sits
   inside. */
.fact-cards[b-klai0o6sf9] {
    align-items: stretch;
}

.fact-card[b-klai0o6sf9] {
    flex: 0 1 auto;
    min-width: 14rem;
    padding: .85rem 1.25rem;
    border: 1px solid var(--app-rule);
    border-radius: 10px;
    background-color: var(--app-surface);
}

/* Separated from the fact by a rule rather than a gap: the control belongs to what is above it,
   and a plain space would leave it looking like the next thing down. */
.fact-card-action[b-klai0o6sf9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .5rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--app-rule);
}

@media (max-width: 575.98px) {
    .fact-card[b-klai0o6sf9] {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* The venue, which is also the way to it.

   It has to read as the fact it is first and reveal itself as a control on approach, so it takes
   no colour or underline at rest - the fact card's border already says the two lines belong
   together, and a blue venue name would read as a link to a page about the venue rather than a
   map. Hover and focus are where it admits what it does. */
.fact-place[b-klai0o6sf9] {
    display: block;
    color: inherit;
    text-decoration: none;
}

    .fact-place:hover[b-klai0o6sf9],
    .fact-place:focus-visible[b-klai0o6sf9] {
        color: var(--app-accent);
    }

        .fact-place:hover .fw-bold[b-klai0o6sf9],
        .fact-place:focus-visible .fw-bold[b-klai0o6sf9] {
            text-decoration: underline;
        }

        /* The address under it is muted, and inherits nothing from a hover on its parent unless
           it is told to - so it is told to, or half the control lights up and half does not. */
        .fact-place:hover .text-muted[b-klai0o6sf9],
        .fact-place:focus-visible .text-muted[b-klai0o6sf9] {
            color: var(--app-accent) !important;
        }

/* A link and its QR code, bounded like the day and the place are. Narrower than a fact card,
   because a pill and a folded code need less room than a date and a venue - and a box far wider
   than what it holds stops reading as a group and starts reading as an empty panel. */
.link-card[b-klai0o6sf9] {
    min-width: 0;
    padding: .85rem 1rem;
}

/* Between the invitation's own asks and the evening's entertainment.

   "Below the links" was carried by white space alone, and white space says "later" rather than
   "a different kind of thing". Short and centred rather than edge to edge: it separates two
   groups in the middle of a centred column, and a full-width rule would cut the page in half. */
.section-divider[b-klai0o6sf9] {
    width: min(18rem, 60%);
    height: 1px;
    margin: 1.75rem auto;
    background-color: var(--app-rule);
}
/* _content/MemoryGame.Web/Components/Pages/Memory/Library.razor.rz.scp.css */
.top-controls[b-flitkqsp8e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.search-box[b-flitkqsp8e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 350px;
}

    .search-box input[b-flitkqsp8e] {
        width: 100%;
    }

.pagination-controls[b-flitkqsp8e] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding-top: 10px;
}

.page-info[b-flitkqsp8e] {
    font-weight: 500;
    color: var(--app-muted);
}

.image-list[b-flitkqsp8e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.image-card[b-flitkqsp8e] {
    display: flex;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--app-rule);
    border-radius: 6px;
    background: var(--app-surface);
}

.thumb[b-flitkqsp8e] {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background-color: var(--app-sunken);
    border: 1px solid var(--app-rule);
    border-radius: 6px;
}

.info[b-flitkqsp8e] {
    flex: 1;
}

    .info h3[b-flitkqsp8e] {
        margin: 0 0 6px 0;
    }

    .info p[b-flitkqsp8e] {
        margin: 0 0 10px 0;
        color: var(--app-muted);
    }


/* How often the reader has been tested on this Thing.
   
   Quiet on purpose. It is a footnote about the reader's own history, not a property of the Thing,
   and it sits among badges that ARE properties of it - so it reads as an aside rather than
   competing with the name and the categories above it. */
.study-history[b-flitkqsp8e] {
    font-size: .82rem;
    color: var(--app-muted, #6c757d);
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Never been tested on this one.
   
   Warmer than .study-history beside it, because it is an invitation rather than a record - but
   still quieter than the name and the categories it sits under. It is a suggestion, not a badge
   the Thing earned. */
.study-new[b-flitkqsp8e] {
    font-size: .82rem;
    color: var(--app-accent, #6d4c9a);
    display: flex;
    align-items: center;
    gap: .35rem;
}
/* _content/MemoryGame.Web/Components/Pages/Memory/Match.razor.rz.scp.css */
/* The board.

   Square tiles in a grid whose COLUMN COUNT is chosen by MatchBoard.ColumnsFor and handed down as
   --match-columns, rather than left to auto-fit. Auto-fit was the first version and it laid twelve
   cards out nine across and then three on a desktop - a row with a remainder rather than a board.
   What a player is remembering here is where a card was, so the shape is part of the game.

   The cards shrink to fit instead of wrapping, so that shape survives all the way down to a phone. */
.match-grid[b-orlvub2yr3] {
    display: grid;
    gap: .6rem;
    /* The count comes from the page, which got it from MatchBoard. minmax(0, 1fr) rather than a
       minimum width so the cards SHRINK on a narrow screen instead of overflowing it - the board
       keeps its shape all the way down to a phone, which is the point of choosing the shape. */
    grid-template-columns: repeat(var(--match-columns, 4), minmax(0, 1fr));

    /* Stops a board becoming a few enormous tiles on a wide screen - but SCALED BY THE COLUMN
       COUNT, because a flat cap is a cap chosen for one board and inherited by the others. At a
       flat 34rem a twelve-pair board squeezed six columns into the width picked for four, and the
       tiles came out at 83px on a 1100px desktop with room to spare either side. */
    max-width: calc(var(--match-columns, 4) * var(--match-tile, 8.5rem));
    margin-inline: auto;
}

.match-card[b-orlvub2yr3] {
    /* Square, whatever is on it. A name is short and a photograph is any shape, and a grid whose
       cells changed height as cards turned over would move the board under the player's finger -
       which in a memory game is not cosmetic, it loses you the position you were remembering. */
    aspect-ratio: 1;

    /* The containing block for the picture, which is positioned rather than laid out - see
       .match-image for why. */
    position: relative;

    /* And a query container, so the NAME can be sized against this tile rather than against the
       viewport. A board of twelve pairs on a phone makes tiles a third the size of the same board
       on a desktop, and one font size cannot serve both. */
    container-type: inline-size;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    padding: .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, transform .1s ease, background-color .15s ease;
}

    .match-card:hover:not(:disabled)[b-orlvub2yr3],
    .match-card:focus-visible[b-orlvub2yr3] {
        border-color: var(--app-accent);
    }

    .match-card:active:not(:disabled)[b-orlvub2yr3] {
        transform: scale(.97);
    }

    /* Face down. Deliberately plain - a patterned back competes with the faces, and the faces are
       the thing being remembered. */
    .match-card:not(.turned):not(.matched)[b-orlvub2yr3] {
        background: var(--app-sunken);
    }

    .match-card.turned[b-orlvub2yr3] {
        border-color: var(--app-accent);
    }

    /* Found. Stays on the board rather than disappearing: it is a link to the subject now, and a
       board that empties as you play takes away the record of what you found. */
    /* ⚠ FOUND HAS TO BE VISIBLE ON A PICTURE TOO. The first version said so with a tinted
       background, which works on a name card and is completely hidden behind a photograph - so
       half of every matched pair looked exactly like a card that happened to be turned over. The
       mark is drawn on top instead, and the border is a real green rather than a subtle one. */
    .match-card.matched[b-orlvub2yr3] {
        border-color: var(--bs-success);
        background: var(--bs-success-bg-subtle);
        cursor: pointer;
    }

        .match-card.matched[b-orlvub2yr3]::after {
            content: "";
            position: absolute;
            top: .3rem;
            right: .3rem;
            width: .85rem;
            height: .85rem;
            border-radius: 50%;
            background: var(--bs-success);

            /* A ring in the page colour, so the dot reads against a dark photograph as well as a
               light one. */
            box-shadow: 0 0 0 2px var(--bs-body-bg);
            z-index: 2;
        }

    /* The pause after a wrong pair. Not-allowed would read as an error; this is the game holding
       the cards up so they can be read. */
    .match-card:disabled[b-orlvub2yr3] {
        cursor: default;
    }

.match-back[b-orlvub2yr3] {
    font-size: 1.4rem;
    color: var(--bs-secondary-color);
}

/* ⚠ POSITIONED, NOT A FLEX ITEM, and this was a real bug rather than a preference. As a flex item
   with height: 100% the percentage had nothing definite to resolve against, so the image kept its
   intrinsic height - 669px inside an 83px tile - and object-fit never applied. overflow: hidden on
   the card meant it did not break the layout; it just showed a thin clipped band of each
   photograph, so every face card looked like an anonymous smear of colour. A memory game whose
   pictures are indistinguishable is not a memory game.

   inset: 0 against a relatively-positioned card gives a definite box, so cover crops properly.
   It resolves against the PADDING box, so the border still shows. */
.match-image[b-orlvub2yr3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* Cover, so portraits and landscapes both fill the square. A contained image would leave
       letterboxing that differs per card, and differing shapes are a tell - you would remember
       "the wide one" instead of the face. */
    object-fit: cover;
    border-radius: 11px;
}

/* ⚠ THE NAME HAS TO FIT THE TILE, AND SOME NAMES ARE LONG. "Maria Salomea Skłodowska Curie
   (Marie Curie)" on a twelve-pair board at phone width rendered as "Skła dow ka Curie" - clipped
   by the tile's own overflow, which is there to stop a picture spilling out. A name a player
   cannot read is a card they cannot match, so this is a broken game rather than untidy text.

   Sized in cqi - percent of the TILE's width - so it shrinks with the board instead of needing a
   breakpoint per size. clamp() keeps it legible at the bottom and from ballooning at the top, and
   the plain font-size above it is what a browser without container queries gets. */
.match-name[b-orlvub2yr3] {
    font-weight: 700;
    font-size: .8rem;
    font-size: clamp(.55rem, 13cqi, .95rem);
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;

    /* Nine lines of a 55px tile is still nothing anybody can read, but it beats hiding half the
       name: a clipped name looks like a different subject, and the player matches the wrong card. */
    max-height: 100%;
    overflow: hidden;
}

/* ⚠ FOUR COLUMNS ON A PHONE, WHATEVER THE BOARD. Twelve pairs at six columns on a 375px screen
   is a 50px tile, which is too small for a face to be told from another face and far too small for
   a name. Four works out at full rows for every size offered - 12 cards in 4x3, 16 in 4x4, 24 in
   4x6 - so the board keeps its shape and simply gets taller, which a phone scrolls anyway.

   An override rather than a different ColumnsFor: the count is a property of the BOARD, and this
   is a property of the screen it is on. */
@media (max-width: 560px) {
    .match-grid[b-orlvub2yr3] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .match-card[b-orlvub2yr3] {
        transition: none;
    }

        .match-card:active:not(:disabled)[b-orlvub2yr3] {
            transform: none;
        }
}

/* The page is at the TOOL width so the board can use the screen; the writing above it is still
   writing, and a sentence spanning 1320px is unreadable. */
.match-intro[b-orlvub2yr3] {
    max-width: 38rem;
    margin-inline: auto;
}
/* _content/MemoryGame.Web/Components/Pages/Memory/Memorial.razor.rz.scp.css */
/* Main profile photo at the top of a memorial. A fixed frame (instead of just capping height)
   so a wide/landscape image - a logo, say - gets letterboxed on a clean white background instead
   of rendering full-width-but-short and looking lost against the page's dark section. A normal
   portrait photo still fills most of the frame naturally.

   RESTORED after being deleted by accident on 2026-10-06: it sat between two modal rules, and the
   modal styles were removed as a RANGE between section headers rather than by name, so this went
   with them. Without it the portrait has no cap and runs the full width of the column, which is
   how it was noticed. Deliberately bigger than the 320x280 it had before - the accident made the
   case that the old frame was undersized - but still a frame, not the whole column. */
.memorial-hero-image[b-jg6dqoxg7n] {
    width: 100%;
    max-width: 420px;
    height: 360px;
    object-fit: contain;
    background-color: var(--app-surface);
}

/* The fullscreen modal's styles live in wwwroot/app.css, and the overlay itself is rendered by
   MediaLightbox. The copy that used to sit here styled a modal this page owned; that modal is
   gone, because an overlay inside this page's .slide-fade-in wrapper has its stacking context
   capped by the animation and the app bar paints over it. */

/* =========================================
   ZOOM INDICATOR (Magnifying Glass)
========================================= */
.zoom-indicator[b-jg6dqoxg7n] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: var(--app-accent);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    border: 2px solid var(--app-surface);
    transition: transform 0.2s ease;
}

.position-relative:active .zoom-indicator[b-jg6dqoxg7n] {
    transform: scale(0.9);
}

.btn-multiline-pill[b-jg6dqoxg7n] {
    white-space: normal; /* Forces the text to wrap instead of running off the edge */
    height: auto; /* Allows the button to grow dynamically */
    padding: 15px 35px; /* Extra side padding keeps text away from the pinched curves */
    line-height: 1.4; /* Gives multiline text a bit of breathing room */
}

/* Smooth fade for transitioning between views.

   OPACITY ONLY, AND THE MISSING SLIDE IS DELIBERATE. This used to also translateY(10px) -> 0,
   which cost ten pixels of polish and broke every position:fixed element underneath it.

   An element whose computed transform is anything but "none" becomes the containing block for
   its fixed descendants, and `forwards` means the final keyframe's transform persists forever
   after the animation ends. The gallery view wraps <PhotoGallery> in this class, and
   PhotoGallery's full-screen overlay is a fixed element inside it - so "top: 0; left: 0;
   width: 100vw" stopped meaning the viewport and started meaning THIS div. The overlay opened
   below the nav, offset to the right, 100vw wide inside a narrower column (hence a horizontal
   scrollbar), and scrolled away with the page instead of staying put.

   It only showed in gallery mode because the timeline's own modal sits outside this wrapper, as
   a direct child of PageFrame. Same trap, one of the two happened to be clear of it.

   translate: and scale: are not escapes - they create a containing block the same way. Opacity
   does not, which is why the fade stays and the slide goes. */
.slide-fade-in[b-jg6dqoxg7n] {
    animation: fadeInMode-b-jg6dqoxg7n 0.3s ease-out forwards;
}

@keyframes fadeInMode-b-jg6dqoxg7n {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================
   INTERACTIVE REPLY BUTTON
========================================= */
/* .bounce-hint / @keyframes bounceDown now live in wwwroot/app.css - shared
   with WeekRemember.razor instead of being page-scoped here only. */

.interactive-reply-btn[b-jg6dqoxg7n] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    border: 2px solid transparent;
}

    /* Makes the button slightly grow when hovered (for desktop) */
    .interactive-reply-btn:hover[b-jg6dqoxg7n] {
        transform: scale(1.03);
        box-shadow: 0 8px 20px rgba(var(--app-slate-rgb), 0.25) !important;
    }

    /* Creates a satisfying "squish" effect when physically tapped on a phone */
    .interactive-reply-btn:active[b-jg6dqoxg7n] {
        transform: scale(0.96);
        background-color: var(--app-accent-dark); /* Darker on tap */
    }
/* _content/MemoryGame.Web/Components/Pages/Memory/OccasionHostTools.razor.rz.scp.css */
/* Out of the centred column entirely.

   The page reads down the middle - photographs, name, day, place, the three things a guest is
   asked to do. This sits to the right of all of it, where a thing's own controls live in nearly
   every application: a guest's eye never crosses it, and the host knows where to look. Below the
   nav rather than fixed to it, because it belongs to this occasion and not to the app. */
.host-tools-row[b-gm18qzg869] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
    /* The guest's row holds two icons; the host's holds one fold, where this does nothing. */
    gap: .5rem;
}

/* The guest's single icon. Quieter than the host's green fold - it is an offer, not a tool, and
   the invitation underneath it is what the page is for. */
.guest-tv[b-gm18qzg869] {
    display: inline-flex;
    align-items: center;
}

.host-tools[b-gm18qzg869] {
    position: relative;
}

    /* The marker goes the way the QR fold's does; the chevron says the same thing in the same
       direction as every other disclosure in the app. */
    .host-tools > summary[b-gm18qzg869] {
        list-style: none;
        cursor: pointer;
    }

        .host-tools > summary[b-gm18qzg869]::-webkit-details-marker {
            display: none;
        }

.host-tools-summary[b-gm18qzg869] {
    display: inline-flex;
    align-items: center;
}

.host-tools-chevron[b-gm18qzg869] {
    font-size: .75rem;
    transition: transform .15s ease;
}

.host-tools[open] .host-tools-chevron[b-gm18qzg869] {
    transform: rotate(180deg);
}

/* Lifted out of the flow so opening it does not shove the invitation down the page - the host
   pressing this is looking for a television, not rearranging what the guests below are reading. */
.host-tools-panel[b-gm18qzg869] {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 20;
    min-width: 15rem;
    padding: .35rem 0;
    text-align: left;
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: .65rem;
    box-shadow: 0 .4rem 1.25rem rgba(var(--app-slate-rgb), .16);
}

.host-tools-item[b-gm18qzg869] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    color: var(--app-text);
    text-decoration: none;
}

    .host-tools-item:hover[b-gm18qzg869],
    .host-tools-item:focus-visible[b-gm18qzg869] {
        background-color: var(--app-sunken);
        color: var(--app-accent);
    }

    .host-tools-item i[b-gm18qzg869] {
        color: var(--app-muted);
    }

    .host-tools-item:hover i[b-gm18qzg869],
    .host-tools-item:focus-visible i[b-gm18qzg869] {
        color: var(--app-accent);
    }

/* Between the two televisions and the editor: the first two are for a screen in the room right
   now, the third changes the occasion itself. */
.host-tools-rule[b-gm18qzg869] {
    height: 1px;
    margin: .35rem 0;
    background-color: var(--app-rule);
}
/* _content/MemoryGame.Web/Components/Pages/Memory/StudyReader.razor.rz.scp.css */
/* =========================================
   1. LAYOUT CONTROLS & BASICS
========================================= */
.test-layout[b-ci0belu6qm] {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0;
	padding: 20px;
	align-items: start;
}

/* --- STICKY CONVERSATION PROFILE LEFT CARD --- */
.left-panel[b-ci0belu6qm] {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid #f0f0f0;
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem;
}

.image-wrapper[b-ci0belu6qm] {
	position: relative;
	cursor: pointer;
	margin-bottom: 10px;
}

.header-image[b-ci0belu6qm] {
	width: 220px; /* Increased from 150px */
	height: 220px; /* Increased from 150px */
	object-fit: contain;
	background-color: #ffffff;
	border-radius: 50%;
	border: 4px solid #e9ecef;
	box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.zoom-indicator[b-ci0belu6qm] {
	position: absolute;
	bottom: 15px; /* Bumped up from 5px to sit nicely on the larger circle's curve */
	right: 15px; /* Bumped in from 5px */
	background-color: var(--app-accent);
	color: white;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.9rem;
	border: 2px solid #ffffff;
}

.status-indicator[b-ci0belu6qm] {
	font-size: 0.85rem;
	color: var(--app-sage-dark);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}

	.status-indicator .dot[b-ci0belu6qm] {
		width: 8px;
		height: 8px;
		background-color: var(--app-sage);
		border-radius: 50%;
		display: inline-block;
	}

/* --- RIGHT PANEL LAYOUT --- */
.right-panel[b-ci0belu6qm] {
	border-left: 1px solid #e0e0e0;
	padding-left: 2rem;
}

/* =========================================
   2. TEXTING THREAD & BUBBLE MECHANICS
========================================= */
.chat-wrapper[b-ci0belu6qm] {
	border: 1px solid #eef0f2;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.chat-header[b-ci0belu6qm] {
	background-color: #f8f9fa;
}

.chat-feed[b-ci0belu6qm] {
	display: flex;
	flex-direction: column;
	background-color: #f4f6f8;
	min-height: 350px;
}

/* Incoming Message Bubble (Left Align) */
.chat-bubble-incoming[b-ci0belu6qm] {
	align-self: flex-start;
	background-color: #ffffff;
	color: #212529;
	padding: 1rem 1.25rem;
	border-radius: 4px 18px 18px 18px;
	max-width: 85%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.04);
	margin-bottom: 1.5rem;
	position: relative;
	border: 1px solid #eaeaea;
}

/* Outgoing History Bubble (Right Align Flat text) */
.chat-bubble-outgoing[b-ci0belu6qm] {
	align-self: flex-end;
	background-color: #e1f5fe;
	color: #0288d1;
	padding: 1rem 1.25rem;
	border-radius: 18px 18px 4px 18px;
	max-width: 85%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.03);
	margin-bottom: 1.5rem;
	border: 1px solid #b3e5fc;
	font-weight: 500;
}

.message-text[b-ci0belu6qm] {
	line-height: 1.6;
	font-size: 1.1rem;
	white-space: pre-wrap; /* Keeps your standard \n line breaks working! */
}

	/* --- NEW: Image handling for rich media chat bubbles --- */
	.message-text[b-ci0belu6qm]  img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
		display: block; /* REQUIRED: Tells the image to take up its own line */
		margin: 10px auto 5px auto; /* REQUIRED: Centers the image horizontally */
	}

/* Outgoing Interactive Action Button */
.reply-wrapper[b-ci0belu6qm] {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
}

.btn-reply[b-ci0belu6qm] {
	align-self: flex-end;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 1rem 1.5rem;
	max-width: 85%;
	text-align: right;
	border-radius: 18px 18px 4px 18px;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.4;
	border: none;
	box-shadow: 0 4px 12px rgba(var(--app-accent-rgb), 0.25);
	transition: all 0.2s ease-in-out;
}

.btn-reply-primary[b-ci0belu6qm] {
	background-color: var(--app-accent);
	color: white;
}

	.btn-reply-primary:hover[b-ci0belu6qm] {
		background-color: var(--app-accent-dark);
		transform: scale(1.02);
	}

.btn-reply-success[b-ci0belu6qm] {
	background-color: var(--app-sage);
	color: white;
	box-shadow: 0 4px 12px rgba(var(--app-sage-rgb), 0.25);
}

	.btn-reply-success:hover[b-ci0belu6qm] {
		background-color: var(--app-sage-dark);
		transform: scale(1.02);
	}

/* --- COLLAPSIBLE MEMO PANEL STYLES --- */
.memos-collapsible-wrapper[b-ci0belu6qm] {
	background-color: #ffffff;
	border: 1px solid #eef0f2;
	border-radius: 12px;
	overflow: hidden;
	margin-top: 2rem;
}

.toggle-memos-btn[b-ci0belu6qm] {
	background: #ffffff;
	text-align: left;
	border: none;
	transition: background-color 0.15s ease;
}

	.toggle-memos-btn:hover[b-ci0belu6qm] {
		background-color: #f8f9fa;
	}

.memo-card[b-ci0belu6qm] {
	border-radius: 8px;
	border-left: 3px solid #ffc107 !important;
}

/* =========================================
   3. RESPONSIVE COMPACT LAYOUTS (Mobile)
========================================= */
@media (max-width: 768px) {
	.test-layout[b-ci0belu6qm] {
		display: block;
		padding: 0;
	}

	.left-panel[b-ci0belu6qm] {
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 0; /* CHANGED: This is where the 0 goes to fix the mobile peek-a-boo bug! */
		border-bottom: 1px solid #ddd;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		width: 100%;
		box-sizing: border-box;
	}

	#active-message-target[b-ci0belu6qm] {
		scroll-margin-top: 250px; /* Adjust this slightly if your sticky header is taller/shorter */
	}

	.image-wrapper[b-ci0belu6qm] {
		position: relative;
		align-self: center;
		margin-bottom: 15px;
		cursor: pointer;
	}

	.header-image[b-ci0belu6qm] {
		width: 120px; /* Matched the Test page size */
		height: 120px;
		object-fit: contain;
		background-color: #ffffff;
		border-radius: 50%;
		border: 3px solid #f0f0f0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		display: block;
	}

	.zoom-indicator[b-ci0belu6qm] {
		position: absolute;
		bottom: 0px;
		right: 0px;
		background-color: var(--app-accent);
		color: white;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		border: 2px solid #ffffff;
		transition: transform 0.2s ease;
	}

	.image-wrapper:active .zoom-indicator[b-ci0belu6qm] {
		transform: scale(0.9);
	}

	.status-indicator[b-ci0belu6qm] {
		display: none;
	}

	.chat-name[b-ci0belu6qm] {
		font-size: 1.5rem;
		margin: 0 0 10px 0 !important;
		padding-left: 0;
		text-align: center; /* Centered beautifully under the image */
		width: 100%;
	}

	.left-panel .border-top[b-ci0belu6qm] {
		border-top: none !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
		width: 100% !important;
	}

	.left-panel .badge[b-ci0belu6qm] {
		font-size: 0.9rem !important;
		padding: 8px 12px !important;
		display: block;
		margin: 0 auto;
	}

	.right-panel[b-ci0belu6qm] {
		border-left: none;
		padding: 15px;
	}

	/* --- THE ULTIMATE MOBILE BUBBLE & IMAGE FIX --- */
	.chat-bubble-incoming[b-ci0belu6qm], .chat-bubble-outgoing[b-ci0belu6qm], .btn-reply[b-ci0belu6qm] {
		max-width: 95%;
		box-sizing: border-box !important; /* Stops the padding from expanding the bubble off-screen */
		min-width: 0 !important; /* The magic Flexbox rule that forces GIFs to shrink */
	}

	.message-text[b-ci0belu6qm] {
		width: 100%;
		min-width: 0;
		word-wrap: break-word; /* Safety net so long text doesn't break the bubble either */
	}

		.message-text[b-ci0belu6qm]  img {
			max-width: 100% !important;
			height: auto !important;
			max-height: 250px !important;
			object-fit: contain !important;
			border-radius: 8px;
			display: block; /* Already here, perfect */
			margin: 10px auto 5px auto !important; /* Forces centering on mobile */
		}
}

/* Animations */
.entry-fade[b-ci0belu6qm] {
	animation: chatSlideIn-b-ci0belu6qm 0.35s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes chatSlideIn-b-ci0belu6qm {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-pulse[b-ci0belu6qm] {
	animation: replyPulse-b-ci0belu6qm 2s infinite;
}

@keyframes replyPulse-b-ci0belu6qm {
	0% {
		box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
	}

	70% {
		box-shadow: 0 0 0 12px rgba(25, 135, 84, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
	}
}

/* .image-modal-overlay / .image-modal-content / .image-modal-close now live in
   wwwroot/app.css - shared with WeekTestPlay.razor and others instead of
   being copy-pasted per page. */

/* How often this reader has been tested on the subject, on the portrait itself.
   
   Top-right, because the zoom button already owns bottom-right. stopPropagation in the markup
   keeps a tap on it from opening the photo modal the wrapper is listening for - the badge is a
   label, and a label that opens something is a trap. */
.tested-badge[b-ci0belu6qm] {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .2rem .5rem;
	border-radius: 999px;
	background-color: #ffffff;
	border: 1px solid var(--app-rule, #e2e0e6);
	color: var(--app-muted, #6c757d);
	font-size: .75rem;
	font-weight: 600;
	cursor: default;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/ChoiceToggle.razor.rz.scp.css */

.choice-card[b-vghmxhdlh4] {
	padding: 12px;
	margin: 8px 0;
	border-radius: 8px;
	border: 2px solid #ccc;
	cursor: pointer;
	transition: 0.2s ease;
}

	.choice-card:hover[b-vghmxhdlh4] {
		border-color: #888;
		background-color: #f7f7f7;
	}

	.choice-card.selected[b-vghmxhdlh4] {
		border-color: #007bff;
		background-color: #e7f1ff;
	}
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/TestComplete.razor.rz.scp.css */
/* =========================================
   1. MAIN CONTAINER
========================================= */
.completion-container[b-9j6qq5l6xb] {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 80vh;
	padding: 20px;
	background: radial-gradient(circle at center, var(--app-surface) 0%, var(--app-ground) 100%);
	border-radius: 20px;
}

/* =========================================
   2. SUCCESS CARD
========================================= */
.success-card[b-9j6qq5l6xb] {
	background: white;
	max-width: 500px;
	width: 100%;
	padding: 3rem 2rem;
	border-radius: 24px;
	box-shadow: 0 20px 40px rgba(var(--app-slate-rgb), 0.10);
	text-align: center;
	border: 1px solid var(--app-rule);
	animation: slideUpFade-b-9j6qq5l6xb 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================
   3. ANIMATED TROPHY ICON
========================================= */
.icon-wrapper[b-9j6qq5l6xb] {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto 2rem auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.glow-ring[b-9j6qq5l6xb] {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--app-slate-tint);
	border-radius: 50%;
	animation: pulseGlow-b-9j6qq5l6xb 2s infinite alternate;
	z-index: 1;
}

.trophy-icon[b-9j6qq5l6xb] {
	font-size: 4.5rem;
	color: var(--app-accent);
	z-index: 2;
	text-shadow: 0 8px 15px rgba(var(--app-accent-rgb), 0.30);
	animation: popInBounce-b-9j6qq5l6xb 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* =========================================
   4. TYPOGRAPHY & STATS
========================================= */
.celebration-title[b-9j6qq5l6xb] {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--app-slate);
	margin-bottom: 0.5rem;
}

.celebration-text[b-9j6qq5l6xb] {
	font-size: 1.1rem;
	color: var(--app-muted);
	line-height: 1.6;
	margin-bottom: 2.5rem;
}

.stats-row[b-9j6qq5l6xb] {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.stat-box[b-9j6qq5l6xb] {
	background: var(--app-sunken);
	padding: 1.2rem 1.5rem;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 140px;
	border: 1px solid var(--app-rule);
}

.stat-icon[b-9j6qq5l6xb] {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.stat-number[b-9j6qq5l6xb] {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--app-slate);
}

.stat-label[b-9j6qq5l6xb] {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--app-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
}

/* =========================================
   5. BUTTONS
========================================= */
.action-buttons[b-9j6qq5l6xb] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.action-btn[b-9j6qq5l6xb] {
	padding: 0.8rem 1.5rem;
	font-weight: bold;
	font-size: 1.1rem;
	border-radius: 12px;
	transition: all 0.2s ease;
}

	.action-btn:hover[b-9j6qq5l6xb] {
		transform: translateY(-2px);
	}

/* =========================================
   6. ANIMATIONS
========================================= */
@keyframes slideUpFade-b-9j6qq5l6xb {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes popInBounce-b-9j6qq5l6xb {
	0% {
		opacity: 0;
		transform: scale(0.3) rotate(-15deg);
	}

	60% {
		transform: scale(1.1) rotate(5deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotate(0);
	}
}

@keyframes pulseGlow-b-9j6qq5l6xb {
	0% {
		transform: scale(0.8);
		opacity: 0.4;
	}

	100% {
		transform: scale(1.2);
		opacity: 0.8;
	}
}

/* Mobile Adjustments */
@media (max-width: 500px) {
	.stats-row[b-9j6qq5l6xb] {
		flex-direction: column;
		gap: 1rem;
	}

	.stat-box[b-9j6qq5l6xb] {
		min-width: 100%;
	}

	.success-card[b-9j6qq5l6xb] {
		padding: 2rem 1.5rem;
	}
}
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/TestPlay.razor.rz.scp.css */
/* =========================================
   1. MAIN DESKTOP LAYOUT
========================================= */
.test-layout[b-izn53bs28c] {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0;
	padding: 20px;
	align-items: start;
}

/* --- LEFT PANEL (Sticky Header) --- */
.left-panel[b-izn53bs28c] {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	padding: 1.5rem;
}

/* -------------------------------------
   ADD THESE DESKTOP WRAPPER & BADGE RULES
-------------------------------------- */

/* DESKTOP IMAGE WRAPPER */
.image-wrapper[b-izn53bs28c] {
	position: relative;
	align-self: center; /* Centers it in the sidebar */
	margin-bottom: 20px;
	cursor: pointer;
	width: 100%;
	max-width: 250px; /* Locks the wrapper to perfectly fit the image */
}

/* DESKTOP IMAGE */
.header-image[b-izn53bs28c] {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	display: block;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* THE ZOOM BADGE */
.zoom-indicator[b-izn53bs28c] {
	position: absolute;
	bottom: -10px; /* Hangs off the bottom */
	right: -10px; /* Snaps to the right corner! */
	background-color: var(--app-accent);
	color: white;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	border: 2px solid #ffffff;
	transition: transform 0.2s ease;
}

.image-wrapper:active .zoom-indicator[b-izn53bs28c] {
	transform: scale(0.9);
}

/* ------------------------------------- */

.mobile-button-group[b-izn53bs28c] {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.submit-btn[b-izn53bs28c] {
	width: 100%;
}

.refresh-btn[b-izn53bs28c] {
	width: 100%;
}

.desktop-divider[b-izn53bs28c] {
	display: block;
	width: 100%;
}

/* --- RIGHT PANEL (Scrolling Content) --- */
.right-panel[b-izn53bs28c] {
	padding-top: 0;
	border-left: 2px solid #e0e0e0;
	padding-left: 2rem;
}

/* =========================================
   2. INTERACTIVE CHOICE CARDS & BADGES
========================================= */
.choice-list[b-izn53bs28c] {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

	.choice-list li[b-izn53bs28c] {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
		border: 1px solid #f0f0f0;
		transition: all 0.2s ease;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* So the after-the-question blocks below can drop onto their own line instead of
		   squeezing the fact. Nothing else in the row wraps: the fact grows and the badge is
		   small, which is why this row has been a single line until now. */
		flex-wrap: wrap;
	}

		.choice-list li:hover[b-izn53bs28c] {
			transform: translateY(-3px);
			box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
			cursor: pointer;
		}

.choice-wrapper[b-izn53bs28c] {
	flex-grow: 1;
}

/* --- GRADED STATES --- */
.choice-list li.selected-card[b-izn53bs28c] {
	background-color: #eff6ff;
	border-color: var(--app-accent);
	box-shadow: 0 4px 15px rgba(var(--app-accent-rgb), 0.15);
}

.choice-list li.correct-card[b-izn53bs28c] {
	background-color: #f0fdf4;
	border-color: #22c55e;
	box-shadow: 0 4px 15px rgba(34, 197, 94, 0.15);
}

.choice-list li.wrong-card[b-izn53bs28c] {
	background-color: #fef2f2;
	border-color: #ef4444;
	box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

/* --- BADGES --- */
.selected-badge[b-izn53bs28c], .correct-badge[b-izn53bs28c], .wrong-badge[b-izn53bs28c] {
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: 15px;
	animation: popIn-b-izn53bs28c 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.selected-badge[b-izn53bs28c] {
	background-color: var(--app-accent);
}

.correct-badge[b-izn53bs28c] {
	background-color: #22c55e;
}

.wrong-badge[b-izn53bs28c] {
	background-color: #ef4444;
}

@keyframes popIn-b-izn53bs28c {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* =========================================
   3. MOBILE RESPONSIVENESS (The Stacked Header)
========================================= */
@media (max-width: 768px) {
	.test-layout[b-izn53bs28c] {
		display: block; /* Turns off Grid so the header can stick and slide down */
		padding: 0;
	}

	.left-panel[b-izn53bs28c] {
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		flex-direction: column; /* Stack vertically */
		align-items: center;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 0 0 15px 15px;
		border-bottom: 1px solid #ddd;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		width: 100%; /* Fixes the horizontal scrolling bug */
		box-sizing: border-box;
	}

	/* 1. NEW: The wrapper takes over the centering and spacing */
	.image-wrapper[b-izn53bs28c] {
		position: relative;
		align-self: center;
		margin-bottom: 15px; /* Moved this from the image to the wrapper */
		cursor: pointer;
	}

	/* 2. UPDATED: The image itself (just removed margin-bottom and align-self) */
	.header-image[b-izn53bs28c] {
		width: 120px;
		height: 120px;
		object-fit: contain;
		background-color: #ffffff;
		border-radius: 50%;
		border: 3px solid #f0f0f0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		display: block; /* Removes weird spacing below images */
	}

	/* 3. NEW: The slick zoom badge */
	.zoom-indicator[b-izn53bs28c] {
		position: absolute;
		bottom: 0px;
		right: 0px;
		background-color: var(--app-accent); /* Nice bright blue */
		color: white;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		border: 2px solid #ffffff; /* Gives it a cut-out look against the image */
		transition: transform 0.2s ease;
	}

	/* When tapped, give the badge a little pop! */
	.image-wrapper:active .zoom-indicator[b-izn53bs28c] {
		transform: scale(0.9);
	}

	.left-panel h3[b-izn53bs28c] {
		display: none;
	}

	.mobile-button-group[b-izn53bs28c] {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Full-width Submit Button below the image */
	.submit-btn[b-izn53bs28c] {
		width: 100%;
		margin-top: 0;
		padding: 12px;
		font-size: 1.1rem;
		font-weight: bold;
		border-radius: 8px;
	}

	/* FLOATING TOP-RIGHT REFRESH ICON */
	.refresh-btn[b-izn53bs28c] {
		position: absolute; /* Pulls it out of the flow */
		top: 15px;
		right: 15px; /* Pins it to the top right of the panel */

		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		font-size: 1.3rem;
		color: #555;
		background-color: #f8f9fa;
		border: 1px solid #e0e0e0;
		border-radius: 50%;
		box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	}

	.desktop-divider[b-izn53bs28c] {
		display: none;
	}

	.right-panel[b-izn53bs28c] {
		border-left: none;
		padding: 15px;
	}
}
/* =========================================
   5. IMAGE MODAL / LIGHTBOX
========================================= */

/* Add a pointer cursor and subtle hover effect to the small profile image */
.header-image[b-izn53bs28c] {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

	.header-image:hover[b-izn53bs28c] {
		transform: scale(1.05); /* Grows slightly when hovered */
		box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	}

/* .image-modal-overlay / .image-modal-content / .image-modal-close (and their
   fadeInModal/zoomInImage animations) now live in wwwroot/app.css - shared
   with WeekRemember.razor instead of being copy-pasted per page. */

/* =========================================
   6. NEXT ROUND GLOW ANIMATION
========================================= */

/* The "Ready to Move On" glowing button */
.pulse-next-btn[b-izn53bs28c] {
	background-color: #22c55e !important; /* Bright success green */
	color: white !important;
	border-color: #22c55e !important;
	transform: scale(1.05); /* Makes the button physically pop out */
	z-index: 10; /* Ensures the glow overlaps other elements */
	/* The continuous ripple animation */
	animation: pulse-green-b-izn53bs28c 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

	/* Ensure any icons inside turn white when it glows */
	.pulse-next-btn i[b-izn53bs28c] {
		color: white !important;
	}

/* The expanding glow effect */
@keyframes pulse-green-b-izn53bs28c {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	}

	70% {
		box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

/* =========================================
   7. INSTRUCTION BANNER
========================================= */
.instruction-banner[b-izn53bs28c] {
	background-color: #f0f9ff; /* Very soft, inviting blue */
	color: #0369a1; /* Deep, readable blue */
	border: 1px solid #bae6fd;
	padding: 15px 20px;
	border-radius: 12px;
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
	animation: slideDownFade 0.4s ease-out forwards;
}

	.instruction-banner .icon[b-izn53bs28c] {
		font-size: 1.4rem;
		color: #0ea5e9;
		margin-top: -2px; /* Aligns the icon perfectly with the text */
	}

/* On mobile, shrink the text just a tiny bit to save space */
@media (max-width: 768px) {
	.instruction-banner[b-izn53bs28c] {
		font-size: 0.95rem;
		padding: 12px 15px;
	}
}

/* Where a fact came from, shown under it once the question is over.

   Quiet on purpose: it is an explanation, not a verdict, and it sits under a badge that already
   carries the news. Indented so it reads as belonging to the fact above rather than as a new item
   in the list. */
.answer-source[b-izn53bs28c] {
    margin: .4rem 0 0 1.75rem;
    padding: .45rem .7rem;
    border-left: 3px solid var(--app-rule, #e2e0e6);
    background-color: var(--app-sunken, #f8f7fa);
    border-radius: 0 6px 6px 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--app-muted, #6c757d);
    font-style: italic;
}

.answer-source-label[b-izn53bs28c] {
    font-style: normal;
    font-weight: 600;
    margin-right: .35rem;
}

/* SAYING A QUESTION WAS WRONG.
   
   Deliberately the quietest thing on the card. It sits under the fact it is about, indented to
   the same 1.75rem as .answer-source so the two read as one block of after-the-fact detail - and
   it must never compete with the correct/wrong badge, which is what the person is actually
   looking at when the question ends. */
.report-row[b-izn53bs28c] {
    margin: .35rem 0 0 1.75rem;
    /* ITS OWN LINE, not a column beside the fact. The collapsed link is narrow and the open
       panel is wide, so sharing the row meant opening it shrank the fact and re-wrapped its
       text - the card moving under the cursor at the exact moment somebody is reading it to
       decide what was wrong with it. */
    flex-basis: 100%;
}

.report-open[b-izn53bs28c] {
    border: 0;
    background: none;
    padding: .15rem 0;
    font-size: .78rem;
    color: var(--app-muted, #6c757d);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.report-open:hover[b-izn53bs28c],
.report-open:focus-visible[b-izn53bs28c] {
    color: var(--bs-danger, #dc3545);
}

.report-thanks[b-izn53bs28c] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--bs-success, #198754);
}

.report-panel[b-izn53bs28c] {
    margin-top: .3rem;
    padding: .6rem .7rem;
    border: 1px solid var(--app-rule, #e2e0e6);
    border-radius: 8px;
    background-color: var(--app-sunken, #f8f7fa);
}

.report-panel-title[b-izn53bs28c] {
    margin: 0 0 .45rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--app-ink, #212529);
}

/* Wraps rather than scrolls: all three reasons have to be readable at once, because the choice
   between "the story did not say this" and "it was just hard" IS the measurement. */
.report-reasons[b-izn53bs28c] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}

.report-reason[b-izn53bs28c] {
    padding: .25rem .6rem;
    border: 1px solid var(--app-rule, #d8d5de);
    border-radius: 999px;
    background-color: #fff;
    font-size: .76rem;
    line-height: 1.3;
    color: var(--app-ink, #212529);
    cursor: pointer;
}

.report-reason:hover[b-izn53bs28c] {
    border-color: var(--bs-primary, #0d6efd);
}

.report-reason.is-chosen[b-izn53bs28c] {
    border-color: var(--bs-primary, #0d6efd);
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
    font-weight: 600;
}

.report-note[b-izn53bs28c] {
    font-size: .8rem;
    margin-bottom: .5rem;
}

.report-actions[b-izn53bs28c] {
    display: flex;
    align-items: center;
    gap: .25rem;
}
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/Tests.razor.rz.scp.css */
/* The quick-test search's own suggestion list.

   Drawn here rather than left to <datalist>, which could not be styled, matched differently in
   every browser, and had no way to say "there is nothing by that name". */

.quick-test-search[b-5dfl6y79tt] {
    position: relative;
}

/* Over the page, not in the flow: a list that pushed the button down would move the thing
   somebody is reaching for at the exact moment they reach for it. */
.quick-test-matches[b-5dfl6y79tt] {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 17rem;
    overflow-y: auto;
    padding: .25rem 0;
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: .65rem;
    box-shadow: 0 .4rem 1.25rem rgba(var(--app-slate-rgb), .16);
}

.quick-test-match[b-5dfl6y79tt] {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: .55rem 1rem;
    border: 0;
    background: none;
    text-align: left;
    color: var(--app-text);
    cursor: pointer;
}

    .quick-test-match:hover[b-5dfl6y79tt],
    .quick-test-match:focus-visible[b-5dfl6y79tt] {
        background-color: var(--app-sunken);
        color: var(--app-accent);
    }

    .quick-test-match i[b-5dfl6y79tt] {
        color: var(--app-muted);
    }

    .quick-test-match:hover i[b-5dfl6y79tt],
    .quick-test-match:focus-visible i[b-5dfl6y79tt] {
        color: var(--app-accent);
    }

/* Says how many were left out, so nobody concludes their thing is not in there. */
.quick-test-more[b-5dfl6y79tt] {
    padding: .4rem 1rem;
    font-size: .8rem;
    color: var(--app-muted);
}

/* WHAT YOU HAVE BEEN TESTED ON.
   
   A roll-up across everything, deliberately NOT tied to a batch - see the comment in the markup.
   
   Chips that wrap rather than a table: the list is short, the two values per subject are a name
   and a count, and a table of two narrow columns on a phone is mostly borders. */
.tested-on-list[b-5dfl6y79tt] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tested-on-item[b-5dfl6y79tt] {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .3rem .65rem;
    border: 1px solid var(--app-rule, #e2e0e6);
    border-radius: 999px;
    background-color: #ffffff;
    font-size: .82rem;
}

.tested-on-name[b-5dfl6y79tt] {
    font-weight: 600;
    color: var(--app-ink, #212529);
}

.tested-on-count[b-5dfl6y79tt] {
    color: var(--app-muted, #6c757d);
    font-size: .76rem;
}
/* _content/MemoryGame.Web/Components/Shared/PhotoGallery.razor.rz.scp.css */
/* Moved here from Memorial.razor.css, which is where this grid was written first. Scoped CSS is
   per component, so the occasion's wall could not have reused it where it was. */

.gallery-view-grid[b-8nvbzrbmn0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    align-items: start; /* Keeps cards sized to their content instead of stretching */
}

.gallery-card[b-8nvbzrbmn0] {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .gallery-card:hover[b-8nvbzrbmn0] {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
    }

.gallery-media[b-8nvbzrbmn0] {
    max-height: 250px;
    object-fit: contain;
    background-color: #ffffff;
    width: 100%;
}

/* A button rather than a div, so it is reachable by keyboard and announced as something that does
   something - but it has to be stripped back to looking like the picture it wraps. */
.gallery-open[b-8nvbzrbmn0] {
    background: none;
    border: 0;
    padding: 0;
    cursor: zoom-in;
}

.gallery-zoom-icon[b-8nvbzrbmn0] {
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0.6);
    color: white;
}

.gallery-embed[b-8nvbzrbmn0] {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

    .gallery-embed iframe[b-8nvbzrbmn0] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }